Before you Begin
- Ensure that ecommerce products have been imported to OnVoard. If not, see how you can import products data. Star rating won't be shown if products are not imported.
- Ensure that Sync Product Flow is created so that newly created/updated products is automatically synced with OnVoard.
Follow instructions below to install star rating on Shopify store.
To start, go to star ratings page. Copy star rating ID and paste it somewhere.
1) Loader Code
Go to Shopify settings page and check if install scripts is turned on. Proceed to next step if auto installation is turned on. If auto installation is turned off, you would need to manually install loader code to your site.
Copy loader code and paste it before </body> tag of layout/theme.liquid file. You only need to include loader code once. You can skip this step if you have already added loader code to your site.
<script>
(function() {
window.OnVoard = window.OnVoard || function() {
(window.OnVoard.q = window.OnVoard.q || []).push(arguments);
};
var script = document.createElement("script");
var parent = document.getElementsByTagName("script")[0].parentNode;
script.async = 1;
script.src = "https://widgets.onvoard.io/apps/loader.js";
parent.appendChild(script);
})();
</script>
2) Star Rating Snippet
Replace
STAR_RATING_ID for snippet below with actual star rating ID that you have copied earlier. Paste modified snippet on where you want star rating to appear. Common files to look at: templates/product.liquid, sections/product-template.liquid.<div
class="ov-app ov-app-star-rating"
data-app-id="STAR_RATING_ID"
data-app="star-rating"
data-product-external-id="{{ product.id }}">
</div>
Search for the following code:
itemprop="name"{{ product.title }}
Then place star rating snippet below it. This should position star rating just below product title element.