> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://www.guides.helpfulcrowd.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.

### Widget Overview

**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="{{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).

![](https://storage.crisp.chat/users/helpdesk/website/66fbd5d04fe00400/image_1bdm3og.png)

![](https://storage.crisp.chat/users/helpdesk/website/66fbd5d04fe00400/image_wvylur.png)

### 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).

![](https://storage.crisp.chat/users/helpdesk/website/66fbd5d04fe00400/image_10ejiqx.png)


### 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).
 
![](https://storage.crisp.chat/users/helpdesk/website/66fbd5d04fe00400/image_1mrgcr5.png)

### 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).

![](https://storage.crisp.chat/users/helpdesk/website/66fbd5d04fe00400/image_17io3a0.png)

### 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).

![](https://storage.crisp.chat/users/helpdesk/website/66fbd5d04fe00400/image_11sob1f.png)

### Sidebar

* Go to Settings > Widgets > Sidebar in HelpfulCrowd.

* Enable sidebar and Auto-embed on storefront.


![](https://storage.crisp.chat/users/helpdesk/website/66fbd5d04fe00400/image_3niw4k.png)

![](https://storage.crisp.chat/users/helpdesk/website/66fbd5d04fe00400/image_1ea200j.png)


****