How to display/hide star ratings on your store pages?

Depending on your type of theme, you can add the Scuti Star Rating widget on product and collection pages. Once you install the app, Scuti attempts to automatically add the widget in your store. Note that the Star Rating widget appears for a product only if the product has received at least one approved review. If you’re fine with the widget appearance, then you’re good and don’t need to follow instructions in this article. 

If the product page of your theme supports Shopify’s Online Store 2.0, Scuti automatically add the widget as an app block into your product page; but, you can also edit/remove it directly from your store’s Theme Editor (so no code change is needed). Note that even if your theme is Online Store 2.0, it may not be supported in product pages and it is available only for the Home page. 

If your product page is not supported by Shopify’s Online Store 2.0, then Scuti attempts to automatically inject the Star Rating code snippet into the liquid files of your theme’s product/collection pages. For doing so, we scan your store’s liquid files, and if the target liquid file is found in your theme, Scuti inserts the code snippet into the file. If you the Star Rating widget doesn’t appear for a product with at least one review, then Scuti most probably couldn’t find the correct liquid file and you should manually add the snippet code into your theme, as described below. 

In this article, we will show you how to add/edit Star Rating widget to Product page, Collection page, and Homepage featured collection for both Online Store 2.0 and Vintage themes.

Online Store 2.0 themes

Follow the steps below for adding Scuti Star Rating to your product page only if the product page is supported by OS 2.0 theme:

  1. Go to your Shopify Themes menu.
  2. From the “Current theme” section, click on Customize.
Shopify Theme Editor
  1. From the middle top search bar, go to PRODUCTS/Default product page (or whatever is your product page):
Product page from theme editor
Product page from theme editor
  1. From the left menu and at the bottom, click on “Add Section”. Then, scroll down to the “APPS” section at the bottom of the list, and select “Scuti Star Rating”.
  2. Drag and drop the widget to the position that you’d like (e.g., under the product title).
  3. You can also change the star’s color by clicking on the Star Rating widget.
Scuti Star Rating app block
Scuti Star Rating app block

Vintage themes

If your product page doesn’t support OS 2.0 (i.e., it is a Vintage theme) or you want to do more customization on the Star Rating widget, you should follow the steps below for each page.

Product page

  1. Go to your Shopify Themes menu.
  2. On your current theme, click on the “Actions” button and then select “Edit code”.
  3. Open the template or section you use for product pages (usually it’s called product-template.liquid or product.liquid. But, some themes work differently).
  4. Copy the code below:
<section scuti-tag="scuti-product-rate" data-product-rate="{{product.metafields.scuti.avg_rating}}" data-number-of-reviews="{{ product.metafields.scuti.num_reviews }}" style="display:none"></section>

Then, you can do either of these depending on your goal:

  1. If you want to add the star rating: Find the right location of the page where you want to showcase star ratings. Then, paste the code on that location, and save the file.
  2. If you want to change the position of the star rating: Search the code in the liquid file. Once found, then cut & paste the code in the right location, and save the file.
  3. If you want to hide the star rating: Search the code in the liquid file. Once found, then remove the code, and save the file.

The photo below shows an example of how to add the Scuti Star Rating on the product page by inserting the snippet code in the product-template.liquid file under the product title.

Scuti Star Rating code for product page
Scuti Star Rating code for product page

Collection page & Homepage featured collection

  1. Go to your Shopify Themes menu.
  2. On your current theme, click on the “Actions” button and then select “Edit code”.
  3. Open the template or section you use for product pages (usually it’s called either of product-grid-item.liquid / product-loop.liquid / product-info.liquid / product-card-grid.liquid under the snippets folder But, some themes work differently).
  4. Copy the code below:
<section scuti-tag="scuti-product-rate" data-product-id="{{ product.id }}"  data-product-rate="{{product.metafields.scuti.avg_rating}}" data-number-of-reviews="{{ product.metafields.scuti.num_reviews }}" style="display:none"></section>

Then, you can do either of these depending on your goal:

  1. If you want to add the star rating: Find the right location of the page where you want to showcase star ratings. Then, paste the code on that location, and save the file.
  2. If you want to change the position of the star rating: Search the code in the liquid file. Once found, then cut & paste the code in the right location, and save the file.
  3. If you want to hide the star rating: Search the code in the liquid file. Once found, then remove the code, and save the file.

The photo below shows an example of how to add the Scuti star rating for the collection page and the homepage featured collection by inserting the snippet code in the product-card-grid.liquid file under the product title.

Scuti Star Rating code on collection page
Scuti Star Rating code on collection page

If you need any further help with handling star rating widgets, you can contact us or directly email me at [email protected] We’d love to help you!