Skip to main content

Installing Display Widget

Blake
  • Updated

Display Widgets showcase your reviews on your site and have multiple designs. Display Widgets can be carousels, full review pages, and more. Learn about the various types of Display Widgets here.

This guide teaches Shopify Users to install Display Widgets and highlights a few examples

 

*This guide is only applicable for Shopify users*

In This Guide

Introduction to Display Widget Installation

The most important part of installing a Display Widget is choosing the right location to place the Widget. The placement of the Widget is completely based on the look and feel of the website you are trying to achieve and one that suits your branding. 

This guide reviews each of the installation method with some of our most popular Display Widgets, however, the same methods can be followed for any other Widget. 

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

Shopify 2.0 

Installation of Stamped Widgets on Shopify 2.0 themes uses Shopify’s Theme Editor and requires minimal coding.

a. Installing Display Widgets on an existing page

  1. Go to Online Store - Themes - Customize within your Shopify Dashboard.
  2. Look for the Product Template where the Widget should be installed. As an example, we’ll install this Widget on the homepage:
  3. Click "Add Section" at the bottom of the left panel of the screen.
  4. In the "Apps" list, choose your Widget. For reference, you can see our Widget Showcase article here.
    Note: For the Side Drawer, NPS Form Modal, and Review Popup, the installation must be completed through Theme Settings - App Embed, then enable the chosen widget.
  5. 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

  1. Go to the Online Store - Themes - Customize within your Shopify Dashboard.
  2. Click "Pages > Create Template"
  3. Give the page a name and which template its structure is based on. Most commonly you will use "Default Page".
    Click "Create Template"

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

    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:

  5. Click Save on the top right of the screen.
  6. You would need to assign a page if you want the content to be modifiable through the Pages Shopify Editor. For that, go to Online Store - Pages - and click "Add Page"
  7. Add a Title to the Page and text content if needed.
  8. On the right panel of the screen, assign the page to the newly created template:
  9. Click More Actions - View Page to see the page!

Vintage Theme

a. Generating the Widget code

For the Vintage Theme 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/

  1. Go to Settings - Widget - Display Widget 
  2. 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. 
  3. Once you are done, click on 'Get Codes'
  4. Copy the generated code by clicking on 'Copy Codes'

*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 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 Custom Page

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

  1.  Login to your Shopify Admin panel
  2.  On the left, click on 'Online Store', go to 'Pages' and the click on 'Add Page' on the top right corner.
  3.  Add a Title for the page and then click on the HTML icon.
  4. In the HTML editor paste the generated widget code copied from the Dashboard for 'Full Page' display widget.
  5. Click on ' Save' for the changes to take effect.

Advanced Customization

Advanced customizations can be achieved 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.

  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 'Actions' button and click 'Edit code' from the drop down list.
  4. Search for the file footer.liquid
  5. 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.

.

Related articles