The Star Rating Element [Zipify Pages]

Show your product rating in Buy Boxes using the Star Rating element!

Jeff Maxfield avatar
Written by Jeff Maxfield
Updated over a week ago


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)

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)


  • Loox


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

In the "Destination" section, 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" destination 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

Did this answer your question?