Benefits Grid

Layout, content and available controls for Benefits Grid.

Scale Theme · v1.9.3 · 1 min read

Where to find it

Add this section from the theme editor on a supported template.

Available content blocks

Benefit Item

Editor controls

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

Display section ID: ID is used in the Sections group section to create anchor links. Toggle on to show a copy button on this section.
Display on: Choose the presentation or source that fits this component.Options: All devices · Desktop only · Mobile only
Title (Normal): Use bold or italic in this heading to apply the global Heading DNA accent style. Change it in Theme settings > Typography.
Accent effect: Highlight adds a slanted color plate behind bold or italic heading text. The existing accent color controls set its background.Options: Theme setting · Highlight
Heading accent color source: Global accent styling is managed in Theme settings > Typography; choose Custom for a local color.Options: Heading DNA · Custom
Custom accent colorConditional: Choose a local color when the relevant custom source is enabled.
Title (Italic Part)Conditional: Edit the text shown by this component.
Title Font Size: Adjust within the range offered by the theme editor.
Title Weight: Choose the presentation or source that fits this component.Options: Light · Regular · Medium · Semi Bold · Bold
Italic Part WeightConditional: Choose the presentation or source that fits this component.Options: Light · Regular · Medium · Semi Bold
Title ColorConditional: Choose a local color when the relevant custom source is enabled.
Title GradientConditional: Overrides title color when set
Italic Part ColorConditional: Choose a local color when the relevant custom source is enabled.
Italic Part GradientConditional: Use the matching control in the theme editor and preview the component before publishing.
Title Alignment: Choose the presentation or source that fits this component.Options: Left · Center
Title Bottom Margin: Adjust within the range offered by the theme editor.
Icon Circle Size: Adjust within the range offered by the theme editor.
Icon Size: Adjust within the range offered by the theme editor.
Icon Border Radius: Adjust within the range offered by the theme editor.
Icon BackgroundConditional: Choose a local color when the relevant custom source is enabled.
Icon Background GradientConditional: Use the matching control in the theme editor and preview the component before publishing.
Icon ColorConditional: Choose a local color when the relevant custom source is enabled.
Icon Color GradientConditional: Use the matching control in the theme editor and preview the component before publishing.
Card Title Size: Adjust within the range offered by the theme editor.
Card Title Weight: Choose the presentation or source that fits this component.Options: Medium · Semi Bold · Bold
Card Title ColorConditional: Choose a local color when the relevant custom source is enabled.
Description Size: Adjust within the range offered by the theme editor.
Description ColorConditional: Choose a local color when the relevant custom source is enabled.
Columns (Desktop): Adjust within the range offered by the theme editor.
Grid Gap: Adjust within the range offered by the theme editor.
Item Inner Gap: Adjust within the range offered by the theme editor.
Item Alignment: Choose the presentation or source that fits this component.Options: Left · Center
Max Width: Adjust within the range offered by the theme editor.
Color source: Theme colors follow Theme settings > Colors. Other sources apply only to this section.Options: Use theme colors · Choose a color scheme · Set custom colors
Saved color schemeConditional: Choose an available Shopify color scheme.
BackgroundConditional: Choose a local color when the relevant custom source is enabled.
HeadingConditional: Choose a local color when the relevant custom source is enabled.
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.
Section BackgroundConditional: Choose a local color when the relevant custom source is enabled.
Section Background GradientConditional: Use the matching control in the theme editor and preview the component before publishing.
Top Padding: Adjust within the range offered by the theme editor.
Bottom Padding: Adjust within the range offered by the theme editor.