Collections List Section
From your Shopify admin, go to Online Store -> Themes.
Find the theme that you want to edit, and then click Customize.
Choose Collections list from the dropdown window.
Section settings
General
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
Set the background color for the section.
Background gradient
Set the background gradient for the section.
Show breadcrumb
Enable to show the page breadcrumb.
Breadcrumb alignment
Align breadcrumb to either to be center, to the left or right.
Background color
Set the background of the breadcrumb on Desktop.
Background gradient
Set the gradient of the breadcrumb on Desktop.
Background color on mobile
Set the background of the breadcrumb on Mobile.
Background gradient on mobile
Set the gradient of the breadcrumb on Mobile.
Show page title
Enable to show the page title.
Page title alignment
The alignment of the page title within the section container.
Description
Fill in the description of the page.
Content alignment
The alignment of the description within the section container.
Font size
Determine the font size of the description.
Font size on mobile
Determine the font size of the description on Mobile.
Font weight
Select the font weight of the description.
Top padding
Determine the spacing top of the description.
Bottom padding
Determine the spacing bottom of the description.
Text color
Set the color for the description text.
Sidebar
Show collapsible block
Turn the blocks in sidebar to be collapsible.
Enable sticky sidebar
Fix the position of the sidebar when scrolling until the end of the collection content.
Layout
Determine how collapsible blocks are presented:
Layout 1 (The collapsible blocks appear with carets). Layout 2 (The collapsible blocks appear with minus and plus icons).
Collapsible
Select the collapse state of the collapsible blocks when the page loads.
Position
Select the position of the side to be either to the Left or Right.
Block heading
Font family
Select the font family for the title of the sidebar.
Font size
Determine the font size of the title of the sidebar.
Font weight
Select the font weight of the title of the sidebar
Text style
Select the text transform for the title of the sidebar
Collection list
Type
Select the type of the collection to display in the list:
All collections (Dynamically fetch data from the admin) Custom collections (Set up with Custom Collection Block)
Sort by
Change the order of the All Collection Type with criteria. Note: Apply to 'all collections' option.
Items per row
Select the number of collections to show per row.
Items per row on mobile
Select the number of collections to show per row on Mobile. Note: Not for layout 'collections 03 masonry'.
Section top padding
Determine the spacing top of the collection list.
Section bottom padding
Determine the spacing bottom of the collection list.
Grid gap
Determine the gap between collections.
Pagination
Pagination
Choose how the Collections list displays when there are too many collections. There are 3 options:
Show all
Pagination.
Button show more Note: The 'pagination' option only applies to the 'all collections' type.
Maximum collections to show
Limit the number of collections to show. Note: This setting does not apply to 'show all' pagination.
Button
Fill in the text for the show more button.
Button font size
Determine the font size of the button.
Button width
Specify the width the load more button from 100px to 600px.
Button font weight
Select the font weight of the load more button.
Text style
Select the text transform of the load more button.
Top padding
Determine the spacing of the button from the top.
Bottom padding
Determine the spacing of the button from the bottom.
Color
Set the text color of the show more button.
Border color
Set the border color of the show more button.
Background color
Set the background color of the show more button.
Background gradient
Set the background gradient of the show more button.
Hover color
Set the text color for hover states of the show more button.
Border hover color
Set the border color for hover states of the show more button.
Background hover color
Set the background color for hover states of the show more button.
Background hover gradient
Set the background gradient for hover states of the show more button.
Collection image
To add images, edit your collections
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.
Bottom padding
Determine the spacing of the image from the bottom.
Collection content
Show collection title
Enable to show the collection title on all collection items.
Show collection product count
Enable to show the collection product amount on all collection items.
Content alignment
Align the collection content including title, number amount, description and button to the Left, Right or Center.
Border color
Set the color for all of the collection items' border.
Background color
Set the color for all of the collection items' background.
Background gradient
Set the background gradient for all of the collection items' background.
Title
Font size
Determine the font size of the title on all collection items.
Font size on mobile
Determine the font size of the title on all collection items on mobile.
Font weight
Select the font weight of the title on the collection items.
Text style
Select the text transform of the title on the collection items.
Bottom padding
Determine the spacing bottom of the collection title.
Text color
Set the color for the collection title.
Background color
Set the background color for the collection title.
Background gradient
Set the background gradient for the collection title.
Number of products
Font size
Determine the font size of the product count on all collection items.
Font size on mobile
Determine the font size of the product count on all collection items on mobile.
Font weight
Select the font weight of the number count.
Text style
Select the text transform for the number count.
Bottom padding
Determine the spacing bottom of the product count.
Text color
Set the color for the product count.
Description
Font size
Determine the font size of the description.
Font size on mobile
Determine the font size of the description on mobile.
Font weight
Select the font weight of the description.
Text style
Transform the description to be Normal, Capitalize, Uppercase or Lowercase.
Description limit
Limit the description word count to truncate.
Bottom padding
Determine the spacing bottom of the description.
Text color
Set the color for the description.
Button
Button
Enter the text for the button.
Button style
Select the style of the button:
Style 1 - Normal button
Style 2 - As a Link
Button font size
Determine the font size of the button.
Button width
Determine the width of the button.
Button font weight
Select the font weight of the button.
Text style
Transform the text of the button to be either normal, uppercase, lowercase or capitalize.
Bottom padding
Determine the spacing bottom of the button.
Color
Set the text color of the button.
Border color
Set the border color of the button.
Background color
Set the background color of the button.
Background gradient
Set the background gradient of the button.
Hover color
Set the text color for hover states of the button.
Border hover color
Set the border color for hover states of the button.
Background hover color
Set the background color for hover states of the button.
Background hover color
Set the background gradient for hover states of the button.
Section top padding
Desktop
Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, 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
Desktop
Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, 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] Custom collection
Choose collection
Select a collection that you want show in this block.
Upload image
Custom image for this collection. Note: Leave the image blank to show the collection image if available.
Countdown
Show countdown
Enable to show the countdown function.
Title
Enter the title of the countdown block.
Font size
The font size of the title on tablet and desktop devices.
Font size on mobile
The font size of the title on mobile devices.
Font weight
Select the font weight of the title.
Bottom padding
Adjust the space between the bottom edge of a title and the elements below it.
Text color
Set the color of the title.
Description
The description for this block.
Font size
The font size of the description on desktop devices.
Font size on mobile
The font size of the description on mobile devices.
Font weight
Select the font weight of the description
Bottom padding
Adjust the space between the bottom edge of a description and the elements below it.
Text color
Set the color of the description.
Countdown end date
Enter the due date for the countdown.
Please use this exact format: yyyy/mm/dd hour/minute/second. Example: 2021/12/4 0:0:00.
Item width
Determines the width of the countdown item.
Item height
Determines the height of the countdown item.
Item gap
Determine the gap between each countdown item.
Item corner radius
Determine the roundness for the four corners of the countdown item.
Border color
Set the border color of the countdown item.
Background color
Set the background color of the countdown item.
Background gradient
Set the background gradient of the countdown item.
Background opacity
Sets the opacity of the background.
Number font size
The font size of the number in the countdown item on tablet and desktop devices.
Number font size mobile
The font size of the number in the countdown item on mobile devices.
Number font weight
The font weight of the number in the countdown item.
Number color
Set the border color of the number in the countdown item.
Text font size
The font size of the 'Days, Hours, Mins, Secs' text in the countdown item on tablet and desktop devices.
Text font size on mobile
The font size of the 'Days, Hours, Mins, Secs' text in the countdown item on mobile devices.
Text font weight
The font weight of the 'Days, Hours, Mins, Secs' text in the countdown item.
Text color
Set the color of the 'Days, Hours, Mins, Secs' text in the countdown item.
[BLOCK] [Sidebar] Categories
Heading
Enter the heading for the block.
Menu depth
Select how the menu is displayed. There are 3 options: One level (only show menu lv1) All levels All Collections
Menu
Select the menu for the block.
[BLOCK] [Sidebar] Product block
Heading
Enter the heading for the block.
Collection
Select the collection for the block.
Layout
Select the layout for the product list. There are 2 options: Grid Slider
Maximum products to show
Determines the maximum number of products displayed.
Show navigation dots
Enable to show the navigation dots. Note: Only applicable for slider layout.
Show navigation arrows
Enable to show the navigation arrows. Note: Only applicable for slider layout.
[BLOCK] [Sidebar] CMS image
Heading
Enter the heading for the block.
Image
Select the image for the block. Recommended image: 340x400px.
Link
Select the link for the image.
[BLOCK] [Sidebar] CMS custom text
Heading
Enter the heading for the block.
Content
Enter the content for the block.
Last updated