Collection list

To add this section, please follow the below steps:

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

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

  3. Click Add section and choose "Collection list".

Setting
Description

Layout style

Select the layout style for the section:

  • Default

  • Classic

  • Masonry

Heading

Add text to display as a section heading (Leave the field blank to hide the heading)

Heading size

Font size of text:

  • Default

  • XX-Small

  • X-Small

  • Small

  • Medium

  • Large

  • X-Large

  • XX-Large

  • XXX-Large

Heading margin bottom

Determines the height of the bottom inner space of the block. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

Enable "View all" button if list includes more collections than shown

If the store has more collections than shown, then this displays a "View all" button that takes the customers to the collection list page.

Button/Link text

Set the link for (button/link), for example the customer service page.

Choose style button

Select the style button from the dropdown menu:

  • Default

  • Transparent

Show separator line

Displays a line to visually separate this section from the other sections.

Heading alignment

Select heading alignment from the dropdown menu:

  • Left.

  • Center.

  • Right.

Collection

Setting
Description

Image width

Select image width from the dropdown menu:

  • Auto

  • Full width of column

Image ratio

Select image ratio from the dropdown menu:

  • Adapt to image.

  • Portrait.

  • Square.

  • Circle.

  • Landscape.

Height odd image

(Can only be used when choosing a masonry layout)

Height even image

(Can only be used when choosing a masonry layout)

Heading size

Font size of text:

  • Body

  • XX-Small

  • X-Small

  • Small

  • Medium

  • Large

  • X-Large

  • XX-Large

  • XXX-Large

Heading transform

Select the font style transform of the text:

  • Lowercase

  • Capitalize

  • Uppercase

  • None

Content alignment

Set horizontal alignment for content inside section containers:

  • Left

  • Center

  • Right

Colors

Setting
Description

Color scheme

Select a color scheme to set the text and background colors for the section

Use custom color

Select this checkbox to use custom color for this section. (The 2 following settings only take effect if this checkbox is ticked)

Background

Set the background color for this section.

Background gradient

Set the background gradient for this section.

Setting
Description

Enable carousel

Enable/disable checkbox

Space between

Determines the height of the between inner space of the section. Can be from 10px to 50px, increasing arithmetically of 1px

Enable arrows

Display arrows on devices:

  • None

  • On every device

  • Only on desktop

  • Only on (desktop, tablet)

  • Only on (tablet, mobile)

  • Only on mobile

Enable infinite scroll

Select this option if you want the images to scroll infinitely

Desktop layout

Setting
Description

Number of columns on desktop

Determines number of columns on desktop. Can be from 3 to 6, increasing arithmetically of 1

Mobile layout

Setting
Description

Number of columns on mobile

Select the number of columns on the mobile from the dropdown menu:

  • 1 column

  • 2 columns

Animations

Setting
Description

Reveal sections on scroll

Select the scroll animation from the dropdown menu:

  • None

  • Fade in up

  • Fade in down

  • Zoom in

  • Zoom out

Text animation

Select the text animation from the dropdown menu:

  • None

  • Fade in up

  • Fade in down

  • Zoom in

  • Zoom out

Section padding

Setting
Description

Top padding

Determines the height of the top inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

Bottom padding

Determines the height of the bottom inner space of the section. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

Top padding on mobile

Determines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).

Bottom padding on mobile

Determines the height of the top inner space of the section on mobile. Can be from 0px to 100px, increasing arithmetically of 1px (pixel).