Product questions & answers

Installation instructions (all theme versions)

To install the products Q&A app select APPs > Available APPs from the menu. Find and select the 'Product Q&A' app and select INSTALL THIS APP.

Once you've installed the app, you'll need to add the relevant code to your live theme's files. Adding the code will place the form on your website. To add the relevant code you'll need to use the page editor for your live theme. Alternatively, if you don't want to add the code yourself, you can select request installation on the app installation page, and we will install the code for you for a small charge which is shown on the installation page.

1. If you're using a version 2 or earlier theme, locate the product.twig file by selecting Views > Product Pages > product.twig from the menu of the page editor.
If you're using a version 3 or later theme, locate the product_form.twig file by selecting Views > Partials > product_form.twig from the menu of the page editor.

2. Add the code shown below where you'd like the question form to be shown. Please note, the code shown below is the 'bare minimum' required for the form to work. You may want to include (additional) text.

This code comes with no styling, so it will need to be styled (with CSS or inline styles) to display nicely. You'll also need to add form labels.

<form action="{{ product.url }}#questions" method="post">
    <input type="text" name="name" value="{{ new_question.name }}">
    <input type="text" name="email" value="{{ new_question.email }}">
    <textarea cols="30" rows="5" name="question">{{ new_question.question }}</textarea>
    <input type="checkbox" name="public" value="1" {{ new_question.is_public ? 'checked="checked"' : '' }}>
    <button class="button" name="send_question" value="1">Send Your Question</button>
</form>

You should use the variable {% if product.allow_questions %} so that the form is only displayed on products where Q&A is enabled.

3. Add the code shown below where you'd like to display previous questions and answers. Please note that this is the bare minimum markup.

The code comes with no styling, so it will need to be styled (with CSS or inline styles) to display nicely.

{% if product.questions %}
    {% for question in product.questions %}
        {{ question.name }}
        {{ question.question }}
        {{ question.answer|raw }}
    {% endfor %}
{% endif %}

To provide visitors with the ability to rate q&a (either positively or negatively), add the code below:

{% if question.can_rate %}
    <a href="{{ product.url }}?rate_question=1&amp;question_id={{ question.id }}" data-allow="1">
		{{ question.positive_votes }}
	</a>
	<a href="{{ product.url }}?rate_question=1&amp;question_id={{ question.id }}" data-allow="1">
		{{ question.negative_votes }}
	</a>
{% endif %}

Again, please note this code comes with no styling.

4. Save your changes to the file.

Automatic emails

Upon installation of the app, you'll have access to two new automatic emails.

You can configure the content of the 'Product Question Answered' and 'Product Question Asked' emails on the email settings page.

Within the emails you can use the following variables to display the URL of the product, and the answer you have provided:

{{ product_url }} - the URL of the product the question was asked on
{{ answer|raw }} - only available on the 'product question answered' email