Adding widgets to Shopify 2.0 themes

Now that you’ve installed the HelpfulCrowd Review and Q&A app, you can now easily drag and drop, and add our widgets to your online store using the Shopify theme editor.

Product Ratings - usually added to Collection pages. Usually needs to be added manually into theme code

Product Summary - usually added to Product pages between the title and price.

Product Tabs - usually added to Product pages towards the bottom of the page.

Sidebar - auto-injected on installation and can be enabled on all or selected pages.

Review Journal - usually added to a dedicated page, which displays all the reviews together.

Review Slider - review carousel that can be added to the Home page or any other page.

Product Ratings

If the Product Ratings do not automatically appear in your theme, they may need to be added manually. The following instructions are for the Shopify Dawn theme, however they may differ depending on theme. Please reach out to our support team if you require assistance.

From the theme editor select … and Edit code.

Navigate to Snippets > product_card.liquid.

Scroll down to the <div class="card-information"> section.

Copy and paste the following snippet after the endif and before the TODO: Metafield comment.

{% comment %} Start of Helpfulcrowd Rating widget. Do not change or delete till the next comment {% endcomment %}
<div class="hc-widget">
<div data-hc="product-rating" data-hc-id="{{product_card_product.id}}"></div>
</div>
{% comment %} End of Helpfulcrowd Rating widget. Do not change or delete till previous comment  {% endcomment %}

Save.

Customize widget in Helpfulcrowd under Settings (optional).

Product Summary

Select theme, and click 'Customize'.

Select the Product Template you’d like to add reviews to.

Under the Product information section click Add Block.

Select Product Summary, which is listed under Apps.

Drag and drop underneath Title element or other preferred location at top of product page.

Save.

Customize widget in Helpfulcrowd under Settings (optional).

Product Tabs

Select theme, and click 'Customize'.

Select the Product Template you’d like to add reviews to.

Click Add Section.

Select Product Tabs, which is listed under Apps.

Drag and drop in the sidebar to the required position between page elements.

Save.

Customize widget in Helpfulcrowd under Settings (optional).

Review Journal

Select theme, and click customize.

Create a new page using the default or other page template.

Click Add Section.

Select Review Journal, which is listed under Apps.

Drag and drop in the sidebar to the required position between page elements.

Save.

Customize widget in Helpfulcrowd under Settings (optional).

Review Slider (carousel)

Select theme, and click customize.

Create the page that you would like to add the slider to.

Click Add Section.

Select Slider, which is listed under Apps.

Drag and drop in the sidebar to the required position between page elements.

Save.

Customize widget in Helpfulcrowd under Settings (optional).

Sidebar

Go to Settings > Widgets > Sidebar in HelpfulCrowd.

Enable sidebar and Auto-embed on storefront.

Updated on: 06/10/2021

Was this article helpful?

Thank you!