First, please make sure that you:<ol class="PlaygroundEditorTheme__ol1"><li value="1" class="PlaygroundEditorTheme__listItem">added the <a href="https://helpdesk.usetrust.io/en/collections/3415421-widgets-pop-ups-badge-floating-stars-and-wall-of-love" rel="noreferrer" class="PlaygroundEditorTheme__link">Trust code to your website</a></li><li value="2" class="PlaygroundEditorTheme__listItem"><a href="https://helpdesk.usetrust.io/en/articles/6135890-create-a-widget" class="PlaygroundEditorTheme__link">created a widget</a> and <a href="https://helpdesk.usetrust.io/en/articles/6135897-assign-testimonials-to-a-widget" class="PlaygroundEditorTheme__link">assigned testimonials</a> to it first.</li></ol> After your widget is set and ready, all you need to do is copy and paste its code to the appropriate place on your Shopify website. 1. Go to “Widgets”, choose a widget you want to add to your website, and click the “Add to website” icon in front of it. <img src="https://downloads.intercomcdn.com/i/o/701598386/e904d54dba8f298a16920fef/Screenshot+at+Mar+29+23-28-18.png" alt="" width="inherit" height="inherit"> 2. Copy the widget's code. <img src="https://downloads.intercomcdn.com/i/o/701600022/7928cbeff4f5cb4ff04936ea/image.png" alt="" width="inherit" height="inherit"> 📝 If your Shopify website already has the “Custom HTML” website section, you can jump to Step 7. 3. Log in to the Shopify account, go to “Online Store → Themes” on the left menu bar, press the “Actions” button and choose “Edit code” from the dropdown menu. <img src="https://downloads.intercomcdn.com/i/o/543170148/568a08ce74051927afe1b55f/image.png" alt="" width="inherit" height="inherit"> 4. Scroll down to the “Sections” menu, press the “Add a new section” button, name it: section-custom-html and click “Create section”. <img src="https://downloads.intercomcdn.com/i/o/543171605/d0a4d2cfc6de27f20eb1b4b1/image.png" alt="" width="inherit" height="inherit"> 5. Remove the default code. <img src="https://downloads.intercomcdn.com/i/o/543173894/cd08801912e3437eb2245b7e/image.png" alt="" width="inherit" height="inherit"> 6. Copy &amp; paste the code below to this section content, then press “Save”: <pre spellcheck="false" data-highlight-language="javascript">&lt;div id="trust-custom-section"&gt; {%- if section.settings.title != blank -%} &lt;div class="trust-custom-title"&gt;&lt;h2&gt;{{section.settings.title}}&lt;/h2&gt;&lt;/div&gt; {%- endif -%} &lt;div class="trust-custom-code"&gt;{{section.settings.custom_html}}&lt;/div&gt; &lt;/div&gt; &lt;style&gt; #trust-custom-section{position:relative;} .trust-custom-title{text-align:center;} &lt;/style&gt; {% schema %} { "name": "HTML", "settings": [ { "type": "text", "id": "title", "label": "Title" }, { "type":"textarea", "id": "custom_html", "label": "HTML" } ], "presets": [ { "name": "Custom HTML", "category": "Trust", "settings": { } } ] } {% endschema %}</pre> <img src="https://downloads.intercomcdn.com/i/o/543183075/f8011bf23dbfb43a20e53366/image.png" alt="" width="inherit" height="inherit"> 7. Come back to “Online Store → Themes” on the left menu bar and press the “Customize” button. <img src="https://downloads.intercomcdn.com/i/o/543197076/a63d8493220aaef9f6104410/image.png" alt="" width="inherit" height="inherit"> 8. Click the “Add section” button on the place of the website page where you want the widget to appear, then find the “Custom HTML” section. <img src="https://downloads.intercomcdn.com/i/o/543199531/3d6f53055347d41b69be8afa/image.png" alt="" width="inherit" height="inherit"> 9. Paste the Trust widget’s code here and click “Save”. <img src="https://downloads.intercomcdn.com/i/o/543201155/0d551d7c6c9f452d59c3e70b/image.png" alt="" width="inherit" height="inherit"> 10. Enjoy results!<img src="https://downloads.intercomcdn.com/i/o/543201788/c2ae694424c9b4d53fe4e830/image.png" alt="" width="inherit" height="inherit">

How to display testimonials and reviews with widgets on your Shopify website.

First, please make sure that you:

1. added the[Trust code to your website](https://helpdesk.usetrust.io/en/collections/3415421-widgets-pop-ups-badge-floating-stars-and-wall-of-love)
2. [created a widget](https://helpdesk.usetrust.io/en/articles/6135890-create-a-widget)and[assigned testimonials](https://helpdesk.usetrust.io/en/articles/6135897-assign-testimonials-to-a-widget)to it first.

After your widget is set and ready, all you need to do is copy and paste its code to the appropriate place on your Shopify website.

1\. Go to “****Widgets****”, choose a widget you want to add to your website, and click the “****Add to website****” icon in front of it.

![](https://downloads.intercomcdn.com/i/o/701598386/e904d54dba8f298a16920fef/Screenshot+at+Mar+29+23-28-18.png)

2\. Copy the widget's code.

![](https://downloads.intercomcdn.com/i/o/701600022/7928cbeff4f5cb4ff04936ea/image.png)

📝 If your Shopify website already has the “****Custom HTML****” website section, you can jump to****Step 7****.

3\. Log in to the Shopify account, go to “****Online Store →**** ****Themes****” on the left menu bar, press the “****Actions****” button and choose “****Edit code****” from the dropdown menu.

![](https://downloads.intercomcdn.com/i/o/543170148/568a08ce74051927afe1b55f/image.png)

4\. Scroll down to the “****Sections”****menu, press the “****Add a new section”****button, name it:

section-custom-html

and click “****Create section”.****

![](https://downloads.intercomcdn.com/i/o/543171605/d0a4d2cfc6de27f20eb1b4b1/image.png)

5\. Remove the default code.

![](https://downloads.intercomcdn.com/i/o/543173894/cd08801912e3437eb2245b7e/image.png)

6\. Copy & paste the code below to this section content, then press “****Save”:****

```
<div id="trust-custom-section"> {%- if section.settings.title != blank -%} <div class="trust-custom-title"><h2>{{section.settings.title}}</h2></div> {%- endif -%} <div class="trust-custom-code">{{section.settings.custom_html}}</div></div><style> #trust-custom-section{position:relative;} .trust-custom-title{text-align:center;}</style>{% schema %} { "name": "HTML", "settings": [ { "type": "text", "id": "title", "label": "Title" }, { "type":"textarea", "id": "custom_html", "label": "HTML" } ], "presets": [ { "name": "Custom HTML", "category": "Trust", "settings": { } } ] }{% endschema %}
```

![](https://downloads.intercomcdn.com/i/o/543183075/f8011bf23dbfb43a20e53366/image.png)

7\. Come back to “****Online Store →**** ****Themes****” on the left menu bar and press the “****Customize****” button.

![](https://downloads.intercomcdn.com/i/o/543197076/a63d8493220aaef9f6104410/image.png)

8\. Click the “****Add section****” button on the place of the website page where you want the widget to appear, then find the “****Custom HTML****” section.

![](https://downloads.intercomcdn.com/i/o/543199531/3d6f53055347d41b69be8afa/image.png)

9\. Paste the Trust widget’s code here and click “****Save****”.

![](https://downloads.intercomcdn.com/i/o/543201155/0d551d7c6c9f452d59c3e70b/image.png)

10\. Enjoy results!

![](https://downloads.intercomcdn.com/i/o/543201788/c2ae694424c9b4d53fe4e830/image.png)

❗ Please make sure that you <a href="https://helpdesk.usetrust.io/en/articles/6135890-create-a-widget" class="PlaygroundEditorTheme__link">created a widget</a> and <a href="https://helpdesk.usetrust.io/en/articles/6135897-assign-testimonials-to-a-widget" class="PlaygroundEditorTheme__link">assigned testimonials</a> to it first.After your widget is set and ready, all you need to do is copy and paste its code to the appropriate place on your Shopify website. 1. Go to “Widgets”, choose a widget you want to add to your website, and click the “Add to website” icon in front of it. <img src="https://downloads.intercomcdn.com/i/o/701598386/e904d54dba8f298a16920fef/Screenshot+at+Mar+29+23-28-18.png" alt="" width="inherit" height="inherit"> 2. Copy the widget's code. <img src="https://downloads.intercomcdn.com/i/o/701600022/7928cbeff4f5cb4ff04936ea/image.png" alt="" width="inherit" height="inherit"> 📝 If your Shopify website already has the “Custom HTML” website section, you can jump to Step 7. 3. Log in to the Shopify account, go to “Online Store → Themes” on the left menu bar, press the “Actions” button and choose “Edit code” from the dropdown menu. <img src="https://downloads.intercomcdn.com/i/o/543170148/568a08ce74051927afe1b55f/image.png" alt="" width="inherit" height="inherit"> 4. Scroll down to the “Sections” menu, press the “Add a new section” button, name it: section-custom-html and click “Create section”. <img src="https://downloads.intercomcdn.com/i/o/543171605/d0a4d2cfc6de27f20eb1b4b1/image.png" alt="" width="inherit" height="inherit"> 5. Remove the default code. <img src="https://downloads.intercomcdn.com/i/o/543173894/cd08801912e3437eb2245b7e/image.png" alt="" width="inherit" height="inherit"> 6. Copy &amp; paste the code below to this section content, then press “Save”: <pre spellcheck="false" data-highlight-language="javascript">&lt;div id="trust-custom-section"&gt; {%- if section.settings.title != blank -%} &lt;div class="trust-custom-title"&gt;&lt;h2&gt;{{section.settings.title}}&lt;/h2&gt;&lt;/div&gt; {%- endif -%} &lt;div class="trust-custom-code"&gt;{{section.settings.custom_html}}&lt;/div&gt; &lt;/div&gt; &lt;style&gt; #trust-custom-section{position:relative;} .trust-custom-title{text-align:center;} &lt;/style&gt; {% schema %} { "name": "HTML", "settings": [ { "type": "text", "id": "title", "label": "Title" }, { "type":"textarea", "id": "custom_html", "label": "HTML" } ], "presets": [ { "name": "Custom HTML", "category": "Trust", "settings": { } } ] } {% endschema %}</pre> <img src="https://downloads.intercomcdn.com/i/o/543183075/f8011bf23dbfb43a20e53366/image.png" alt="" width="inherit" height="inherit"> 7. Come back to “Online Store → Themes” on the left menu bar and press the “Customize” button. <img src="https://downloads.intercomcdn.com/i/o/543197076/a63d8493220aaef9f6104410/image.png" alt="" width="inherit" height="inherit"> 8. Click the “Add section” button on the place of the website page where you want the widget to appear, then find the “Custom HTML” section. <img src="https://downloads.intercomcdn.com/i/o/543199531/3d6f53055347d41b69be8afa/image.png" alt="" width="inherit" height="inherit"> 9. Paste the Trust widget’s code here and click “Save”. <img src="https://downloads.intercomcdn.com/i/o/543201155/0d551d7c6c9f452d59c3e70b/image.png" alt="" width="inherit" height="inherit"> 10. Enjoy results!<img src="https://downloads.intercomcdn.com/i/o/543201788/c2ae694424c9b4d53fe4e830/image.png" alt="" width="inherit" height="inherit">

Add a widget to the Shopify website

How to display testimonials & reviews on your website.

Was this article helpful?