Main Reviews Widget: Customizations

This guide reviews how to customize the Main Reviews Widget’s colours, display types, and more. The directions below apply to all e-commerce platforms.

In This Guide

• Enhancing Widget Speed
• Customizing Colors
• Navigating To The Main Widget Settings Page
• List of Widget Settings Available
• Display Types & Examples
• Advanced Customization
  • Shopify Vintage theme and all other e-commerce platforms
  • Shopify 2.0

Enhancing Widget Speed

Here are a few tips to ensure your Stamped main widget loads as quickly as possible! 

1. Ensure the main Stamped script is installed to your theme files - visit our guide linked here for step-by-step instructions. Make sure that you're using your account's unique API key!
2. Enable lazy loading ("load more") for your main widget reviews. This can be done in your main widget Settings here:
   
   

Customizing Colors

In the Dashboard, go to Settings - Branding - Widgets to change the colors of components in the Main Review Widget.

Theme Color	Change the theme colour of the Widget. Here are the components affected by this setting:
Star Color	Change the color of the stars in the widget:
Text Color	Change the color of most texts in the widget:
Verified Badge Color	Change the color of the verified buyer badge:
Avatar Image	The uploaded image will be shown in the replies to reviews/Q&As: For optimal display, we recommend uploading a square image of 55px x 55px

Navigating To The Main Widget Settings Page

Go to Settings - Main Widget and you will see the following page:

List Of Widget Settings Available

Here is a table with all the possible settings and illustrations on the section of the widget that is affected for each setting:

Advanced Options

There are two additional advanced options accessible by navigating from Settings - Widgets - Main Widget to "Options":

CSS Editor

Any additional CSS code can be added under this section of the settings, This will ensure that any tweaks in the widget will be carried over with a change of themes/files in your platform.

Display Types and Examples

Note: The masonry and slider styles will not work if the Main Review widget is placed in a tab. We recommend selecting another style instead.

Standard

2-Column

   Slick Slider

Profile

Masonry

Minimalist

Advanced Customization

Below are a list of further customizations possible at the code-level.

a. Shopify Vintage theme, BigCommerce, WooCommerce and other platforms

The following customizations are available for all platforms. However, please note that the value of the attributes may vary depending on the ecommerce platform you're using.

<div id="stamped-main-widget" 
data-widget-type="standard" 
data-product-id="{{ product.id }}" 
data-name="{{ product.title | escape }}" 
data-url="{{ shop.url }}{{ product.url }}"
data-image-url="{{ product.featured_image | product_img_url: "large" |replace: '?', '%3F' | replace: '&','%26'}}"
data-description="{{ product.description | escape }}"
data-product-sku="{{product.handle}}"
data-widget-language="{{ language }}"></div>
Copy Code

b. Shopify 2.0 Customizations

Shopify 2.0 advanced customizations are completed in the Shopify Theme Editor. To edit the Main Widget, click the item within the app block, opening the left navigation panel.

This is what the additional customization options look like in the Shopify Theme Editor:

*Note: 

The following attributes are not available in the Shopify Theme Editor:

1. data-widget-language > needs to be added within the widget code
2. data-sort > can be added within the widget code or modified in the Stamped dashboard:  Settings - Main Widget