How to Insert the Star Rating Code Block Manually
Plans: All plans Platforms: Shopify
Star ratings give your products a stamp of approval, indicating that people are buying what you are selling and weighing the pros and cons of the products purchased. They help your business earn the trust of potential buyers, improve local search rankings, and boost conversions.
AfterShip Reviews makes it easier to import reviews and display star ratings below your product titles with a one-click enable star rating widget. Install the app, connect your Shopify store, and toggle on the Star rating widget in the AfterShip Reviews admin.
In this tutorial, we will show you:
Prerequisites
Insert star rating widget using theme builder editor
Insert star rating widget using theme editor
Insert the star rating code block manually
a. Product page
b. Collection page
The star rating widget of AfterShip Reviews works with almost every general Shopify theme. It is auto-inserted onto your store once it is activated in the admin.
There are scenarios when you don’t see the star rating widget on your store despite activation and a significant number of customer reviews, which calls for manual insertion of our star rating widget.
Star rating widget can be embedded in your store’s collection and product pages. You can do that in three ways if it isn’t inserted automatically after activating.
Shopify theme builder provided app editor
Shopify theme app extension using the Shopify theme editor
Insert code blocks into the Shopify theme codes
A. Product pages
If you are using Debutify or any other theme builder that is already integrated with us, you can insert the star rating widget using the theme editor
a. Go to Shopify themes under Online store in the admin and click Customize to edit the Debutify theme
b. Select Products > Default product from the main menu
c. Go to Sections on the side menu and click on Product Pages to expand the template dropdown options
d. Scroll down to Theme Settings and click the down arrow to expand the options.
e. Under Select your review app, find Automizely
B. Collection page
If you are using Debutify, or any other theme builder that is already integrated with us, you can insert the star rating widget using their theme editor directly
A. Product pages
If you use Shopify Online Store 2.0, insert the star rating widget using the AfterShip Star Rating Widget app extension
If you can’t insert our star rating widget using the theme app extension using the above methods, follow this helpful article to manually finish the star rating widget setup as a backup method.
B. Collection page
If AfterShip Reviews does not support your theme editor, you need to insert the code manually if you want to show a star rating on your collection page because Shopify does not allow inserting theme app extensions into the collection page using the Shopify theme editor.
Before editing the theme code to insert the star rating widget, you should learn whether you use a sectioned or non-sectioned theme.
A sectioned theme is a newer theme that lets you drag and drop to arrange the layout of your store's pages.
To determine whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme.
The non-sectioned themes were released before October 2016 and do not have files in the Sections directory.
Most of the Shopify users have now transitioned to sectioned themes. Therefore, the section below details star rating code insertion for Shopify sectioned themes. In case you are using still using non-sectioned themes, contact our customer support for further instructions.
Make sure you have installed AfterShip Reviews app for your store before editing the theme code to insert the star rating widget.
Go to your Shopify Themes menu in the Shopify admin
Click Actions > Edit code
In the Sections directory, search and open file `main-product.liquid`
Different Shopify themes have different names for their primary product detail page
Find the area where you want to position the star rating widget in the code. Usually, this is below the product title. To find your product title in the file, search for the Liquid tag
After the first </div>, add a new line and paste the following code snippet:
Click Save
Go to your Shopify Themes menu in the Shopify admin
Click Actions > Edit code
In the Snippets directory, search and open file `card-product.liquid`
Different Shopify themes have different names for their primary collection page
Find the area where you want to position the star rating widget in the code. Usually, this is below the product description. To find your product description in the file, search for the Liquid tag
On a new line below the code that contains the <span class="caption-large light">{{ block.settings.description | escape }}</span> Liquid tag, paste the following snippet:
V2 star rating code snippet for the collection page
The keyword 'product' can be replaced by other terms depending on the object name
For e.g., In this product card code, the object name is 'card_product' (refer to the card_product.title)
Click Save
Overview
Star ratings give your products a stamp of approval, indicating that people are buying what you are selling and weighing the pros and cons of the products purchased. They help your business earn the trust of potential buyers, improve local search rankings, and boost conversions.
AfterShip Reviews makes it easier to import reviews and display star ratings below your product titles with a one-click enable star rating widget. Install the app, connect your Shopify store, and toggle on the Star rating widget in the AfterShip Reviews admin.
📢 What you’ll learn
In this tutorial, we will show you:
Prerequisites
Insert star rating widget using theme builder editor
Insert star rating widget using theme editor
Insert the star rating code block manually
a. Product page
b. Collection page
Prerequisites
The star rating widget of AfterShip Reviews works with almost every general Shopify theme. It is auto-inserted onto your store once it is activated in the admin.
There are scenarios when you don’t see the star rating widget on your store despite activation and a significant number of customer reviews, which calls for manual insertion of our star rating widget.
Star rating widget can be embedded in your store’s collection and product pages. You can do that in three ways if it isn’t inserted automatically after activating.
Shopify theme builder provided app editor
Shopify theme app extension using the Shopify theme editor
Insert code blocks into the Shopify theme codes
Insert star rating widget using theme builder editor
A. Product pages
If you are using Debutify or any other theme builder that is already integrated with us, you can insert the star rating widget using the theme editor
a. Go to Shopify themes under Online store in the admin and click Customize to edit the Debutify theme
b. Select Products > Default product from the main menu
c. Go to Sections on the side menu and click on Product Pages to expand the template dropdown options
d. Scroll down to Theme Settings and click the down arrow to expand the options.
e. Under Select your review app, find Automizely
B. Collection page
If you are using Debutify, or any other theme builder that is already integrated with us, you can insert the star rating widget using their theme editor directly
Insert star rating widget using Shopify theme editor
A. Product pages
If you use Shopify Online Store 2.0, insert the star rating widget using the AfterShip Star Rating Widget app extension
If you can’t insert our star rating widget using the theme app extension using the above methods, follow this helpful article to manually finish the star rating widget setup as a backup method.
B. Collection page
If AfterShip Reviews does not support your theme editor, you need to insert the code manually if you want to show a star rating on your collection page because Shopify does not allow inserting theme app extensions into the collection page using the Shopify theme editor.
Insert the star rating code block manually
A. Determine your theme architectural version
Before editing the theme code to insert the star rating widget, you should learn whether you use a sectioned or non-sectioned theme.
A sectioned theme is a newer theme that lets you drag and drop to arrange the layout of your store's pages.
To determine whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme.
The non-sectioned themes were released before October 2016 and do not have files in the Sections directory.
Most of the Shopify users have now transitioned to sectioned themes. Therefore, the section below details star rating code insertion for Shopify sectioned themes. In case you are using still using non-sectioned themes, contact our customer support for further instructions.
Make sure you have installed AfterShip Reviews app for your store before editing the theme code to insert the star rating widget.
B. Add AfterShip Reviews star rating widget to your product page
Go to your Shopify Themes menu in the Shopify admin
Click Actions > Edit code
In the Sections directory, search and open file `main-product.liquid`
Different Shopify themes have different names for their primary product detail page
Find the area where you want to position the star rating widget in the code. Usually, this is below the product title. To find your product title in the file, search for the Liquid tag
<div class="product__title" {{ block.shopify_attributes }}>After the first </div>, add a new line and paste the following code snippet:
<!--BEGIN_AS_REVIEWS:production:PRODUCT_TITLE_STAR_WIDGET-->
{% render 'asrv-star-widget' , product: product %}
<!--END_AS_REVIEWS:production:PRODUCT_TITLE_STAR_WIDGET-->Click Save
C. Add AfterShip Reviews star rating widget to your collection page
Go to your Shopify Themes menu in the Shopify admin
Click Actions > Edit code
In the Snippets directory, search and open file `card-product.liquid`
Different Shopify themes have different names for their primary collection page
Find the area where you want to position the star rating widget in the code. Usually, this is below the product description. To find your product description in the file, search for the Liquid tag
<span class="caption-large light">{{ block.settings.description | escape }}</span>On a new line below the code that contains the <span class="caption-large light">{{ block.settings.description | escape }}</span> Liquid tag, paste the following snippet:
V2 star rating code snippet for the collection page
<!--BEGIN_AS_REVIEWS:production:PRODUCT_COLLECTION_STAR_WIDGET-->
{% render 'asrv-star-widget' , product: product, size: 14 , anchor: false %}
<!--END_AS_REVIEWS:production:PRODUCT_COLLECTION_STAR_WIDGET-->The keyword 'product' can be replaced by other terms depending on the object name
For e.g., In this product card code, the object name is 'card_product' (refer to the card_product.title)
Click Save
Updated on: 07/08/2023
Thank you!