Overview
The Star Rating element is a social proof element designed to showcase your product rating directly in a Buy Box section. It can be found in Buy Box sections such as the following:
Dynamic Product Section (on "Full Customization" Product pages)
Buy Box
Buy Box with Cross-Sell
Multi Product Dynamic Buy Box
Product Listing 1
Product Listing 3
Collections Section (only static star rating supported)
It can also be added to any existing "Product" section by clicking on an element there, then on the blue ➕ sign (1) above/below the element. Then select the "Star Rating" element (2) under the "Product" category:
Main Settings
The Main settings of the Star Rating element are located in the sidebar of the builder:
There you can select your Reviews App from the "Integration Review Apps" dropdown menu to dynamically display the product's star rating:
The following product review apps are supported (you must have the corresponding app installed and enabled on your store):
None (rating will be set manually using the "Choose Rating" slider)
Stamped.io
Loox
Judge.me
Product Reviews by Shopify
Opinew
Yotpo
📝If the selected Review App has not collected any reviews yet for the chosen product, the Star Rating element will be hidden on the published page.
After you've selected your reviews app, you can optionally toggle on the "Display Number of Reviews" setting to dynamically display the number of product reviews next to the star rating:
📝A placeholder value of (100) will show in the builder, the actual review count from your review app will be displayed dynamically on the published page.
Under "Click Action", choose what you want to happen when the star rating element is clicked or tapped on:
Generally it's recommended to choose the "Page section" action and select your Product Reviews section which has been added on the same page. That way, the page visitor will be taken to your product reviews section on the same page if they click or tap on the star rating element included in the Buy Box.
Additional Settings
The following Tabs are also available in the sidebar of the builder, allowing for further customization of the star rating's styles:
📝Choose the device type you'd like to edit the star rating styles on from the "Edit on" section, prior to making changes. All settings are available in Desktop edit mode, while only style edits for Spacing, Size and Visibility are available in Tablet/Mobile modes.
1. In the "Background" tab you can set the:
Filled star color
Empty star color
2. In the "Spacing" tab you can edit the star rating's:
Padding - Top/Bottom and Left/Right in px. Padding is the space between the content of the element and its border
Margin - Top/Bottom and Left/Right in px. Margin is the space outside the border of the element
3. In the "Size" tab you can:
Set the star rating's size from options of S/M/L
4. In the "Visibility" tab you can choose which device(s) to show the star rating on:
Show on Desktop
Show on Tablet
Show on Mobile
