Alternating Features

Layout, content and available controls for Alternating Features.

Scale Theme · v1.9.3 · 3 min read

Where to find it

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

Available content blocks

Feature

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
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 · Legacy compatibility
Shopify color schemeConditional: Choose an available Shopify color scheme.
Use Theme ColorsConditional: Apply the global theme colors in inverse manner (accent color as background)
Section Title: Edit the text shown by this component.
Section Title Accent: Edit the text shown by this component.
Subheading: Optional text displayed below the section title
Main Image: Choose an image from your shop. Preview its crop on desktop and mobile.
Hide Main Image: When enabled, the main image will be hidden and features will take full width
Side Heading Layout: When Hide Main Image is on, places the section heading in a column beside the features instead of above them
Heading Alignment (Mobile): Choose the presentation or source that fits this component.Options: Left · Center · Right
Heading Alignment (Desktop): Choose the presentation or source that fits this component.Options: Left · Center · Right
Top Padding: Adjust within the range offered by the theme editor.
Bottom Padding: Adjust within the range offered by the theme editor.
Section Border Radius: Adds rounded corners to the entire section
Spacing between features: Controls the vertical gap between each feature item
Divider Top Spacing: Space above the divider line
Divider Bottom Spacing: Space below the divider line
Background ColorConditional: Choose a local color when the relevant custom source is enabled.
Use Gradient Background: Enable or disable this option and preview the result.
Gradient Start ColorConditional: Choose a local color when the relevant custom source is enabled.
Gradient End ColorConditional: Choose a local color when the relevant custom source is enabled.
Gradient Angle: Adjust within the range offered by the theme editor.
Section Heading ColorConditional: Choose a local color when the relevant custom source is enabled.
Subheading ColorConditional: Choose a local color when the relevant custom source is enabled.
Feature Title ColorConditional: Choose a local color when the relevant custom source is enabled.
Description ColorConditional: Choose a local color when the relevant custom source is enabled.
Divider ColorConditional: Choose a local color when the relevant custom source is enabled.
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.
Accent ColorConditional: Used for accent text and highlights
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.
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)
Icon Container Size: Size of the circular icon container
Icon Image Size: Size of the icon image within the container
Enable Icon Background: When disabled, icons will appear without the circular background
Icon Background ColorConditional: Choose a local color when the relevant custom source is enabled.
Icon ColorConditional: Choose a local color when the relevant custom source is enabled.
Icon Image Fit: How the icon image fits within its containerOptions: Contain (fit inside) · Cover (fill container)
Icon Container Border Radius: Corner roundness of icon container (50% = circle, 0% = square)
Image Border Radius: Adjust within the range offered by the theme editor.
Feature Image Fit: How the Feature Image fits within its container (does not affect icon images)Options: Contain (fit inside) · Cover (fill container)
Bold Feature Title: When enabled, feature titles use bold (700) font weight
Section Heading Size - Desktop: Font size for the section heading on desktop (768px and above)
Section Heading Size - Mobile: Font size for the section heading on mobile (767px and below)
Heading Line Height (Desktop): Adjust within the range offered by the theme editor.
Heading Line Height (Mobile): Adjust within the range offered by the theme editor.
Subheading Line Height (Desktop): Adjust within the range offered by the theme editor.
Subheading Line Height (Mobile): Adjust within the range offered by the theme editor.
Feature Title Font Size (Mobile): Adjust within the range offered by the theme editor.
Feature Title Font Size (Desktop): Adjust within the range offered by the theme editor.
Description Font Size (Mobile): Adjust within the range offered by the theme editor.
Description Font Size (Desktop): Adjust within the range offered by the theme editor.
Reveal on scroll: Original section reveal. Respects reduced motion and low-capacity devices.