Collections grid settings
The main section of the collections list page. It shows the store’s collections as a grid of cards, or as rows with a hover image, with an optional heading above. Its content is built from blocks: add them with Add block in the section.
Blocks you can add to the section
- Collection: one hand-picked collection shown as a card, with its own image, name, description and button.
- Collections list: a list of collections shown as rows, with a mini banner and an image that follows the hovered row.
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. |
Top divider
A thin line above the section content.
| Setting | Description |
|---|---|
| Show divider | Shows the line. The settings below appear only when this is on. Default: On. |
| Line opacity | Transparency of the line. Range: 0–100 %. Default: 20 %. |
| Thickness | Thickness of the line. Range: 1–10 px. Default: 1 px. |
| Padding | Space below the line on desktop. Range: 0–200 px, step 2. Default: 16 px. |
| Padding mobile | Space below the line on mobile. Range: 0–120 px, step 2. Default: 16 px. |
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. |
| 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 on desktop. 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. |
| 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: Uppercase. |
| Bottom space | Space between the heading and the description on desktop. 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 collections. 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. |
Grid
| Setting | Description |
|---|---|
| Collection count | Maximum number of collections shown. Range: 1–50. Default: 30. |
| Desktop columns | Number of cards per row on desktop. Range: 1–5. Default: 2. |
| Mobile columns | Number of cards per row on mobile: One or Two. Default: One. |
| Desktop horizontal spacing | Space between cards on desktop. Range: 0–80 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. Range: 0–80 px. Default: 8 px. |
| Mobile vertical spacing | Space between rows on mobile. Range: 0–40 px. Default: 8 px. |
Card settings
| Setting | Description |
|---|---|
| Card color scheme | Color scheme of the collection cards. Schemes are managed in Theme settings → Colors. Default: Scheme 1. |
| Card media color scheme | Color scheme of the card image area. Default: Scheme 1. |
| Image ratio | Shape of the collection image: Adapt, Adapt to content, Tall, Portrait, Square, Landscape, Wide or Ultra wide. Default: Square. |
| Show collection name | Shows the name of the collection. The settings below it appear only when this is on. Default: On. |
| Preset | Typography preset of the name: H1–H6, Subheading, Caption, Large text, Paragraph or Small text. Presets are edited in Theme settings → Typography. Default: H5. |
| Font | Font family of the name: Heading large, Heading small, Body or Accent. Default: Heading large. |
| Color | Text color of the name: Heading, Text or Accent. Default: Heading. |
| Text style | Letter case of the name: Normal, Uppercase or Lowercase. Default: Uppercase. |
| Name bottom space | Space below the name on desktop. Shown when the description is shown, with one column on desktop, or with two columns on mobile. Range: 0–60 px. Default: 12 px. |
| Name bottom space mobile | The same space on mobile. Range: 0–60 px. Default: 12 px. |
| Show description | Shows the collection description. The settings below it appear only when this is on. Default: Off. |
| Preset | Typography preset of the description: Default, H1–H6, Subheading, Caption, Large text, Paragraph or Small text. Default: Default. |
| Font | Font family of the description: Heading large, Heading small, Body or Accent. Default: Body. |
| Color | Text color of the description: Heading, Text or Accent. Default: Text. |
| Text style | Letter case of the description: Normal, Uppercase or Lowercase. Default: Normal. |
| Description bottom space | Space below the description on desktop. Available when the description is shown and there is one column on desktop. Range: 0–60 px. Default: 16 px. |
| Description bottom space mobile | The same space on mobile. Range: 0–60 px. Default: 16 px. |
| View collection button | Shows a button that leads to the collection. The settings below appear only when this is on. Default: On. |
| Button label | Text on the button. Default: View collection. |
| Button style | Primary, Secondary, Outline or Inline. Button styles are edited in Theme settings → Buttons. Default: Primary. |
| Button icon | Icon next to the label: None, Dot, Square, Triangle, Arrow, Caret or Carets. Default: None. |
| Button icon position | Places the icon to the left or right of the label. Available only when an icon is selected. Default: Right. |
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.