Implementing a Product Rating Widget on Your Website

Introduction

The Product Rating Widget allows you to display product ratings and reviews directly on your product pages—helping shoppers build trust and make informed purchase decisions.

This guide walks you through adding the widget to your Shopify product page and customizing its appearance to match your store’s branding.

Step 1 - Access Product Page Widgets

From the side menu:

1. Click On-site Display
2. Select Product Page Widgets

This is where you will add the product page rating widget.

Step 2 - Open Rating Widget Configuration

Locate the Product Page Rating Widget (it’s the third option in the list).

Click Configure to add it to Shopify.

Alternatively:

Go to Online Store → Themes to configure it manually.

Step 3 - Open Shopify Theme Customizer

In the Themes section, click Customize.

Then select the specific product page where the customization is needed.

Step 4 - Add the Rating Widget to the Product Page

1. Choose the Default Product view
2. Scroll to the product information section, below the product title
3. Hover until Add a Block appears
4. Click Add a Block → Apps
5. Select the Product Rating Widget

This will place the rating widget beneath your product title.

Step 5 - Save and Access Widget Settings

Click Save to apply changes.

To modify widget behavior or appearance, click the widget again to open its settings panel.

Step 6 - Choose the View Type

The first available setting is View Type:

• Compact View

• Full View

Choose the style that best fits your product page layout.

You can also enable Show Rating for All Products.

Step 7 - Show Ratings for All Products (Optional)

If enabled:

• Products without their own ratings will display the average rating of all products

Decide whether this approach aligns with your store strategy.

Step 8 - Customize Widget Colors

If you prefer not to show ratings for all products, you can adjust widget colors instead.

Colors are pulled automatically from your theme but can be overridden here.

Step 9 - Adjust Font Size & Alignment

You may adjust:

• Font size

• Rating alignment (note: this alignment option does not apply to this section of the product page)

Step 10 - Adjust Weight of the Rating Text

Change the rating text’s font weight to make it:

• Bolder

• Lighter

• Or leave it at default

Alignment will not apply here, but font weight will.

Step 11 - Adjust Padding (Spacing)

Use the padding controls to adjust horizontal and vertical spacing around the widget.

This helps match the widget spacing to your brand’s layout style.

Step 12 - Add Custom CSS Classes (Optional)

For advanced customization, additional CSS classes can be added here.

Once all edits are made, click Save.

Step 13 - Preview Your Storefront

Visit your live website to confirm that:

• The rating widget appears on the product page

• Styling matches your brand

• The widget loads correctly above product details

Your widget integration is now complete.

Wrap-Up

You’ve successfully learned how to:

✅ Add the Product Rating Widget to your product pages

✅ Customize the widget display type, colors, spacing, and weight

✅ Enable fallback ratings for unrated products

✅ Apply advanced customizations through CSS

Your product pages now display trusted ratings—helping customers feel confident and encouraging higher conversions. 💚

Updated on: 16/12/2025