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.
This guide is specifically for Shopify users and includes several examples.
In This Guide
- Shopify 2.0 Display Widget Installation Guide:
- Vintage Theme Display Widget Installation Guide:
- Advanced Customization
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
Installation of Stamped Widgets on Shopify 2.0 themes leverage Shopify’s Theme Editor.
a. Installing Display Widgets on an existing page
Go to Online Store - Themes - Customize within your Shopify Dashboard.
Look for the Product Template where the Widget should be installed. As an example, we’ll install this Widget on the homepage:
Click "Add Section" at the bottom of the left panel of the screen.
In the "Apps" list, choose your Widget. For reference, you can see our Display Widget Showcase article here.
Note: For the Side Drawer, NPS Form Modal, and Review Popup widgets, the installation must be completed through Theme Settings - App Embed.
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:
b. Installing Display Widgets on a Custom page
Go to the Online Store - Themes - Customize within your Shopify Dashboard.
Click "Pages > Create Template"
Give the page a name and which template its structure is based on. Most commonly you will use "Default Page". Click "Create Template":
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:
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":
Add a Title to the Page and text content if needed:
On the right panel of the screen, assign the page to the newly created template:
Click More Actions - View Page to see the page!
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':
Copy the generated code by clicking on 'Copy Code':
*^ This step is common 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'
3. Next to your Current Theme, click on the ' Customize' button.
4. On the left again, scroll down to the bottom and click on 'Add Section'
5. Under Add Section, click on 'Custom HTML'
6. Paste the generated widget code from the Dashboard in the HTML content text box:
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.
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.
Add a Title for the page and then click on the HTML icon.
In the HTML editor paste the generated widget code copied from the Dashboard for 'Full Page' display widget.
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'.
Next to your Current Theme, click on the 'Actions' button and click 'Edit code' from the drop down list.
Search for the file footer.liquid
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.