Product rating

Overview

A comprehensive product rating display block that renders the rating information for a product. The block supports various styling options, alignment controls, and responsive visibility settings to seamlessly integrate with different product layouts and themes.

Common use cases

• Configure the product resource setting to specify which product's rating to display

• Display product ratings on product pages and product cards

• Show customer reviews and ratings to build trust

Block settings

Content

Setting	Description	Options
Product	Select the product to display rating for	Product picker

Spacing

Setting	Description	Options
Enable horizontal padding	Adds horizontal padding around the rating	Checkbox (default: false)
Enable top padding	Adds top padding around the rating	Checkbox (default: false)
Enable bottom padding	Adds bottom padding around the rating	Checkbox (default: false)

Color

Setting	Description	Options
Text color	Controls the text color	• Default (default) • Alternative • Primary background • Primary foreground • Secondary background • Secondary foreground • Tertiary background • Tertiary foreground • Neutral background • Neutral foreground • Shade

Style

Setting	Description	Options
Icon type	Shape of rating icons	• Star (default) • Circle • Square Visible when icon display is not "none"
Icon display	Controls how rating icons are displayed	• None • Default (default) • Simple
Icon style	Style variant for rating icons	• Classic (default) • Sharp Visible when icon display is not "none"
Icon size	Size of rating icons	10 - 100 px (default: 14) Visible when icon display is not "none"
Font family	Controls the font family used for rating text	• Standard • Heading • Subheading • Accent Visible when font size contains 'type--'
Font size	Controls the font size of rating text	• Smaller • Small • Default (default) • Big • Bigger • Heading 1 • Heading 2 • Heading 3 • Heading 4 • Heading 5 • Heading 6

Layout

Setting	Description	Options
Horizontal alignment	Controls horizontal alignment	• Left (default) • Center • Right

Display

Setting	Description	Options
Visibility	Controls when the block is visible	• All (default) • Mobile only • Desktop only