Rating · Hero

Controls for the Rating content block inside Hero.

Scale Theme · v1.9.3 · 1 min read

Where to find it

Open Hero in the theme editor, then select or add its Rating block.

Editor controls

Conditional controls appear after choosing the relevant source, style or option. Saved values may differ from new defaults.

Placement: Choose the presentation or source that fits this component.Options: Above heading · Below heading
Style: Choose the presentation or source that fits this component.Options: Inline · Pill
Show avatar stack: Enable or disable this option and preview the result.
AvatarsConditional: Adjust within the range offered by the theme editor.
Avatar 1 imageConditional: Choose an image from your shop. Preview its crop on desktop and mobile.
Avatar 1 initialsConditional: Edit the text shown by this component.
Avatar 2 imageConditional: Choose an image from your shop. Preview its crop on desktop and mobile.
Avatar 2 initialsConditional: Edit the text shown by this component.
Avatar 3 imageConditional: Choose an image from your shop. Preview its crop on desktop and mobile.
Avatar 3 initialsConditional: Edit the text shown by this component.
Avatar 4 imageConditional: Choose an image from your shop. Preview its crop on desktop and mobile.
Avatar 4 initialsConditional: Edit the text shown by this component.
Avatar 5 imageConditional: Choose an image from your shop. Preview its crop on desktop and mobile.
Avatar 5 initialsConditional: Edit the text shown by this component.
Stars: Adjust within the range offered by the theme editor.
Text: Edit the text shown by this component.
Color source: Choose the presentation or source that fits this component.Options: Inherit hero · Theme DNA · Color scheme · Custom
Color schemeConditional: Choose an available Shopify color scheme.
BackgroundConditional: Choose a local color when the relevant custom source is enabled.
TextConditional: Choose a local color when the relevant custom source is enabled.
StarsConditional: Choose a local color when the relevant custom source is enabled.
BorderConditional: Choose a local color when the relevant custom source is enabled.
Vertical paddingConditional: Adjust within the range offered by the theme editor.
Horizontal paddingConditional: Adjust within the range offered by the theme editor.
Mobile vertical paddingConditional: Adjust within the range offered by the theme editor.
Mobile horizontal paddingConditional: Adjust within the range offered by the theme editor.
Content gap: Adjust within the range offered by the theme editor.
Minimum height (0 = natural): Adjust within the range offered by the theme editor.
Text size: Adjust within the range offered by the theme editor.
Mobile text size: Adjust within the range offered by the theme editor.
Text weight: Choose the presentation or source that fits this component.Options: Regular · Medium · Semibold · Bold
Star size: Adjust within the range offered by the theme editor.
Mobile star size: Adjust within the range offered by the theme editor.
Space between stars: Adjust within the range offered by the theme editor.
Border widthConditional: Adjust within the range offered by the theme editor.
Border styleConditional: Choose the presentation or source that fits this component.Options: Solid · Dashed · Dotted · None
Corner radiusConditional: Adjust within the range offered by the theme editor.
Background opacityConditional: Adjust within the range offered by the theme editor.
Additional space below rating: Adjust within the range offered by the theme editor.
Avatar sizeConditional: Adjust within the range offered by the theme editor.
Mobile avatar sizeConditional: Adjust within the range offered by the theme editor.
Avatar overlapConditional: Adjust within the range offered by the theme editor.
Avatar border widthConditional: Adjust within the range offered by the theme editor.
Avatar border colorConditional: Choose a local color when the relevant custom source is enabled.