Implementing a Product Rating Widget on Your Website

In this document, you will learn how to add a product page rating widget to your online store. This feature allows you to display product reviews and ratings directly on the product page, helping potential customers make informed purchasing decisions. Follow these steps to seamlessly integrate the widget into your store's theme.

Step 1

To begin, navigate to the side menu and select "On-site Display." From there, click on "Product Page Widgets." This is where you will add the product page rating widget to display product reviews and ratings on the product page.

Step 2

Locate the "Product Page Rating Widget," which is the third option in the list. Click on "Configure" to add it to your Shopify store. Alternatively, you can go to the "Online Store" section and click on "Themes."

Step 3

Within the "Themes" section, click on "Customize." Once you have clicked on "Customize," select the specific page where you want to apply the customization.

Step 4

Choose the product page you wish to customize and select the default product view. Below the product title, add the widget by going to the product information section. Hover your cursor below the title to reveal the "Add a Block" option. Click on it, go to "Apps," and select the widget.

Step 5

After adding the rating widget, click "Save" to ensure it reflects on the product page. If you wish to modify the widget settings further, click on the widget to access additional options.

Step 6

The first setting is "View Type," which allows you to choose between a compact or full view. Choose your preferred display style. Additionally, you can choose to "Show Rating for All Products."

Step 7

By enabling this option, the overall rating for all products will be displayed. If a particular product lacks ratings, it will show the average rating of other products. Decide if this feature suits your store's needs.

Step 8

If you opt out of the previous feature, you can customize the color of the widget. The color is automatically picked from the website theme, but you can change it if necessary.

Step 9

You can adjust the font size, and the "Rating Alignment" feature is available, though it does not apply in this section of the page.

Step 10

The "Rating Alignment" feature works only in specific sections, not here. You can adjust the weight to make the rating bolder or stick to the default setting.

Step 11

Padding controls the horizontal and vertical spacing of the widget. By increasing the padding, you can alter the spacing according to your brand's identity and theme.

Step 12

For further customization, you can add additional CSS classes to the widget. Once you have made all necessary adjustments, click on "Save" to apply the changes to your website.

Step 13

Finally, visit your website to view the integrated review and rating widget. The setup is complete, and the widget should now be visible on your product pages.