Collection statement
A large statement that shoppers complete by choosing an option. Each option swaps the background image and the collections shown beneath it.
At a glance: Add it to any page with Add section. Holds up to 5 blocks.
Good for
- An interactive "shop by mood" or "shop by occasion" feature
- Guiding shoppers to a collection in a playful way
- Food, drink or beauty ranges grouped by need
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 statement and select it.
- Drag it into position, adjust the settings below, and click Save.
Section settings
Content
| Content | The main body copy for this block.
Use [option_key] and [collection] to insert a dropdown and for a line break. Example: "I'm in the mood for [option_key] today I prefer [collection].". |
| Text alignment | Aligns the heading and body text left, center or right.
Default: Left. |
| Show view all button | Adds a View collection button under the statement. It links to whichever collection the shopper has picked in the sentence and updates when they change it.
On 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. |
Layout
| Vertical position | Vertical position as a percentage down the image, from the top.
Applies to desktop only. Choose Top, Center (default) or Bottom. |
| Layout | Chooses the arrangement of the section content.
Applies to desktop only. Choose Left (default) or Right. |
| Desktop section height | How tall the section is on desktop.
Choose Small, Medium (default), Large or Adapt to image. |
| Mobile section height | How tall the section is on mobile.
Choose Small, Medium (default), Large or Adapt to image. |
| Background image source | Single uses one background image for the whole section. Per option lets each option block set its own image, which swaps in when shoppers pick that option.
Choose Single (default) or Per option. |
| Desktop background image | 2880 x 1280px (large) .jpg recommended.
Only appears when Background image source is Single. |
| Mobile background image | 1200 x 900px .jpg recommended.
Only appears when Background image source is Single. |
| 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 24%). Only appears when Background image source is Single. |
| Enable split layout | Overrides the vertical position.
Off by default. |
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. |
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.
Option block
| Key | The option's name as shoppers see it in the first dropdown of the statement, for example smoothie or juice. Wherever you type [option_key] in the statement, that dropdown appears.
Reference this block from the statement using [option_key]. Example: [smoothie]. Use lowercase, no spaces. |
| Desktop background image | 2880 x 1280px (large) .jpg recommended.
Only appears when Background image source is Per option. |
| Mobile background image | 1200 x 900px .jpg recommended.
Only appears when Background image source is Per option. |
| 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 24%). Only appears when Background image source is Per option. |
| Collections | Choose which collections to show, and in what order. |
Tips
- Read the sentence aloud. It should make sense with every option and collection, for example "I'm in the mood for juice today, I prefer Citrus."
- Keep option names to one word. They sit inside the sentence, so long ones break the line.
- Use Per option backgrounds. Changing the photo when shoppers switch options makes the section feel responsive.
Troubleshooting
The dropdowns aren't showing in the sentence
Type [option_key] where the first dropdown should go and [collection] where the second should go, exactly as written with square brackets.
The View collection button isn't showing
The button needs Show view all button on, and the first option must have at least one collection selected.
How many options and collections can I add?
Up to five option blocks, and up to five collections in each option.