Collection list

Display a list of collections.

Open the existing section

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit and click Customize.

  3. Click the Collection list section.

Add a collection list section to your home page

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit and click Customize.

  3. Click Add section > Collection list > Add.

  4. Use the settings to customize your Collection list section.

  5. Click Save.

Settings

Background

  • Enable: turn on/off the background.

  • Pick a color: choose a color to set the background color. If the background is empty, the background color will be displayed.

  • Background image: pick or upload your image to display it as the background image.

  • Background size: set the size of the background image.

  • Background style: set the style of the background image.

Section gutters

  • Enable top gutter: turn on/off the space distance on the top of the section.

  • Enable bottom gutter: turn on/off the space distance on the bottom of the section.

General settings

  • Heading: add the section title.

  • Subheading: add section subtitle.

  • Collections per row: the number of collection rows in the grid layout.

  • Collection item style: specify the style of a collection item.

  • Wide display: show the section in the widen layout.

Colors

  • Title: pick a color for the collection title.

  • Highlight: pick a color for the text in the collection title you want to highlight.

  • Number: pick a color for the number that is the number of products in the specified collection.

  • Reply button: pick a color for the arrow in the reply button.

  • Reply button background: pick a color for the background of the reply button.

  • Enable the title background: this setting is only applied in the collection item style 2. It's used to pick a color for the background of the collection title.

  • Title background: pick a color the background of the collection title.

Font size

  • Collection title: change the font size of the collection title.

  • Collection count: change the font size of the number below the collection title.

Add/Edit/Remove a collection item

Scroll down to the bottom, you will see an Add collection button, click this button to add a new collection. Or you can click one of the available collections to edit/remove it and drag/drop collections to rearrange them.

Collection item settings:

  • Collection: pick a collection you want to show.

  • Custom image: pick or upload your image to show. Leave empty to show the featured image of the specified collection or the featured image of the first product image of the specified collection.

  • Custom title: add your text to show as collection title. Leave empty to show the real collection title. Use the <hl> tag to wrap your highlight text. Example: Animal Print tees <hl>| Summer</hl>

  • Click the Remove content button to remove a collection item.

Last updated