Collection list
A row of collection cards, each with its own image and link. Cards are blocks, so you choose the collections and their order by hand.
At a glance: Add it to any page with Add section. Holds up to 12 blocks.
Good for
- A shop-by-category row on the homepage
- Pointing shoppers from a landing page to related collections
- A compact list of collections using the Mini style
How to add the section
- From your Shopify admin, go to Online Store → Themes and click Customize on Sublime.
- Open the page you want to edit from the dropdown at the top of the editor.
- In the left sidebar, click Add section.
- Search for Collection list and select it.
- Drag it into position, adjust the settings below, and click Save.
Section settings
Content
| Caption | Small label above the heading, used for eyebrow text like a category or a date. |
| Heading | The section title. Leave it empty to hide the heading row entirely and let the content start at the top. |
| Heading size | Picks one of the heading sizes defined in Theme settings → Typography, so headings stay consistent across sections instead of being sized one by one.
Choose Default (default), H1, H2, H3, H4, H5 or H6. |
| Description | Body copy shown under the heading. Supports bold, italic and links. |
| Text alignment | Aligns the heading and body text left, center or right.
Default: Left. |
| Button label | Text on the button. Leave it empty to hide the button. Two or three words reads best. |
| Button link | Where the button goes. A button with no link is not shown. |
| Open link in new tab | Opens the link in a new browser tab. Best kept for links that leave your store, so shoppers don't lose their place.
Off by default. |
| Button style | Picks one of the button styles defined in Theme settings → Buttons: primary, secondary or tertiary.
Choose Primary (default), Secondary or Tertiary. |
| Button icon | Optional icon shown after the button label.
Choose None (default), Arrow left, Arrow right, Arrow up, Arrow down, Chevron left, Chevron right, Chevron up, Chevron down, Arrow up right, Plus, Minus, Cross, Check, Play, Cart, Shopping cart, Search, Link, Download, Envelope, Home, Edit, User, Login, Heart, Chat, Filter, Trash, Share, Phone, Map pin or Eye. |
Card style
| Style | Visual treatment of each card.
Choose Card, Normal (default) or Mini. |
| Image layout | Arrangement of the images in the section.
Choose Full (1 image) (default), 2 images, 3 images, 4 images or Auto carousel. |
| Image ratio | Crops images to a fixed shape so a row of mismatched uploads still lines up. Choose Adapt to image to keep each image at its own proportions.
Does not apply to the 2 and 3 images layouts. Choose Adapt to image, Portrait (3:4), Landscape (4:3) (default) or Square (1:1). Only appears when Style is not Mini. |
| Show shop now | Adds a shop-now link to each item.
Off by default. |
| Button style | Button style used on cards in this section.
Choose Primary (default), Secondary or Tertiary. Only appears when Show shop now is on and Style is not Mini. |
| Text alignment | Aligns the text inside each card.
Default: Left. |
| Show product count | Shows the number of products in each collection.
On by default. |
| Heading size | Heading size on each card, from the sizes in Theme settings → Typography.
Choose Default (default), H1, H2, H3, H4, H5 or H6. |
Layout
| Desktop columns | How many items sit side by side on desktop.
Choose 3 (default), 4 or 5. Only appears when Style is not Mini. |
| Enable carousel on desktop | Turns the row into a swipeable carousel on desktop instead of wrapping items onto a second line.
Off by default. |
| Enable carousel on mobile | Turns the row into a swipeable carousel on mobile.
Off by default. |
| Mobile columns | How many items sit side by side on mobile.
Choose 1 or 2 (default). Only appears when Enable carousel on mobile is off and Style is not Mini. |
Appearance
| Color scheme | Sets the background, text, border and button colors for the section. Schemes are defined once in Theme settings → Colors and reused everywhere, so changing a scheme updates every section using it. |
| Card color scheme | Color scheme for cards inside the section, so they can sit apart from the section background.
Only appears when Style is not Normal. |
Spacing
Top and bottom spacing for desktop, with optional separate values for mobile. These are the same controls on every section. See Settings every section shares.
Blocks
Blocks are the individual pieces inside the section. In the sidebar, click Add block under the section to add one, and drag blocks to reorder them. The order in the sidebar is the order on the page.
Collection block
Leave blank to use collection or product images automatically
| Collection | The collection this section pulls products from. |
| Custom name | Overrides the name pulled from the product.
Leave empty to use the collection name. |
| Mini description | A short line of text under the collection name on this card, such as "From $20" or "New season". Plain text only. |
Custom images
Used in multi-image and auto carousel layouts. Empty slots use product images.
| Custom image 1 | 800 x 1000px .jpg recommended. |
| Custom image 2 | 800 x 1000px .jpg recommended. |
| Custom image 3 | 800 x 1000px .jpg recommended. |
| Custom image 4 | 800 x 1000px .jpg recommended. |
Tips
- Upload your own images for a consistent look. Custom images override the collection's own image and let every card match.
- Use the mini description for a hook. A line like From $20 or New season gives shoppers a reason to click.
- Keep custom names short. One or two words fit on a card at every screen size.