How to find these settings...
- Online Store
- Customize (Theme Editor)
- Collections
- Default collection
- Collection page
Recommended reading
In this section...
Text
Enable heading
For SEO purposes, you can choose to disable this heading, and add an h1 tag to another section
Heading outline
Text defaults to the solid state, but can be customized with 3 outline thicknesses
Heading size
Set the heading size with the slider. 18px is the minimum, and it steps up by 6 to a maximum of 96px
Subheading
Secondary title of the section or feature
Subheading outline
Text defaults to the solid state, but can be customized with 3 outline thicknesses
Subheading size
Set the heading size with the slider. 18px is the minimum, and it steps up by 6 to a maximum of 96px
Text color
Choose a custom color for the text
Text color hover
Choose a custom color for the text hover
Line color
Choose a custom color for the lines and borders
Options
Enable sticky options
When enabled, adds a fixed content bar displayed at the bottom of the screen. This bar will display:
- Breadcrumbs
- Sorting
- Filters
Enable filtering
Displays the available product filters for the collection
Swatch layout
Choose how to display filter swatches:
- Text: Display as a standard filter, with text and a checkbox
- Colors: Show colors based on the name of the color. If a color cannot be associated with an 'HTML Color Name', the swatch will default to white.
-
Custom image: Create your own image to associate with the variant:
- Images MUST be a PNG, not a JPEG
- The file name MUST match the variant title. Example, a variant color of 'None Black' would require a file to be title and formatted like 'none-black.png'
- Recommended image size is 140 x 140px
- Upload the file to Content > Files
Enable rounded swatches
Swatches can be sharp edged squares or rectangles, or rounded circles or ovals
Hide swatch labels
When checked, swatch labels will ne hidden
Hide disabled filters
When checked, disabled filters will be removed from the list
Enable breadcrumbs
Display a site navigation showing visitors where they are on a site's hierarchy of content
Enable sorting
Display sorting options. Sorting allows the user to list the products in the following orders:
- Featured
- Best Selling
- Oldest to newest
- Newest to oldest
- Lowest price to highest
- Highest price to lowest
- Alphabetically by product title
- Reverse alphabetically by product title
Lazy load image(s)
Disable for "above the fold" images. Enable for any image that is not visible on the initial page load
Show collection image
Display the collection image, if available
Image height
The image has 4 options for display:
- Small: The image will be 25% of the height of the screen
- Medium: The image will be 35% of the height of the screen
- Tall: The image will be 50% of the height of the screen
- Original aspect ratio: Uses the height of the image
Focal point
Similar to setting a focal point on a theme image, background images can specify the main focus of the image
Insta filter
App like filters can be applied to your images
Show description
Display the collection description, if available
Products per page
Set the total number of products per page. 12 is the minimum, and it steps up by 1 to a maximum of 50
Desktop products per row
Set how many products are displayed per row on screens larger than 960px wide. Rows default to 2 on smaller screens. 2 is the minimum, and it steps up by 1 to a maximum of 5
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
Section
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 640px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom padding
Add padding to the bottom of the section on screens less than 640px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom margin
Add a margin to the bottom of the section on screens less than 640px wide. Margins are applied to the outside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
DESKTOP
Top padding
Add padding to the top of the section on screens larger than 640px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom padding
Add padding to the bottom of the section on screens larger than 640px wide. Padding is applied to the inside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Bottom margin
Add a margin to the bottom of the section on screens larger than 640px wide. Margins are applied to the outside of the container. 0px is the minimum, and it steps up by 10 to a maximum of 60px
Add a bottom border
A 1px border will be added between the 'Bottom padding' and the 'Bottom margin'
PROMOTION CONTENT BLOCKS
Access content blocks using black arrow next 'Collection page'
Collection
Use the collection picker to assign the promo to a particular collection. If no collection is assigned, the promotion will appear on each collection page
Display after X products
Set the placement of the promo based on the number of products in the collection. Example: If 14 is entered, the promotion will appear after the 14th product
Text
Add text to describe or highlight the promo
Link
Add a link using the link picker or type your own
Link text
Add a text to describe what action to take for the link
Text position
There are 4 text layout options:
- Split
- Top
- Center
- Bottom
Text color
Choose a custom color for the text
Background color
Choose a custom color for the background
Background color opacity
When a 'Background color' has been selected, control the opacity with the slider. 0% is the minimum, and it steps up by 1 to a maximum of 100%
Desktop image
The desktop image will be displayed when the container is greater than 640px wide. NOTE: Background images can use Focal Points to specify the main focus of the image. Learn more about Focal Points
Insta filter
App like filters can be applied to your images
Mobile image
The mobile image will be displayed when the container is less than 640px wide. NOTE: Background images can use Focal Points to specify the main focus of the image. Learn more about Focal Points
Insta filter
App like filters can be applied to your images
* NOTE: May not be available on all sections, blocks or templates