Collection list
To add this section, please follow the below steps:
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Click Add section and choose "Collection list".
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
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
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.
Carousel
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
Number of columns on desktop
Determines number of columns on desktop. Can be from 3 to 6, increasing arithmetically of 1
Mobile layout
Number of columns on mobile
Select the number of columns on the mobile from the dropdown menu:
1 column
2 columns
Animations
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
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).
Last updated