Sub-collections
A carousel of large image cards, each linking to a group of collections you choose, for example a Women card listing Dresses, Tops and Knitwear. Use it to guide shoppers from a broad category into the narrower collections inside it.
At a glance: Add it to any page with Add section.
Good for
- Linking a broad category page to the smaller collections inside it
- Homepage cards for departments such as Women, Men and Kids
- Short collection menus shown as a dropdown on each card
Choose the collections for each card
- Shopify doesn't nest collections, so this section doesn't find sub-collections by itself. Each card lists exactly the collections you pick.
- In your Shopify admin, go to Products → Collections and make sure every collection you want to link to exists and has products.
- In the theme editor, add a Promo card block for each group, such as one card for Women.
- In the card, click Collections and pick up to five collections, in the order you want them listed.
- Add a background image and heading to each card. Choose Display type in the section settings to show the collections as links or as a dropdown.
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 Sub collections 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
| Display type | How each card lists its collections. List shows them as links, one below another. Dropdown tucks them into a menu that opens the chosen collection, which saves space when a card has several collections.
Choose List (default) or Dropdown. |
| Text alignment | Aligns the text inside each card.
Default: Left. |
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. |
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.
Promo card block
| Desktop image | Background image used on desktop.
2880 x 1280px (large) .jpg recommended. |
| Mobile image | A separate image used on mobile. Leave empty to reuse the desktop image.
Falls back to the desktop image when empty. |
| Overlay opacity | Darkens the image behind the text so the text stays readable. Higher values mean a darker image.
Adjustable from 0% to 100% (default 20%). |
| 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. |
| Collections | Choose which collections to show, and in what order.
Select up to 5 collections. |
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.
Overrides the section's color scheme. |
Tips
- Use wide images. Cards are wide, about two to a row on desktop. Landscape images of about 1600px wide fill them well.
- Switch to Dropdown for longer lists. Four or five links fit in a dropdown without making the card taller.
- Raise the overlay on busy photos. The collection links sit on the image, so they need contrast to stay readable.
Troubleshooting
My sub-collections don't show up automatically
The section doesn't read collection structure or metafields. Pick the collections for each card in its Collections setting.
A card only shows its image and heading
No collections are selected on that card. Open the card block and pick at least one under Collections.
Can I list more than five collections on a card?
No, each card holds up to five. Add another card for the rest.