Product Questions & Answers

Zid merchants can enhance the shopping experience by offering a product questions and answers feature. As a theme developer, it's important to integrate this feature effectively to allow customers to ask questions and view responses from the store merchant, as well as browse questions and answers from other customers.

---

Activation Steps for Merchants

1. Visit the merchant dashboard Product Questions & Answers Settings.


2. Preview the questions added by either the merchant or the customer.


---

Code Snippet Integration for Theme Partners

template: product.twig

{% if store.is_product_question_and_answer_enabled %}
<section class="mt-5 review-details">
    <div>
        <div class="d-flex flex-wrap align-items-center" style="width: 100%">
            <div class="description-icon">
                <span class="icon-reviews_black"></span>
            </div>
            <div class="description-title">
                {{ locals.product_questions }}
            </div>
            {% if product.questions is not empty %}
            <button type="button" class="btn btn-primary add-review-btn" id="addQuestionButton"><span class="icon-add_circle"></span>{{ locals.add_product_question}} </button>
            {% endif %}
        </div>
    </div>
    {% if product.questions is not empty %}
    {% for key, question in product.questions %}
    <div class="card questions-card-preview mt-2 mb-5">
        <div class="card-body p-0">
            {% if not question.is_anonymous and question.name is defined and question.name is not empty %}
            <div class="customer-name">{{ question.name }}</div>
            {% endif %}
            <div class="d-flex">
                <div class="question-box">
                    <p class="question">{{ question.question }}</p>
                </div>
            </div>
            <div class="answer-box">
                <p class="answer m-0">{{ question.answers[0].answer }}</p>
            </div>
        </div>
    </div>
    {% endfor %}
    {% if (product.questions|length) >= 5 %}
    <div class="text-center questions-view_more">
        <a href="/products-questions?id={{ product.id }}">{{ locals.product_questions_view_all }}</a>
    </div>
    {% endif %}
    {% else %}
    <div class="card mt-2 mb-5 bg-transparent">
        <div class="text-center questions-card-init">
            <div class="image-box">
                <svg width="93" height="81" viewBox="0 0 93 81" fill="none" xmlns="http://www.w3.org/2000/svg">
                </svg>
            </div>
            <div class="content-box">
                <p class="m-0 p-0">{{ locals.product_question_empty }}</p>
                <p class="m-0 p-0">{{ locals.product_question_empty_note }}</p>
            </div>
            <div class="button-box">
                <button type="button" class="btn btn-primary btn-lg add-review-btn" id="addQuestionButton">{{ locals.add_product_question }}</button>
            </div>
        </div>
    </div>
    {% endif %}

    <div class="modal fade" id="addProductQuestionModal" tabindex="-1" role="dialog" aria-labelledby="addProductQuestionModal" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-comment-content">
                <div class="modal-body" style="padding: 20px">
                    <form>
                        <div class="d-flex align-items-center mt-3 mb-3">
                            <span class="modal-product-title">{{ locals.add_product_question }}</span>
                        </div>

                        <div class="form-group">
                            <input rows="4" name="name" class="form-control" placeholder="{{ locals.add_product_question_name }}" />
                            <p class="d-none input-error-name mt-1 text-danger">{{ locals.common_requried_input_error }}</p>
                        </div>
                        <div class="form-group">
                            <textarea rows="4" name="question" placeholder="{{ locals.add_product_question_placholder }}" class="form-control"></textarea>
                            <p class="d-none input-error-question mt-1 text-danger">{{ locals.common_requried_input_error }}</p>
                        </div>
                        <div class="form-group">
                            <input rows="4" name="email" class="form-control" placeholder="{{ locals.add_product_question_email }}"/>
                            <p class="d-none input-error-email mt-1 text-danger">{{ locals.common_requried_input_error }}</p>
                            <p class="d-none input-error-invalid-email mt-1 text-danger">{{ locals.common_requried_email_input_error }}</p>
                        </div>
                        <div class="form-group mt-3 mb-3">
                            <label>
              <span class="checkbox-container">
                <input id="is_anonymous" class="checkbox" type="checkbox" name="is_anonymous" />
                <span class="custom-checkmark"></span>
              </span>
                                <span class="custom-checkbox-label"><span>{{ locals.add_product_question_anonymous }}</span></span>
                            </label>
                        </div>
                        <div class="form-group bottom-buttons">
                            <button type="button" class="btn btn-default" data-dismiss="modal" aria-label="Close">{{ locals.cancel }}</button>
                            <span>&nbsp;&nbsp;</span>
                            <button type="button" class="btn btn-primary btn-submit-new-question" onclick="productsQuestions.submitQuestion('{{product.id}}')">
                                <img class="add-review-progress d-none" src="{{ asset_url }}spinner.gif" width="15" height="15" />
                                {{ locals.send }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</section>
{% endif %}