TABLE OF CONTENTS
Introduction
Feefo's Product Stars widget offers a convenient way to showcase your product's star rating on various pages of your website, such as category, catalogue, search results, and collection pages. The widget can be seamlessly integrated into grid or product templates, providing valuable feedback to potential customers. In this article, we will explore how to implement the Product Stars widget for both Product SKU and Parent Product SKU, specifically for Shopify users.
The widget can be placed within a grid template or product template and will not go on the typical product theme.
This widget only works for PRODUCT reviews.
Product SKU Integration
To integrate the Product Stars widget for a specific Product SKU, use the following code snippets:
SKU Code:
<script type="text/javascript" src="https://api.feefo.com/api/javascript/MERCHANTID" async></script>
<div class="feefo-product-stars-widget" data-product-sku="SKU"></div>
Parent SKU Code:
The code snippets for the Product Stars integration for Parent Product SKU is the below:
<script type="text/javascript" src="https://api.feefo.com/api/javascript/MERCHANTID" async></script> <div class="feefo-product-stars-widget" data-parent-product-sku="PARENTSKU"></div>
If both Product SKU and Parent Product SKU are used, the integration will default to the Product SKU. In case no results are found, it will default to the Parent Product SKU. The fields "SKU" and "PARENTSKU" should be dynamic and replaced with the relevant dynamic Product ID variable for a store CMS.
SHOPIFY Sample
For Shopify users, the code snippet typically needs to be saved under a theme called "product-card-grid.liquid." The code utilises the variants below:
SKU Code:
The code snippets for the Product Stars integration for Product SKU is the below:
<script type="text/javascript" src="https://api.feefo.com/api/javascript/MERCHANTID" async></script>
<div class="feefo-product-stars-widget" data-product-sku="{{product.variants.first.sku}}"></div>Parent SKU Code:
The code snippets for the Product Stars integration for Parent Product SKU is the below:
<script type="text/javascript" src="https://api.feefo.com/api/javascript/MERCHANTID" async></script>
<div class="feefo-product-stars-widget" data-parent-product-sku="{{product.id}}"></div>Conclusion
Feefo's Product Stars widget is an excellent tool for showcasing your product's star rating on various pages of your website. By integrating the widget into grid or product templates, you can provide valuable feedback to potential customers, helping them make informed purchasing decisions. For Shopify users, implementing the widget involves using dynamic Product ID variables in the provided code snippets. By following the steps outlined in this article, you can effectively display product ratings and enhance the shopping experience for your website visitors.