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 (such as adding rating stars on homepage or collection pages), 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.

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)

Where to edit code?

Steps

1. Sales channels > Online store > Themes
2. 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

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

2. 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).

3. Expand the template section:

• Once the section is expanded, you will see more lines of code related to the product template.

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

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

6. 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).

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

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

2. 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).

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

4. 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:

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

1. Sales channels > Online store > Themes > click 3 dots (Dawn theme) > Edit code

2. Open the product file:

• In the filter files box, type and search for collection.
• On the right side, select collection.json.

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

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

5. 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).

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

6. 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: 26/06/2025