Collection List
Last updated
Last updated
To add this section, please follow 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".
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.
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).
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).
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.
