Manually add Star Rating by copying code
By default, Kudosi automatically adds an app block or auto-applies code to your theme after installing the app. However, in some cases, you might need to manually add the code.
This guide will walk you through the steps to insert code to display the star rating. If you're not comfortable with coding, please contact our support team for assistance.
Where to edit code?
Manually add Rating Star on product page (Theme 1.0)
Manually add Rating Star on collection page (Theme 1.0)
Manually add Rating Star on collection page (theme 2.0)
Heads-up:
* This guide is not for who using custom theme and page builder.
* This guide applies to theme 1.0 for product and collection pages.
* This guide applies to theme 2.0 for the collection pages only as you can’t add Star Rating via app block in the collection pages.
* For those using 2.0 for the product page, to add the Rating Star, you can add it via app block. Read this for more information.
* Although Ali Reviews is transitioning to Kudosi, the code that includes the brand name "Ali Reviews" will still work.
Sales channels > Online store > Themes
Select theme > Click 3 dots > Edit code
Follow these steps to add a rating star to your product page:
Open the product file:
In the filter files box, type and search for product.
In the folder tree (on the left side), select product.liquid.
Locate the product template:
Find the code line that looks like this: {% section 'product-template' %}.
Click on the small arrow next to product-template to expand the section (as shown in the image).
Expand the template section:
Once the section is expanded, you will see more lines of code related to the product template.
Search for the product title:
Click inside the code file, then on your keyboard, press command + F (for Macbook users) or Ctrl + F (for Windows users) to open the search box.
Type product.title into the search box and press Enter. This will help you quickly find the line of code containing product.title.
Identify the attribute class:
Locate the element that includes product or title in its class attribute (the element is highlighted in the image as code line A).
Insert the code snippet after this line.
Copy and paste the new Code:
Copy the following code snippet (code line B):
Paste this code directly below the line of code you found in the previous step (code line A).
Save and check your changes:
After pasting the code, make sure everything looks correct.
Save your changes by clicking the "Save" button in the top right corner.
Preview your store to check if the rating star appears correctly on the product page.
Open and search the collection file:
Search for collection.liquid in the filter files box.
On the right side, click collection.liquid to open it.
Locate and expand the collection template:
In the code file, you will find the line: {% section 'collection-template' %}
Click the small arrow next to the collection-template to expand the section (as shown in the image).
Search for the product/title:
Click inside the code file, then on your keyboard, press command + F (for Macbook users) or Ctrl + F (for Windows users) to open the search box.
Type {% include into the search box and press Enter. This will help you quickly find the line of code containing product or title in its class attribute.
You may insert more than one place that contains a product or title in its class attribute, and do the same next steps below to add code in different places.
Copy the class attribute containing product or title then paste it on the filter files box.
For example: Copy product-card-list and paste it on the filter files box.
Insert the Rating Star code:
On the right page, click product-card-list.liquid.
Identify the element that includes product or title in its class attribute (refer to the highlighted code line A in the image).
Copy the following code snippet (code line B):
Copy and paste the following code snippet (Code line B) directly below the identified code line A:
Save and check your changes:
After adding the code, save your changes by clicking the "Save" button in the top right corner.
Preview your store to ensure that the rating star is displayed correctly on the collection page.
For those using theme 2.0 (Dawn theme), adding the Rating Star via app block on the collection page is unavailable. Hence, follow this guide to manually add the Rating Star on the collection page.
Sales channels > Online store > Themes > click 3 dots (Dawn theme) > Edit code
Open the product file:
In the filter files box, type and search for collection.
On the right side, select collection.json.
Find the relevant section:
Look for the section where the type includes either product or collection.
Copy the section type main-collection-product-grid and paste it into the filter files box.
Click main-collection-product-grid on the right navigation.
Search for the product:
Click inside the code file, then on your keyboard, press command + F (for Macbook users) or Ctrl + F (for Windows users) to open the search box.
Type {% render into the search box and press Enter. This will help you quickly find the line of code containing the product in its class attribute.
Copy the class attribute containing product (For example: Copy value card-product), then paste it on the filter files box.
Insert the Rating Star code:
Identify the element that includes product or title in its class attribute (refer to the highlighted code line A in the image).
Note: When inserting the code, if the search result is {{ product_card.title }}, ensure that the liquid variables product-id and product-handle are updated to {{ product_card.id }} and {{ product_card.handle }}, respectively.
Copy and paste the following code snippet (code line B) directly below the identified code line A:
Save and check your changes:
After adding the code, save your changes by clicking the "Save" button in the top right corner.
Preview your store to check if the rating star appears correctly on the product page.
That's it. If it doesn't work, please feel free to contact our support team via our live chat channel by clicking on the bottom right icon inside the app, or our email at support@kudosi.ai.
This guide will walk you through the steps to insert code to display the star rating. If you're not comfortable with coding, please contact our support team for assistance.
On this page
Where to edit code?
Manually add Rating Star on product page (Theme 1.0)
Manually add Rating Star on collection page (Theme 1.0)
Manually add Rating Star on collection page (theme 2.0)
Heads-up:
* This guide is not for who using custom theme and page builder.
* This guide applies to theme 1.0 for product and collection pages.
* This guide applies to theme 2.0 for the collection pages only as you can’t add Star Rating via app block in the collection pages.
* For those using 2.0 for the product page, to add the Rating Star, you can add it via app block. Read this for more information.
* Although Ali Reviews is transitioning to Kudosi, the code that includes the brand name "Ali Reviews" will still work.
Where to edit code?
Steps
Sales channels > Online store > Themes
Select theme > Click 3 dots > Edit code
Manually add Rating Star on product page (Theme 1.0)
Follow these steps to add a rating star to your product page:
Steps
Open the product file:
In the filter files box, type and search for product.
In the folder tree (on the left side), select product.liquid.
Locate the product template:
Find the code line that looks like this: {% section 'product-template' %}.
Click on the small arrow next to product-template to expand the section (as shown in the image).
Expand the template section:
Once the section is expanded, you will see more lines of code related to the product template.
Search for the product title:
Click inside the code file, then on your keyboard, press command + F (for Macbook users) or Ctrl + F (for Windows users) to open the search box.
Type product.title into the search box and press Enter. This will help you quickly find the line of code containing product.title.
Identify the attribute class:
Locate the element that includes product or title in its class attribute (the element is highlighted in the image as code line A).
Insert the code snippet after this line.
Copy and paste the new Code:
Copy the following code snippet (code line B):
<div product-id="{{ product.id }}" product-handle="{{ product.handle }}" class="alireviews-review-star-rating"></div>Paste this code directly below the line of code you found in the previous step (code line A).
Save and check your changes:
After pasting the code, make sure everything looks correct.
Save your changes by clicking the "Save" button in the top right corner.
Preview your store to check if the rating star appears correctly on the product page.
Manually add Rating Star on collection page (Theme 1.0)
Open and search the collection file:
Search for collection.liquid in the filter files box.
On the right side, click collection.liquid to open it.
Locate and expand the collection template:
In the code file, you will find the line: {% section 'collection-template' %}
Click the small arrow next to the collection-template to expand the section (as shown in the image).
Search for the product/title:
Click inside the code file, then on your keyboard, press command + F (for Macbook users) or Ctrl + F (for Windows users) to open the search box.
Type {% include into the search box and press Enter. This will help you quickly find the line of code containing product or title in its class attribute.
You may insert more than one place that contains a product or title in its class attribute, and do the same next steps below to add code in different places.
Copy the class attribute containing product or title then paste it on the filter files box.
For example: Copy product-card-list and paste it on the filter files box.
Insert the Rating Star code:
On the right page, click product-card-list.liquid.
Identify the element that includes product or title in its class attribute (refer to the highlighted code line A in the image).
Copy the following code snippet (code line B):
<div product-id="{{ product.id }}" product-handle="{{ product.handle }}" class="alireviews-review-star-rating"></div>Copy and paste the following code snippet (Code line B) directly below the identified code line A:
Save and check your changes:
After adding the code, save your changes by clicking the "Save" button in the top right corner.
Preview your store to ensure that the rating star is displayed correctly on the collection page.
Manually add Rating Star on collection page theme 2.0
For those using theme 2.0 (Dawn theme), adding the Rating Star via app block on the collection page is unavailable. Hence, follow this guide to manually add the Rating Star on the collection page.
Steps
Sales channels > Online store > Themes > click 3 dots (Dawn theme) > Edit code
Open the product file:
In the filter files box, type and search for collection.
On the right side, select collection.json.
Find the relevant section:
Look for the section where the type includes either product or collection.
Copy the section type main-collection-product-grid and paste it into the filter files box.
Click main-collection-product-grid on the right navigation.
Search for the product:
Click inside the code file, then on your keyboard, press command + F (for Macbook users) or Ctrl + F (for Windows users) to open the search box.
Type {% render into the search box and press Enter. This will help you quickly find the line of code containing the product in its class attribute.
Copy the class attribute containing product (For example: Copy value card-product), then paste it on the filter files box.
Insert the Rating Star code:
Identify the element that includes product or title in its class attribute (refer to the highlighted code line A in the image).
Note: When inserting the code, if the search result is {{ product_card.title }}, ensure that the liquid variables product-id and product-handle are updated to {{ product_card.id }} and {{ product_card.handle }}, respectively.
Copy and paste the following code snippet (code line B) directly below the identified code line A:
<div product-id="{{ card_product.id }}" product-handle="{{ card_product.handle }}" class="alireviews-review-star-rating"></div>Save and check your changes:
After adding the code, save your changes by clicking the "Save" button in the top right corner.
Preview your store to check if the rating star appears correctly on the product page.
That's it. If it doesn't work, please feel free to contact our support team via our live chat channel by clicking on the bottom right icon inside the app, or our email at support@kudosi.ai.
Updated on: 19/09/2024
Thank you!