Featured products settings
A section for showing products. Its content is built from blocks: add them with Add block in the section.
Blocks you can add to the section
Basic blocks
- Button: a call-to-action button.
- Heading 1, Subheading 1 and Text 1: text blocks with ready-made styles for a title, a short line above it and body text.
- Divider: a thin line between blocks.
- Spacer: an empty gap between blocks.
These blocks work the same way in every section, so their settings are described once in Basic blocks (available in multiple sections).
Blocks specific to this section
- Products: a product list or carousel, for example “Featured collection”.
- Products tabs: several product lists switched with tabs.
- Grid: arranges blocks in columns.
Blocks from installed apps can also be added.
Section settings
| Setting | Description |
|---|---|
| Color scheme | Color scheme applied to the section. Schemes are managed in Theme settings → Colors; use Edit scheme to jump there. Default: Scheme 1. |
Shape divider
Cuts the section edge. Add padding so the content doesn’t overlap the cut.
| Setting | Description |
|---|---|
| Type | Shape of the cut: None, Triangle corners, Rounded corners, Zigzag, Diagonal (left), Diagonal (right), Chevron notch or Stairs. Default: None. |
| Position | Which edge is cut: Top, Bottom or Both. Available only when a shape is selected. Default: Top. |
| Cut size | How large the cut is on desktop. Higher values cut deeper. Available only when a shape is selected. Range: 50–150 %, step 5. Default: 100 %. |
| Cut size mobile | How large the cut is on mobile. Available only when a shape is selected. Range: 50–150 %, step 5. Default: 100 %. |
| Top: scheme of the section above | Color scheme of the neighbouring section above, so the cut shows its background in light and dark mode. Available when the cut is at the top or on both edges. Default: Scheme 1. |
| Bottom: scheme of the section below | Color scheme of the neighbouring section below, so the cut shows its background in light and dark mode. Available when the cut is at the bottom or on both edges. Default: Scheme 1. |
Padding
| Setting | Description |
|---|---|
| Top | Space above the section content on desktop. Range: 0–200 px, step 2. Default: 60 px. |
| Bottom | Space below the section content on desktop. Range: 0–200 px, step 2. Default: 60 px. |
| Top mobile | Space above the section content on mobile. Range: 0–120 px, step 2. Default: 30 px. |
| Bottom mobile | Space below the section content on mobile. Range: 0–120 px, step 2. Default: 30 px. |
Custom CSS
The Custom CSS field at the bottom of the section panel is a standard Shopify setting. CSS entered there applies to this section only.