Categories

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

Once you install the FarOut Product Reviews & Referrals app, we try to automatically inject the Star Rating code snippet into your product pages, collection page, and homepage featured collection. For doing so, we scan your store’s liquid files, and if the target liquid file is found in your theme, FarOut inserts the code snippet into the file. Afterward, when a product receives at least one approved review, the star rating is displayed under the product title on each of these pages, as shown below. 

Star Ratings on Shopify store pages

However, there are some situations where you may need to manually add, remove, or change the position of star rating on your store pages, including:

  • FarOut may not be able to find the right liquid files because the name of the liquid files is different in some themes.
  • You may want to remove the star rating for all or a specific page.
  • You may want to change the position of star ratings on a specific page. By default, FarOut inserts the star rating under the product title.

In this article, we will show you how to manually handle the star ratings on three categories of pages: (1) Product page, (2) Collection page, and (3) Homepage featured collection.

Product page

 
  1. Go to your Shopify Themes menu (from Admin -> Online Store -> Themes)
  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 farout-tag="farout-product-rate" data-product-rate="{{product.metafields.farout.avg_rating}}" data-number-of-reviews="{{ product.metafields.farout.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 FarOut star rating on the product page by inserting the snippet code in the product-template.liquid file under the product title.
FarOut star rating code injected in the Collection liquid file
FarOut star rating code injected in the Collection liquid file

Collection page & Homepage featured collection

  1. Go to your Shopify Themes menu (from Admin -> Online Store -> Themes)
  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 farout-tag="farout-product-rate" data-product-id="{{ product.id }}"  data-product-rate="{{product.metafields.farout.avg_rating}}" data-number-of-reviews="{{ product.metafields.farout.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.

Collection page & Homepage featured collection

  1. Go to your Shopify Themes menu (from Admin -> Online Store -> Themes)
  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:

 

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

The photo below shows an example of how to add the FarOut 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.

FarOut star rating code injected in the product liquid file
If you couldn’t do the above steps for changing your liquid files, please feel free to contact us or directly email me at sina@far-out.io. We’d love to help you 🙂
Shopping Basket