Bold collections
An editorial take on a collection list, with fewer collections and much bigger imagery. Suits stores with three or four strong categories.
At a glance: Add it to any page with Add section. Holds up to 5 blocks.
Good for
- An editorial homepage with three to six strong categories
- A category menu in large type with images that appear on hover
- Stores with bold typography and simple navigation
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 Bold 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. |
List style
| Layout | Chooses the arrangement of the section content.
The rotational layout works best with 5 or more collections. Choose Wrap (default), Stack or Rotational. |
| List alignment | Aligns the stacked list of collection names left, center or right. Only used by the Stack layout.
Default: Center. Only appears when Layout is Stack. |
| Show product count | Shows the number of products in each collection.
Off by default. |
| 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.
Choose Portrait (3:4) (default), Square (1:1) or Landscape (4:3). |
| Heading size | Heading size on each card, from the sizes in Theme settings → Typography.
Choose Default (default), H1, H2, H3, H4, H5 or H6. |
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.
Collection block
| Collection | The collection this section pulls products from. |
| Custom name | Overrides the name pulled from the product.
Leave empty to use the collection name. |
| Image 1 | Custom image for this slot.
Rear / background image. |
| Size 1 | How big this image appears next to the collection name on hover. Large is a bit bigger than Small. Mix the two sizes so the back and front images don't look the same.
Choose Small (default) or Large. |
| Image 2 | Custom image for this slot.
Front / foreground image. |
| Size 2 | How big this image appears next to the collection name on hover. It sits in front of image 1 and overlaps it.
Choose Small (default) or Large. |
Tips
- Give every collection two images. The back and front images overlap on hover, and one image alone looks sparse.
- Mix Small and Large. A small back image with a large front one (or the other way round) adds depth.
- Keep names to one or two words. The type is large, so long names wrap onto several lines.
Troubleshooting
The images don't show
Images appear next to a name only when a shopper hovers over it. Move your mouse over a collection name in the editor preview to see them.
The product count is missing for a collection
Counts are hidden for empty collections, and only show when Show product count is on.