Superstore’s Collections list section provides expanded controls and settings to showcase collections on your homepage.
Use the theme editor to add an optional heading, customize the section colors, customize the text appearance, configure a layout for desktop and mobile, and add your collections.
Add Collections list to your home page
- In the theme editor (Customize), click [+] Add section
- Locate Collections list
- Click the section, then Add
- Save
Add optional heading
In the Heading field, add the desired title to display at the top of the section.
Customize the section colors
The font color for this heading can be controlled through the Section heading color. To change this, click the rounded rectangle to the left of the setting to enter the color selector.
You can also configure the background color for the Collections list section by selecting the rounded rectangle next to Section background color.
These color settings will be distinct from the Theme settings > Colors. For more information on the other colors, navigate to Colors in Superstore.
Customize the text appearance
Choose which font will be assigned to each collection title with the Collection title font dropdown. The two options are Headings and Body font. These will reflect the font settings set up in the Typography Theme settings.
Use the Text alignment dropdown to determine the position of the collection title text in relation to the collection images. The three options are Left, Center, and Right.
Configure a layout for desktop
Adjust the Collections per row slider to choose how many collection blocks are included in each horizontal row for desktop view. Feature a minimum of 3 and a maximum of 6 collection blocks with this setting.
The Hide collections after setting controls how many rows will be included in the collections list section. This will be set to Show all collections by default, but this can be used to limit the number of rows by choosing one of the other options in the dropdown.
Configure a layout for mobile
Just like the desktop layout, adjust the Collections per row slider to choose how many collection blocks are included in each horizontal row for mobile view. Feature a minimum of 2 and a maximum of 3 collection blocks with this setting.
The Hide collections after setting controls how many rows will be included in the collections list section in the mobile view. This will be set to Show all collections by default, but this can be used to limit the number of rows by choosing one of the other options in the dropdown.
Add your collections
This portion of the Collections list settings controls which collections are included, as well as options to change the title and image of each collection.
Need to add collections? Check out Shopify’s guide to get started.
Click Select collection to assign a collection to the block.
Add an optional alternative image by clicking Select image under the Custom image label. When active, this image will replace the Collection image assigned the Products admin. This custom image will only be in effect for the Collections list section.
There is also the option to replace the collection’s title with a Custom collection title. Just like the Custom image, this custom title will only be in effect for the Collections list section.
Each of the collection blocks can be rearranged by clicking, holding, then dragging the block with the cursor on the right-side icon.