Tabbed Features
Layout, content and available controls for Tabbed Features.
Where to find it
Add this section from the theme editor on a supported template.
Available content blocks
- Feature Tab
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.
- Section Title
- 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.
- Heading accent color source
- Global accent styling is managed in Theme settings > Typography; choose Custom for a local color.
- Custom accent colorConditional
- Choose a local color when the relevant custom source is enabled.
- Section Subtitle
- Use the matching control in the theme editor and preview the component before publishing.
- Title Size
- Adjust within the range offered by the theme editor.
- Title Weight
- Choose the presentation or source that fits this component.
- Subtitle Size
- Adjust within the range offered by the theme editor.
- Subtitle Weight
- Choose the presentation or source that fits this component.
- Panel Title Size
- Adjust within the range offered by the theme editor.
- Panel Title Weight
- Choose the presentation or source that fits this component.
- Panel Text Size
- Adjust within the range offered by the theme editor.
- Panel Text Weight
- Choose the presentation or source that fits this component.
- Tab Border Width
- Adjust within the range offered by the theme editor.
- Tab Border Radius
- Adjust within the range offered by the theme editor.
- Active Tab BackgroundConditional
- Choose a local color when the relevant custom source is enabled.
- Active Tab TextConditional
- Choose a local color when the relevant custom source is enabled.
- Inactive Tab BorderConditional
- Choose a local color when the relevant custom source is enabled.
- Inactive Tab TextConditional
- Choose a local color when the relevant custom source is enabled.
- Desktop Image Position
- Choose the presentation or source that fits this component.
- Content Vertical Position
- Choose the presentation or source that fits this component.
- Image Max Width (%)
- Adjust within the range offered by the theme editor.
- Image Aspect Ratio
- e.g., 1/1, 4/3, 16/9
- Image Border Radius
- Adjust within the range offered by the theme editor.
- Content Gap (Desktop)
- Adjust within the range offered by the theme editor.
- Color source
- Theme colors follow Theme settings > Colors. Other sources apply only to this section.
- 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.
- Text and inactive tabsConditional
- Choose a local color when the relevant custom source is enabled.
- Active tabConditional
- Choose a local color when the relevant custom source is enabled.
- Active tab textConditional
- Choose a local color when the relevant custom source is enabled.
- Inactive tab borderConditional
- 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 Gradient (Optional)Conditional
- Use the matching control in the theme editor and preview the component before publishing.
- Heading ColorConditional
- Choose a local color when the relevant custom source is enabled.
- Text ColorConditional
- Choose a local color when the relevant custom source is enabled.
- Container Max Width
- Adjust within the range offered by the theme editor.
- Top Padding
- Adjust within the range offered by the theme editor.
- Bottom Padding
- Adjust within the range offered by the theme editor.