Add a Collection list section gather and showcase selected collections together.
🧰 How to install the section in your theme
- Open Theme Updater & Backups in your Apps admin
- Open Theme sections
- Click Install below the section. You can also click Preview to see the section in a demo storefront
Â
- On the right side of the page, use the Choose theme dropdown to select the theme you want to enhance with the new section
- Click Install
Add the section to a template
Click Customize to open the theme editor for the selected theme.
Open the template (e.g. home page, default product) and click (+) Add section in the sidebar.
Scroll down to the bottom of your default sections list and select 🧰 Collection list.
Section settings
Click the Collection list section to open its general settings.
Heading
Include a Heading with the provided field.
Columns
Use the Number of columns slider to display the collections in 2, 3, 4, 5, or 6 columns.
Adjust the Number of columns on mobile slider to display the collections in 1, 2, or 3 columns for mobile devices such as phones or tablets.
Collection cards text
Use the Content alignment setting to align collection card text to the Left, Center, or Right.
Adjust the font size for headings with the Heading size and Mobile heading size settings.
Image crop
Crop the collection images to fit a Square or Circle container, or use the Adapt to image option to display the image in its original dimensions.
Select colors
Choose colors for the section's Text color and Background color.
Adjust spacing
Use the Top padding and Bottom padding sliders to increase or decrease the padding of the section.
Use the Top margin and Bottom margin sliders to increase or decrease the margins of the section.
Customize collection blocks
Click the toggle beside Collection list section to reveal its blocks. Open one of the preloaded Collection blocks to customize its content.
Select collection
Identify the collection to display by clicking Select collection.
Custom image
By default, the block will display the collection's image. To replace this with a custom image, click Select image.
Custom heading
Use the provided field to replace the collection name with a Custom heading.
Changelog
December 3rd, 2024
- Updates to link hover states and animations
September 25th, 2024
- Collection list added to Theme Sections.