Certain themes do not allow you to add sections to your site, meaning you have to add everything directly into the code. The following article will explain how you can add these to your site.
Requirements
✅ Active REVIEWS.io account
✅ Active Shopify account
Instructions ⚙️
The exact steps and files that you have to use may vary from theme to theme, so you may need to alter which files you're adding the code into, but this guide should give you a general overview.
Step One - Getting the widget code
Within the REVIEWS.IO dashboard, navigate to Publishing >> Widget Library and find which widget you'd like to install. In this example we will be installing the product review widget.
Make any changes you'd like, and press save/get installation code, and copy this.
Step Two - Adding Widget Code
Within Shopify click the three dots in the theme customiser and press "Edit Code"
Within here, you will need to create a new snippet, call this something that is easy to identify, and clearly label what this is. Doing this will make it easier to find if you need to make any edits in the future or add them to your site.
Within the newly created snippet, paste in the code you created earlier
⚠️ Using Product IDs?
If your store uses product IDs instead of SKUs or handles, you’ll need to ensure the correct data is passed into the widget.
Use the following structure when rendering the rating snippet:
<div class="ruk_rating_snippet" data-sku="{{ product.id }};{{ product.handle }};{{ product.variants | map: 'sku' | join: ';' }};{{ product.variants | map: 'id' | join: ';' }}"></div> ### Adding the Rating Snippet Code Under Product Titles To display reviews under product titles, add the following code to the collections file beneath the product title: ``` <div class="ruk_rating_snippet" data-sku="{{ product.handle }};{{ product.variants | map: 'sku' | join: ';' }};{{ product.variants | map: 'id' | join: ';' }}"></div> ```
This ensures the widget can match reviews correctly by including:
Product ID
Product handle
Variant SKUs
Variant IDs
Adding the Rating Snippet Code to Product Cards
If the Core and Rating Snippet app embeds are enabled, paste the Rating Snippet <div> code into the template that renders product cards on collection pages (e.g., product-card.liquid or product-grid.liquid). Note: A separate footer script or style block is not necessary in this case.
💡 Make sure your REVIEWS.io account is configured to use the same identifier type (e.g. product ID). If these don’t match, reviews may not display.
Step Three - Rendering onto the page
Within Shopify, you will need to find the file which includes the code for the relevant page. This will vary depending on your theme, and where you want the widget to display.
In this case, it is "main-product.liquid". Find whereabouts you want the widget to display on the page and render in the snippet that was created in the previous step with the following code:
{% render 'SNIPPET-NAME' %}
Press save and the widget will start appearing on the page.
Troubleshooting Common Issues
Ensure that the code snippets are placed in the correct sections as specified above.
Verify that the Core and Rating Snippet app embeds are enabled if applicable.
If manual installation is required, follow the provided instructions carefully or contact support for case-by-case assistance. 💡 If you cannot locate the 'Rating Snippet' section or need further assistance, you can invite REVIEWS.io support to access your theme editor by sending an invite to support@reviews.io.