How to find these settings...
- Online Store
- Customize (Theme Editor)
- Top, middle dropdown
- Collection
- Collection page
Recommended reading
In this section...
Settings
Products per page
Set the total number of products per page. 1 is the minimum, and it steps up by 1 to a maximum of 50
MOBILE
Number of mobile columns
The mobile design is based on a 3 column, 768px wide layout at its widest. 1 column is the minimum, and it steps up by 1 to a maximum of 3
Mobile padding
Add horizontal spacing between blocks on screens less than 768px wide. 10px is the minimum, and it steps up by 10 to a maximum of 60px
DESKTOP
Number of desktop columns
The desktop design is based on a 5 column, 1240px wide layout at its widest. 1 column is the minimum, and it steps up by 1 to a maximum of 5
Desktop padding
Add horizontal spacing between blocks on screens larger than 768px wide. 10px is the minimum, and it steps up by 10 to a maximum of 60px
Filters
Enable filtering
Displays the available product filters for the collection
Show filter totals
Displays the total number of filters per group
Set filter display limit
Display '+ More' after the set limit. Clicking this link will reveal the hidden items. 0 is the minimum, and it steps up by 1 to a maximum of 20. If zero is set, no limit will be assigned
Enable rounded swatches
Image swatches can be sharp edged squares or circles
Options
Lazy load image(s)
Disable for "above the fold" images. Enable for any image that is not visible on the initial page load
Enable breadcrumbs
Display a site navigation showing visitors where they are on a site's hierarchy of content. Stores with a large number of collections can use a menu to relate sub-collections that will display on each page.
Enable sorting
Display sorting options. Sorting allows the user to list the products in the following orders:
- Relevance (Not available on collection page)
- Featured (Not available on search page)
- Best Selling (Not available on search page)
- Alphabetically by product title (Not available on search page)
- Reverse alphabetically by product title (Not available on search page)
- Lowest price to highest
- Highest price to lowest
- Oldest to newest (Not available on search page)
- Newest to oldest (Not available on search page)
Pagination method
There are 3 options for collection pagination:
- Click to load more: Provides a button after the set collection 'Products per page'. When the customer clicks this button, more items will be loaded on the same page
- Infinite scroll: An automatic feature that loads more products when the customer scrolls past the set collection 'Products per page'
- Traditional pagination: Contains a certain amount of products per page and provides numbered links at the base of the page to access each additional collection page
Text color
Choose a custom color for the text
Text color hover
Choose a custom color for the text hover
Button text color *
Choose a custom color for the button text hover
Line color
Choose a custom color for the lines and borders
Section
Show image sizes *
Displays the minimum recommended width for each image. If applicable, the height* will display after the width. Size is displayed in the Theme Customizer only, customers will not see this.
* NOTE: Height is approximate, and the actual height is dependent on the individual screen. Learn more
Full width *
The option of being as wide as the screen or only as wide as the content container
Background color
Choose a custom color for the background
Background color gradient
Choose a custom gradient for the background
MOBILE
Top padding
Add padding to the top of the section on screens less than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 5 to a maximum of 60px
Bottom padding
Add padding to the bottom of the section on screens less than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 5 to a maximum of 60px
Bottom margin
Add a margin to the bottom of the section on screens less than 768px wide. Margins are applied to the outside of the container. -240px is the minimum, and it steps up by 5 to a maximum of 60px
DESKTOP
Top padding
Add padding to the top of the section on screens larger than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 5 to a maximum of 60px
Bottom padding
Add padding to the bottom of the section on screens larger than 768px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 5 to a maximum of 60px
Bottom margin
Add a margin to the bottom of the section on screens larger than 768px wide. Margins are applied to the outside of the container. -240px is the minimum, and it steps up by 5 to a maximum of 60px
Add a bottom border
A 1px border will be added between the 'Bottom padding' and the 'Bottom margin'
* NOTE: May not be available on all sections, blocks or templates