Collection List

To add this section, please follow 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".

Section settings

General

Settings	Meaning
Section width	Select the layout width of the whole section. The options are: Default (same as the body width) Width (1170px) Width (1770px) Full width (100% of the viewport width).
Padding for 'full width' option on desktop	Determine the left and right spacing of the full width layout.
Background color	The background color of the section.
Background gradient	The background gradient of the section.
Background image	Upload an image as the section background.
Layout	Select the layout for the section. There are 2 options: Masonry Grid
Enable swipe on mobile	Toggle to use swipe layout on mobile. Note: Apply to 'Grid' layout.
Enable sticky heading on desktop	Toggle sticky heading section.
Section header
Style	Select the layout for the header. There are 2 options: Style 1 Style 2
Title	Enter in the title for the section.
Title color	Apply a color to the title of the section.
Title font size	Determine the font size of the title on tablet and desktop.
Title font size on mobile	Determine the font size of the title on mobile.
Title font weight	Select the font weight of the title
Title bottom margin	Determine the spacing of the title from bottom on tablet and desktop.
Title bottom margin on mobile	Determine the spacing of the title from bottom on mobile.
'View all' style	Select the style for the "view all". There are 2 options: Style 1 Style 2
View all	Enter the text for the "view all" link.
'View all' link	Set URL for the "view all" to redirect to if the "Redirect To URL" is selected.
'View all' link color	Apply a color to the "view all".
'View all' link hover color	Apply a color when hover on the "view all".
Alignment	Select the alignment of the content to be either to the Left, Center or to the Right of the section.
'View all' width	Determine the width of the "view all".
Collection image
Image ratio	Select the desired ratio of the image: Adapt to Image (the original image width and height are adopted) Portrait (the image is cropped to be portrait) Square (the image is cropped to be square)
Portrait aspect ratio	Determine the ratio between width and height of the image. Note: Apply to 'portrait' option.
Collection content
Content alignment	Select the alignment of the collection content to be either to the Left, Center, or to the Right of the section.
Title
Font size	Determine the font size of the block title on tablet and desktop.
Font size on mobile	Determine the font size of the block title on mobile.
Font weight	Select the font weight of the blog title.
Text style	Transform the block title to be None, Capitalize, Uppercase or Lowercase.
Bottom padding	Determine the spacing of the block title from bottom.
Text color	Apply a color to the title.
Text hover color	Apply a color to the title on the hovered.
Description
Show collection description?	Toggle to show or hide the collection description.
Content description length	Determine the number of characters of the displayed collection description.
Text color	Apply a color to the collection description.
Text hover color	Apply a color to the collection description on the hovered.
Font size	Determine the font size of the collection description.
Font weight	Select the font weight of the collection description.
Button
Button label	Enter the text for the button.
Font size	Determine the font size of the button.
Text color	Apply a color to the button of the block.
Text hover color	Apply a color when hover on the button of the block.
Grid layout
Columns per row	Determine the number of items that appear on a row.
Grid gap	Determine the spacing between items.
Show navigation arrows	Toggle to show navigation arrows.
Show navigation dots	Toggle to show navigation dots.

Section top padding

Settings	Meaning
Desktop	Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 200px, increasing arithmetically of 5px (pixel).
Tablet	Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Mobile	Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Section bottom padding

Settings	Meaning
Desktop	Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 200px, increasing arithmetically of 5px (pixel).
Tablet	Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).
Mobile	Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Block settings

[BLOCK] Collection

Settings	Meaning
Collection	Select collection to show.
Custom collection badge	Enter the text for the custom badge.
Custom collection badge color	Enter the color for the custom badge color.
Custom collection badge background	Enter the background color for the custom badge color.