Featured cards settings
A section that shows a carousel or a grid of cards, for example a feed of posts with products. Its content is built from blocks: add them with Add block in the section.
Blocks you can add to the section
- Featured card: one card of the section. Add one block per card.
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. |
Subheading
| Setting | Description |
|---|---|
| Subheading | Short line above the heading. Supports inline formatting. Leave empty to hide it. The settings below appear only when a subheading is entered. Default: Follow us. |
| Preset | Typography preset: Hero, H1–H6, Subheading, Caption, Large text, Paragraph or Small text. Presets are edited in Theme settings → Typography. Default: Subheading. |
| Icon | Decorative icon before the text: None, Dot, Square or Triangle. Available only with the Subheading preset. Default: Triangle. |
| Icon color | Color of the icon: Heading, Text, Accent or Custom. Available only with the Subheading preset and an icon selected. Default: Custom. |
| Icon custom | Custom icon color. Available only when Icon color is Custom. Default: #2B62C8. |
| Icon custom dark mode | Custom icon color used in dark mode. Available only when Icon color is Custom and dark mode is enabled in Theme settings. Default: #2B62C8. |
| Font | Font family: Heading large, Heading small, Body or Accent. Default: Accent. |
| Color | Text color: Heading, Text or Accent. Default: Accent. |
| Text style | Letter case: Normal, Uppercase or Lowercase. Default: Uppercase. |
| Bottom space | Space between the subheading and the heading. Shown when a heading or description is entered. Range: 0–60 px. Default: 40 px. |
| Bottom space mobile | The same space on mobile. Range: 0–40 px. Default: 20 px. |
Heading
| Setting | Description |
|---|---|
| Heading | Section heading. Supports inline formatting. Leave empty to hide it. The settings below appear only when a heading is entered. Default: Shop The Feed. |
| Preset | Typography preset (same options as the subheading). Default: H2. |
| Icon, Icon color, Icon custom, Icon custom dark mode | Same as for the subheading; available only with the Subheading preset. |
| Font | Font family: Heading large, Heading small, Body or Accent. Default: Heading large. |
| Color | Text color: Heading, Text or Accent. Default: Heading. |
| Text style | Letter case: Normal, Uppercase or Lowercase. Default: Normal. |
| Bottom space | Space between the heading and the description. Shown when a description is entered. Range: 0–60 px. Default: 16 px. |
| Bottom space mobile | The same space on mobile. Range: 0–40 px. Default: 8 px. |
Description
| Setting | Description |
|---|---|
| Description | Text under the heading. Supports inline formatting. Leave empty to hide it. The settings below appear only when a description is entered. |
| Preset | Typography preset (same options as the subheading). Default: Paragraph. |
| Icon, Icon color, Icon custom, Icon custom dark mode | Same as for the subheading; available only with the Subheading preset. |
| Font | Font family: Heading large, Heading small, Body or Accent. Default: Body. |
| Color | Text color: Heading, Text or Accent. Default: Text. |
| Text style | Letter case: Normal, Uppercase or Lowercase. Default: Normal. |
| Header bottom space | Space between the whole header (subheading, heading, description) and the cards. Shown when any of them is entered. Range: 0–60 px. Default: 40 px. |
| Header bottom space mobile | The same space on mobile. Range: 0–60 px. Default: 40 px. |
Layout
| Setting | Description |
|---|---|
| Layout style | Grid or Carousel. Default: Carousel. |
| Desktop columns | Number of cards per row on desktop. Range: 1–5. Default: 4. |
| Mobile columns | Number of cards per row on mobile: One or Two. Default: One. |
| Desktop horizontal spacing | Space between cards on desktop. Range: 0–60 px. Default: 8 px. |
| Mobile horizontal spacing | Space between cards on mobile. Range: 0–40 px. Default: 8 px. |
| Desktop vertical spacing | Space between rows on desktop. Available only for the Grid layout. Range: 0–60 px. Default: 16 px. |
| Mobile vertical spacing | Space between rows on mobile. Available only for the Grid layout. Range: 0–40 px. Default: 16 px. |
| Show view all | Shows a “View all” link under the cards. The settings below appear only when this is on. Default: On. |
| View all label | Text of the link. Default: Follow us on Instagram. |
| View all link | Page the link leads to. |
| View all button style | Primary, Secondary, Outline or Inline. Button styles are edited in Theme settings → Buttons. Default: Inline. |
| Button icon | Icon next to the label: None, Dot, Square, Triangle, Arrow, Caret or Carets. Default: Arrow. |
| Button icon position | Places the icon to the left or right of the label. Available only when an icon is selected. Default: Right. |
| Show arrows | Shows previous/next arrows on desktop. Available only for the Carousel layout. Default: Off. |
| Show arrows on mobile | Shows arrows on mobile. Available only for the Carousel layout. Default: Off. |
| Show scrollbar | Shows a scrollbar under the carousel on desktop. Available only for the Carousel layout. Default: On. |
| Show scrollbar on mobile | Shows the scrollbar on mobile. Available only for the Carousel layout. Default: On. |
Shape divider
| Setting | Description |
|---|---|
| Type | Shape of the cut: None, Triangle corners, Rounded corners, Zigzag, Diagonal (left), Diagonal (right), Chevron notch or Stairs. The cut is applied to the section edge. Default: None. |
| Position | Which edge is cut: Top, Bottom or Both. Available only when a shape is selected. Default: Top. |
| 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. |
| 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 %. |
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.