Add Answerbase Product Questions & Answers to Your Shopify Store
Let's go over how to integrate into your product pages.
Step 1 - Copy Your Widget Code
It's likely you've already copied your widget code if you're visiting this page, if so, just skip to the next step.
You can access your widget code by going to your administration dashboard and visiting "Integration > Q&A Widget" where you can see and copy the widget code. You'll see that there is a drop down for the code where you can select the code specifically for Shopify.
Step 2 - Paste Widget Code into Your Store's Theme Template
Follow these steps:
- From your Shopify admin, go to Online Store > Themes.
- In the Current theme section, click the Actions drop-down menu, then click Edit code.
- In the file tree, under the Layout folder, click theme.liquid which controls your theme template
- Paste the script just above the closing </body> tag of your template
- Save your template changes
Step 3 - Placement and Positioning of the Q&A Widget on Your Product Page
After you've installed the widget code template and saved, go to your Store and visit one of your product pages. See if you have Q&A displaying on your product page now and that everything is working as expected. It looks similar to this:
If the Widget IS Displaying: This means that Answerbase recognizes your template and has positioned it automatically, so you should be done. We encourage you to submit a new question and then check in your Answerbase administration area to ensure the question came through and the appropriate product was associated. If you'd like to consider repositioning where it displays on your product page, you can continue reading which will give instruction on how to specify the position of your widget.
If the Widget IS NOT Displaying (or you want to reposition): If you don't see the Q&A widget on your product page, that means that Answerbase hasn't been able to identify where to best place the widget within your template.
To display the widget on your product page, we just need to identify what existing element on your product page the widget should show before or after by adding a "data-insert-before" or "data-insert-after" attribute to the widget code you pasted in Step 2. You can see details of how to define those attributes in the widget parameters documentation, and that let's the widget know what element on your page it should insert the widget before or after.
For example, let's say want the Q&A widget to display under the product description. Your current product page source code may render your product description similar to this:
<h2 class="subtitle">Product Description</h2>
<p>This is a great shoe for summer, it's sunshine yellow with white stripes.</p>
You'll just need to let the widget know that you want it to show up under the product description <div> that has a class value of "ProductDescription"....so you'd use the "data-insert-after" attribute and add that to your widget code. So, your widget code would reflect that new attribute and may look something like this:
That will ensure that the widget shows underneath the "ProductDescription" div when the page loads. You can use these "data-insert-before" or "data-insert-after" attributes to position or reposition your widget as you'd like within your page.
DEVELOPER'S TIP: If you can't find an existing element on your page that you can easily reference, you can always add your own div to your template like <div class="answerbase"></div> and then just reference that value within the widget attribute. That gives you as much flexibility as you need to ensure the widget shows up where/how you want it on your page.
Step 4 - Ask for Help if Needed
We're here to make sure you're integration is successful, so if you have any questions or need help just Contact Us and we'll make sure you're 100%.
Adding Answerbase to Other Pages
We recommend that if you're integrating Answerbase into your ecommerce store, the best way to drive customer engagement and new traffic to your store is through Product Page Integration as noted above. But, you can of course integrate Q&A into other areas of your site as well to engage users as they're browsing around your entire storefront. In those cases, you don't have to identify the product attributes and can just utilize the widget parameters as you see fit.