Product Questions & Answers

With the Product Q & A extension, your website will display a Product Q & A section on each product page, as shown on the example below.

Visitors can submit questions (by entering their name, email and question) and, if a question is 'public', they can view other visitors questions and your answers.

Visitors can also rate a question & answer positively or negatively (in the example above this is shown with thumbs up and thumbs down icons).

In your account you'll be able to see all the questions and enter your answer. You can choose to display the q&a on the product page (or keep it private) and also whether to email the answer to the customer automatically.

If you think a q&a is suitable for another product(s) then you can make it display on those products too.


Installing the extension

Select 'apps and extensions' from the left menu and then 'available extensions'. Find the 'product questions & answers' extension and click to activate it on your account.

Once the extension is activated you'll then need to add the relevant code to your website's files (described below). Adding the code will place the form on your website. To add the relevant code you'll need to use the page editor, alternatively you can click the 'request installation' button and we'll install the code for you (a small charge will be made for the installation, which is listed on the extension page).

1. Locate the product.twig file (located in /views/product pages/product.twig)

2. Add the code shown below where you'd like the question form to be shown. 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. 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>

Note: 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 display 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 so will need to be styled to display nicely.

4. Save your changes.

5. Navigate to the 'website automatic emails' settings page (you can find out more information about this by clicking here).

You'll notice that there are 2 new emails 'Product Question Answered' and 'Product Question Asked'. You'll need to add content to these emails.

Within the emails you can use the following variables

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

to display the URL of the product, and the answer you have provided.


Marking a product as suitable for Q&A

In order to display the Q&A section on the product page on your website, when adding/editing a product you must mark the product as 'suitable for q&a'.

This is done in the 'additional information' box.

To show the Q&A section, you should tick the box labelled 'is this product suitable for q&a'.

Alternatively, you can set all products to be suitable for Q&A. Select 'settings' from the left menu and then 'products'. Near to the bottom of the section you'll see a question 'do you want to activate Q&A on all products'.


Viewing questions asked and answering questions

Questions can be viewed, answered and managed through the 'product q&a' section of your website.

Select 'products' from the left menu and then 'product q & a'. All the questions asked will be displayed to you here.

If there's a tick in the 'show' column then the question and answer is currently being displayed on the product page. You can untick this box to hide it.

If there's a tick in the 'answered' column then it means that you have answered the question already.

Managing a question

When you click to view a question, the top section provides details about the question itself.

You can see the product the question was asked on (this is editable if you want you can select a new product from the drop down), the date of the question and the questioner's name and email address. When the question is submitted, the visitor can choose whether the question is public or not (i.e. should be displayed on the product page), you can override this choice if you want to using the 'is the question public' tick box.

In the next section is the question itself (you can edit this if you want to) and your space for the answer.

Type your answer into the 'your answer' box. There's an HTML editor you can use if you want to.

The last section allows you to tick to send an email to the customer notifying them of the answer.

You'll also notice that you can edit the number of 'helpful' (positive) and 'unhelpful' (negative) votes that a question has.

Finally, you can display the question & answer on other products if you want to, by selecting the additional products from the drop down (click the 'add another product' link to display another drop down list).