Product Benefits

Placement and available controls for the Product Benefits block.

Scale Theme · v1.9.3 · 2 min read

Where to find it

Open the parent section and use Add block where this block is offered.

Editor controls

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

Desktop columns: Choose the presentation or source that fits this component.Options: Two · Three
Mobile columns: Choose the presentation or source that fits this component.Options: One · Two · Three
Color source: Theme colors use Color DNA, Color scheme uses a shared Shopify preset, and Custom affects only this block.Options: Theme colors · Color scheme · Custom
Color schemeConditional: Choose an available Shopify color scheme.
TextConditional: Choose a local color when the relevant custom source is enabled.
Icon backgroundConditional: Choose a local color when the relevant custom source is enabled.
IconConditional: Choose a local color when the relevant custom source is enabled.
Icon borderConditional: Choose a local color when the relevant custom source is enabled.
Grid Gap: Adjust within the range offered by the theme editor.
Icon & Text Gap: Adjust within the range offered by the theme editor.
Icon Box Size: Adjust within the range offered by the theme editor.
Icon Size: Adjust within the range offered by the theme editor.
Border Width: Adjust within the range offered by the theme editor.
Icon Background: Choose a local color when the relevant custom source is enabled.
Icon Border: Choose a local color when the relevant custom source is enabled.
Icon Color: Choose a local color when the relevant custom source is enabled.
Text Color: Choose a local color when the relevant custom source is enabled.
Text Size: Adjust within the range offered by the theme editor.
Text Weight: Choose the presentation or source that fits this component.Options: Normal · Medium · Semi Bold · Bold
Show Item 1: Enable or disable this option and preview the result.
Custom icon image: Optional transparent PNG or SVG. Takes priority over SVG code and included icons.
Included icon artwork: Custom image or SVG code takes priority.Options: Google Material icon · Skin glow · Fine lines · Gentle care · Pore care · Hydration · Overnight ritual
Custom SVG Icon (Optional): Optional SVG code. Takes priority over the included icon; custom image takes priority over SVG.
Material Icon Name: Google Material Icon name (e.g., water_drop, fitness_center, bolt, verified)
Text: Edit the text shown by this component.
Show Item 2: Enable or disable this option and preview the result.
Custom icon image: Optional transparent PNG or SVG. Takes priority over SVG code and included icons.
Included icon artwork: Custom image or SVG code takes priority.Options: Google Material icon · Skin glow · Fine lines · Gentle care · Pore care · Hydration · Overnight ritual
Custom SVG Icon (Optional): Optional SVG code. Takes priority over the included icon; custom image takes priority over SVG.
Material Icon Name: Google Material Icon name
Text: Edit the text shown by this component.
Show Item 3: Enable or disable this option and preview the result.
Custom icon image: Optional transparent PNG or SVG. Takes priority over SVG code and included icons.
Included icon artwork: Custom image or SVG code takes priority.Options: Google Material icon · Skin glow · Fine lines · Gentle care · Pore care · Hydration · Overnight ritual
Custom SVG Icon (Optional): Optional SVG code. Takes priority over the included icon; custom image takes priority over SVG.
Material Icon Name: Google Material Icon name
Text: Edit the text shown by this component.
Show Item 4: Enable or disable this option and preview the result.
Custom icon image: Optional transparent PNG or SVG. Takes priority over SVG code and included icons.
Included icon artwork: Custom image or SVG code takes priority.Options: Google Material icon · Skin glow · Fine lines · Gentle care · Pore care · Hydration · Overnight ritual
Custom SVG Icon (Optional): Optional SVG code. Takes priority over the included icon; custom image takes priority over SVG.
Material Icon Name: Google Material Icon name
Text: Edit the text shown by this component.
Top Margin: Adjust within the range offered by the theme editor.
Bottom Margin: Adjust within the range offered by the theme editor.
Show Item 5: Enable or disable this option and preview the result.
Custom icon image: Optional transparent PNG or SVG. Takes priority over SVG code and included icons.
Included icon artwork: Custom image or SVG code takes priority.Options: Google Material icon · Skin glow · Fine lines · Gentle care · Pore care · Hydration · Overnight ritual
Custom SVG Icon (Optional): Optional SVG code. Takes priority over the included icon; custom image takes priority over SVG.
Material Icon Name: Google Material Icon name
Text: Edit the text shown by this component.
Show Item 6: Enable or disable this option and preview the result.
Custom icon image: Optional transparent PNG or SVG. Takes priority over SVG code and included icons.
Included icon artwork: Custom image or SVG code takes priority.Options: Google Material icon · Skin glow · Fine lines · Gentle care · Pore care · Hydration · Overnight ritual
Custom SVG Icon (Optional): Optional SVG code. Takes priority over the included icon; custom image takes priority over SVG.
Material Icon Name: Google Material Icon name
Text: Edit the text shown by this component.