Main Reviews Widget: Customizations

  • Updated

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

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:

    Widget_customizations1.png

Customizing Colors

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

Widget_Customizations_1.png

Theme Color Change the theme colour of the Widget. Here are the components affected by this setting: 
Widget_Customizations_2.pngWidget_Customizations_3.png
Star Color  Change the color of the stars in the widget: 
Widget_Customizations_4.pngWidget_Customizations_5.png
Text Color Change the color of most texts in the widget: 
Widget_Customizations_6.pngWidget_Customizations_7.png
Verified Badge Color Change the color of the verified buyer badge:

Widget_Customizations_8.png

Avatar Image The uploaded image will be shown in the replies to reviews/Q&As:

Widget_Customizations_9.png

For optimal display, we recommend uploading a square image of 55px x 55px

 


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

Widget_Customizations_10.png


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:

Setting Explanation/Examples
Widget Style Change the display style of the widget. Refer to Display Types & Examples
Language Translate the widget to a language of your choice. If the language is not listed in the settings, kindly contact us at support@stamped.io
Reviews Per Page Change the number of reviews showing on each page. The default setting is 5 per page if left blank.
Limit Words Limit the number of words shown in each review.
Sort Type Change the way reviews are sorted in the widget. Default option is most recent.
Loading Type Change the method of loading new pages of review. Default option is pagination. 
Date Format Change the date format showing up on the Display Widgets.
Graph Toggle the visibility of the summary graph:

Widget_Customizations_11.png

Photo Summary Toggle the visibility of photo summary section (only shown when there's a photo attached to a review):

Widget_Customizations_12.png

Sort Options Toggle visibility of the sort options button:

Widget_Customizations_13.png

Recommended Percentage Toggle visibility of the recommended percentage section. Only visible when the option is enabled in settings: Feature: Do you recommend this product?

Reviews Tab Toggle visibility of review tab and it's contents:

Widget_Customizations_15.png

Customer's Avatar Toggle visibility of customer's avatar in reviews:

Widget_Customizations_16.png

Verified Buyer Toggle visibility of verified buyer badge in reviews:

Widget_Customizations_17.png

Date Toggle visibility of date on reviews

Widget_Customizations_18.png

Questions & Answers Date Toggle visibility of Q&A date (feature available in Business plan and above):

Widget_Customizations_19.png

Share Icons Toggle visibility of social sharing icons in reviews:

Widget_Customizations_20.png















Vote Icons

Toggle visibility of vote icons in reviews:

Widget_Customizations_21.png

Questions & Answers 

Toggle visibility of the Q&A tab, "ask a question" button and any Q&A content (feature available in the Business plan and above): 

Widget_Customizations_22.png

Product & variant Toggle the visibility of the product and variant information on each review, which is shown below the review content:

Widget_Customizations_23.png

 

Advanced Options

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

Custom Form Filter Toggle the visibility of custom form filter in the widget (only applicable for radio type custom forms):

Widget_Customizations_24.png

Free Text Search Toggle the visibility of free text search in the widget (feature available in the Business plan and above):

Widget_Customizations_25.png


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.

Widget_Customizations_26.png


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

Widget_Customizations_27.png

 

2-Column

Widget_Customizations_28.png

   Slick Slider

Widget_Customizations_29.png

 

Profile

Widget_Customizations_30.png

 

Masonry

Widget_Customizations_31.png

 

Minimalist

Widget_Customizations_32.png

 


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>
Attribute Value What it does  
data-take-reviews 1 (numeric, max 20) Limit the number of reviews to load per page  
data-take-questions 1 (numeric, max 20) Limit the number of questions to load per page  
data-animation false (boolean) Stops the scrolling to reviews widget on badge rating click  
data-offset 150 (numeric) Adjusts the position of the scrolling to the widget from click of the badge  
data-offset-mobile 150 (numeric) Adjusts the position of the scrolling to the widget from click of the badge on mobile screens  
data-widget-language ISO 2 Letter Language Codes Translate the widget into different languages  
data-widget-type standard, profile, minimal, two-columns, masonry, slider Use a different layout from the selected layout in settings  
data-sort most-recent, highest-rating, lowest-rating, most-votes, least-votes, with-photos, language (*requires business plan) Sort reviews using the selected value  
data-tags-exclude Review's tag (alphanumeric, separated by comma) Excludes reviews that are tagged with the selected tags  
data-tags-include Review's tag (alphanumeric, separated by comma) Includes only reviews that are tagged with the selected tags  
data-search Text to search (alphanumeric) Includes only reviews that contain the search string  
data-linkify true Enable hyperlinks on the review/Q&A content  
       

 

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.

Widget_Customizations_33.png

 

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

Widget_Customizations_34.png

 

*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

Was this article helpful?

2 out of 2 found this helpful

Have more questions? Submit a request