Product Benefits

Layout, content and available controls for Product Benefits.

Scale Theme · v1.9.3 · 4 min read

Where to find it

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

Available content blocks

Benefit

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
Benefits presentation: Choose the presentation or source that fits this component.Options: Original list · Split image and benefit grid
Fit media to section edgesConditional: Crop media inside the split panel instead of using an inset square.
Section background widthConditional: Choose the presentation or source that fits this component.Options: Inset card · Full width
Card outer side spacingConditional: Adjust within the range offered by the theme editor.
Panel corner radiusConditional: Adjust within the range offered by the theme editor.
Panel frame widthConditional: Adjust within the range offered by the theme editor.
Grid content widthConditional: Adjust within the range offered by the theme editor.
Media column widthConditional: Adjust within the range offered by the theme editor.
Grid gapConditional: Adjust within the range offered by the theme editor.
Benefit divider linesConditional: Enable or disable this option and preview the result.
Circular icon backgroundsConditional: Enable or disable this option and preview the result.
Icon background sizeConditional: Adjust within the range offered by the theme editor.
Icon insetConditional: Adjust within the range offered by the theme editor.
Icon foregroundConditional: Choose a local color when the relevant custom source is enabled.
Top Padding: Adjust within the range offered by the theme editor.
Bottom Padding: Adjust within the range offered by the theme editor.
Left Padding: Horizontal padding on the left side of the section
Right Padding: Horizontal padding on the right side of the section
Media Position on Desktop: Choose whether the media (image/video) appears on the left or right side of the contentOptions: Right of content · Left of content
Heading alignment (desktop): Choose the presentation or source that fits this component.Options: Left · Center · Right
Heading alignment (mobile): Choose the presentation or source that fits this component.Options: Left · Center · Right
Heading Size (Mobile): Adjust within the range offered by the theme editor.
Heading Size (Desktop): Adjust within the range offered by the theme editor.
Heading Line Height (Mobile): Adjust within the range offered by the theme editor.
Heading Line Height (Desktop): Adjust within the range offered by the theme editor.
Subtitle Size (Mobile): Adjust within the range offered by the theme editor.
Subtitle Size (Desktop): Adjust within the range offered by the theme editor.
Benefit Title Size (Mobile): Adjust within the range offered by the theme editor.
Benefit Title Size (Desktop): Adjust within the range offered by the theme editor.
Benefit Description Size (Mobile): Adjust within the range offered by the theme editor.
Benefit Description Size (Desktop): Adjust within the range offered by the theme editor.
Default Accent ColorConditional: Default color for benefit icons and titles if not set individually.
Apply Theme ColorsConditional: Enable or disable this option and preview the result.
Move Title Below Icon: Position the benefit title below the icon, left-aligned above the description
Override Global Accent Typography: When enabled, use section-specific accent typography settings below. When disabled, use the global accent typography from Theme Settings > Typography > Accent Typography.
Section Accent Font Family: Choose a custom font family for the accent text (only used when Override Global Accent Typography is enabled)Options: Use Global Setting · System Serif · Georgia Pro · Bodoni Moda · Instrument Serif · DM Serif Text · Nothing You Could Do
Accent Text Font Style: Choose the font style for the accent textOptions: Normal · Italic
Accent Text Font Weight: Choose the font weight (boldness) for the accent textOptions: Default (Inherit) · Light (300) · Normal (400) · Medium (500) · Semi Bold (600) · Bold (700) · Extra Bold (800) · Black (900)
Use Accent Gradient: Apply gradient effect to the accent text instead of solid color
Accent Text GradientConditional: Choose a gradient for the accent text. This setting is only used when 'Use Accent Gradient' is enabled above.
Accent Text Left Margin: Adjust within the range offered by the theme editor.
Benefits List BackgroundConditional: Use the matching control in the theme editor and preview the component before publishing.
Benefits List Border Radius: Adjust within the range offered by the theme editor.
Benefits List Max Width: Maximum width of the benefits list container
Border ColorConditional: Choose a local color when the relevant custom source is enabled.
Heading Accent Text: Edit the text shown by this component.
Heading Regular Text: Edit the text shown by this component.
Heading eyebrowConditional: Edit the text shown by this component.
Subtitle: Use the matching control in the theme editor and preview the component before publishing.
Show Media: Enable to show image or video in the section
Media Type: Choose whether to display an image or videoOptions: Image · Video
Image ratio: Choose the presentation or source that fits this component.Options: Square · Portrait · Landscape
Image fit: Choose the presentation or source that fits this component.Options: Fill · Fit
Feature Image: Used when Media Type is set to Image
Image Alt Text: Edit the text shown by this component.
Feature Video: Upload a video file. Supports MP4, MOV, and other formats. Used when Media Type is set to Video
Video Poster Image: Optional: Image to show before video plays
Autoplay Video: Video will start playing automatically (muted for browser compatibility)
Mute Video: Video will be muted by default (required for autoplay)
Loop Video: Video will restart when it reaches the end
Show Video Controls: Display play/pause and volume controls
Full Width Image on Mobile: Make the image span the full width of the screen on mobile devices
Hide Media Image on Desktop: Hide the media image on desktop (useful when using background image on desktop and media image on mobile)
Full Height Image on Desktop: Make the image column span the full height of the section on desktop
Image Top Margin: Space above the image
Image Bottom Margin: Space below the image
Enable Image Border: Enable or disable this option and preview the result.
Border Width: Adjust within the range offered by the theme editor.
Border Style: Choose the presentation or source that fits this component.Options: Solid · Dashed · Dotted
Border ColorConditional: Choose a local color when the relevant custom source is enabled.
Image Border Radius: Adjust within the range offered by the theme editor.
Heading ColorConditional: Choose a local color when the relevant custom source is enabled.
Subtitle ColorConditional: Choose a local color when the relevant custom source is enabled.
Default Description ColorConditional: Default color for benefit descriptions if not set individually.
Section BackgroundConditional: Use the matching control in the theme editor and preview the component before publishing.
Use Background Image Instead: Toggle to use a full-width background image instead of section background color
Background Image: Full-width background image for the section
Mobile Background Image: Optional different background image for mobile devices
Background Image Size: How the background image should be sizedOptions: Cover · Contain · Auto · Stretch
Position Mode: Choose between preset positions or custom focal point controlOptions: Preset Positions · Custom Focal Point
Background Image Position: Only used when Position Mode is set to 'Preset Positions'Options: Center Center · Center Top · Center Bottom · Left Center · Right Center · Left Top · Right Top · Left Bottom · Right Bottom
Horizontal Focal Point: 0% = left edge, 50% = center, 100% = right edge. Only used when Position Mode is set to 'Custom Focal Point'
Vertical Focal Point: 0% = top edge, 50% = center, 100% = bottom edge. Only used when Position Mode is set to 'Custom Focal Point'
Background Image Attachment: Fixed creates a parallax effect but may not work on mobile devicesOptions: Scroll · Fixed (Parallax)
Enable Background Overlay: Add a color overlay on top of the background image
Overlay Color: Color of the overlay (supports transparency)
Overlay Opacity: Opacity of the background overlay
Enable Top Border: Add a border to the top of the section
Top Border Width: Width of the top border in pixels
Top Border Style: Style of the top borderOptions: Solid · Dashed · Dotted · Double
Top Border ColorConditional: Color of the top border
Enable Bottom Border: Add a border to the bottom of the section
Bottom Border Width: Width of the bottom border in pixels
Bottom Border Style: Style of the bottom borderOptions: Solid · Dashed · Dotted · Double
Bottom Border ColorConditional: Color of the bottom border
Reveal on scroll: Original section reveal. Respects reduced motion and low-capacity devices.
Icon alignment beside titleConditional: Choose the presentation or source that fits this component.Options: First line · Center of title
Icon to title gap: Adjust within the range offered by the theme editor.
Title to description gap: Adjust within the range offered by the theme editor.
Space between benefits: 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: Original controls · Use theme colors · Choose a color scheme · Set custom colors
Color schemeConditional: Choose an available Shopify color scheme.
BackgroundConditional: Choose a local color when the relevant custom source is enabled.
HeadingsConditional: Choose a local color when the relevant custom source is enabled.
TextConditional: Choose a local color when the relevant custom source is enabled.
AccentConditional: Choose a local color when the relevant custom source is enabled.
Accent textConditional: Choose a local color when the relevant custom source is enabled.
BorderConditional: Choose a local color when the relevant custom source is enabled.
Fallback feature image URLConditional: Optional image URL when no image is selected. Use an owned permanent Shopify CDN URL.
Background gradient overrideConditional: Leave empty to use the custom background color.
Reference typographyConditional: Enable or disable this option and preview the result.
Grid divider colorConditional: Choose a local color when the relevant custom source is enabled.
Included product image: An uploaded image or image URL takes priority.Options: None · Greens canister cutout