Installing Display Widgets

  • Updated

Display Widgets allow you to showcase your reviews on your site across multiple formats and pages, driving conversion through well-placed social proof. Available formats include carousels, full review pages, and more. Learn more about the various types of Display Widgets here.


Key Notes

  • This guide is specifically for Shopify users
  • Please ensure the main Stamped Script is added to your theme files before installing displaying widgets - visit our guide here for step-by-step instructions

In This Guide


Introduction to Display Widget Installation

The most important part of installing a Display Widget is choosing the right location for your reviews. This guide reviews each of the installation methods available for some of our most popular Display Widgets.

If you are not sure if your store is using a Shopify 2.0 or Vintage Theme, please read Shopify’s help article. Use the jump links above to find the right guide for your store.


Shopify 2.0 Display Widget Installation Guide

a. Installing Display Widgets on an existing page

Go to Online Store - Themes - Customize within your Shopify Dashboard.Widget_Install_1.png

 

Look for the Product Template where the Widget should be installed. As an example, we’ll install this Widget on the homepage:
Widget_Install_2.png

 

Click "Add Section" at the bottom of the left panel of the screen.
Widget_Install_3.png

 

In the "Apps" list, choose your Widget. For reference, you can see our Display Widget Showcase article here.Widget_Install_4.png


Installing the Side Drawer, NPS Form Modal and Review Popup

Some widgets are installed using the App Embeds section of the theme editor, including the Side Drawer, NPS Form Modal, and Review Popup widgets. Simply toggle the widgets you'd like to use to the ON position and Save your changes.

App Embeds 1.png

Once added, you can click on the widget to see customization options:

App Embeds 2.png

These same steps can be followed to disable these pop-ups as well. 


b. Installing Display Widgets on a Custom page

 

Go to the Online Store - Themes - Customize within your Shopify Dashboard.Widget_Install_7.png

 

Click "Pages > Create Template"Widget_Install_8.png

 

Give the page a name and which template its structure is based on. Most commonly you will use "Default Page". Click "Create Template":
Widget_Install_9.png

 

Click "Add Section" at the bottom of the left panel of the screen. Then, in the "Apps" list, choose the Widget to be added. In this example, we are using the  "Full Page" Widget:

Widget_Install_10.png
 
Once you've added the widget, you can click on the widget item in the App Block to customize it! Please see the example below:

Widget_Install_11.png

Click Save on the top right of the screen.

You will need to assign a page if you want the content to be modifiable through the Shopify Pages Editor. For that, go to Online Store - Pages - and click "Add Page":


Widget_Install_12.png

 

Add a Title to the Page and text content if needed:
Widget_Install_13.png

 

On the right panel of the screen, assign the page to the newly created template:Widget_Install_14.png


Click More Actions - View Page to see the page!Widget_Install_15.png

 


Vintage Theme Display Widget Installation Guide

a. Generating the Widget code

For Vintage Themes in Shopify, you need to generate the code snippet for the respective Display Widget by heading over to the Dashboard before doing the installation: https://go.stamped.io/v3/#/settings/widgets/display/

 

Go to Settings - Widget - Display Widget 

 

Click on the Display Widget you want to install and apply the customization as required. Any settings and changes will be reflected in the preview on the right. 

 

Once you are done, click on 'Get Code':

Widget_Install_16.png

 

Copy the generated code by clicking on 'Copy Code':Widget_Install_17.png

Note: This step is the same for all Display Widgets

b.Installing Display Widgets via Theme Editor

In this method we will install the 'Carousel' Display Widget on the Homepage of our demo store.

1. Login to your Shopify Admin panel

 

2. On the left, click on 'Online Store' and then click on 'Themes'

Widget_Install_18.png

 

3. Next to your Current Theme, click on the ' Customize' button.

Widget_Install_19.png

 

4. On the left again, scroll down to the bottom and click on 'Add Section'

Widget_Install_20.png

 

5. Under Add Section, click on 'Custom HTML'

Widget_Install_21.png

 

6. Paste the generated widget code from the Dashboard in the HTML content text box:

Widget_Install_22.png

 

7. You can now see the Custom HTML section showing up at the bottom, which you can drag and place between or after any sections. This is controls how the Carousel widget will appear on your homepage.

Widget_Install_23.png

 

8. Click ' Publish' in the top right corner to make the page live.

c. Installing Widgets on a Custom Page

In this method, we will create a dedicated 'Reviews' page and install the 'Full Page' Display Widget.

 

Login to your Shopify Admin panel

 

On the left, click on 'Online Store', go to 'Pages' and the click on 'Add Page' in the top right corner.Widget_Install_24.png

 

Add a Title for the page and then click on the HTML icon.
Widget_Install_25.png

 

In the HTML editor paste the generated widget code copied from the Dashboard for 'Full Page' display widget.

Widget_Install_26.png

 

Click 'Save' for the changes to take effect.


Advanced Customization

Advanced customizations are available for Shopify 2.0 themes.
*note: Stamped offers limited support for these types of customizations, and does not offer customization work. For further assistance please consult a developer.

Installing Widgets anywhere in the theme via Code Editor

In this method, we will install the 'Site Badge' widget on the footer of our demo store.

Login to your Shopify Admin panel.

On the left, click on  'Online Store' and then click on 'Themes'.

Widget_Install_27.png

 

Next to your Current Theme, click on the 'Actions' button and click 'Edit code' from the drop down list.Widget_Install_28.png

Search for the file footer.liquid

Widget_Install_29.png

 

In this example, we have placed the Site Badge code underneath the Contact Form in Footer. Now click 'Save' in the top right corner to apply the changes.

Widget_Install_30.png

 

Was this article helpful?

1 out of 5 found this helpful

Have more questions? Submit a request