How to find these settings...
- Online Store
- Customize (Theme Editor)
- Add section
- Advanced Filter
Filter products using product tags or storefront filtering added in the admin.
Recommended reading
In this section...
- Overview
- Settings
- Content width
- Options
- Section
- Content Blocks
Overview
NOTE: Filters are case sensitive!
In the Collection Content Blocks, first select a collection. This example will use the collection 'Shirts'. In the 'Filter 1-3' inputs, add the Search & Discovery Filters 'Label'.
Unsure of the available filters? Choose 'Shirts', click 'Search', and take a look at what is available in the left column. The 'Label' will be the bolded text above the list & the 'Title' is the list item. Click the filters to see the relationship with one another.
Search & Discovery Filter Label
'Filter 1-3' Input Text to Use
Color
Color
Size
Size
Gender
Gender
Using the labels above as an example, if a user selects the collection 'Shirts' from the first dropdown, additional dropdowns will be created for 'Color', 'Size' & 'Gender':
Collection ˅
Color ˅
Size ˅
Gender ˅
Shirts
Red
S
Male
White
M
Female
Blue
L
Each filter is dependent on the previous
- Select Shirts: The filters in 'Shirts' that match one of the filters in the 'Filter 1-3' inputs will be available in the remaining dropdowns. After you hit 'Search', you will go to /collections/shirts
- Select Shirts + Red: 'Size' & 'Gender' filters in 'Shirts' filtered with the ''Red' storefront filter will be available in the remaining dropdowns. After you hit 'Search', you will go to /collections/shirts?filter.v.option.color=Red
- Select Shirts + Red + XL: 'Gender' filters in 'Shirts' that include the storefront filters will be available in the last dropdown. After you hit 'Search', you will go to /collections/shirts?filter.v.option.color=Red filter.v.option.size=XL
- Select Shirts + Red + XL + Male: Products in 'Shirts' that include the storefront filters will be available for the search. After you hit 'Search', you will go to /collections/shirts?filter.v.option.color=Red filter.v.option.size=XL filter.v.option.gender=Male
Each dropdown can be used individually, but the first collection dropdown must be selected. Users will never land on an empty collection page.
Settings
Contain content
Confine content to the section boundaries. If unchecked, the main content may exceed the top and bottom height settings.
Horizontal alignment
If content does not occupy the full space, content blocks can be aligned to the left, right or centered
Vertical alignment
Align content blocks to the top, middle or bottom of the section
Mobile position
Select the position of the content on screens less than 768px wide. Choose from 1 of 2 options:
- Overlay: Content will remain on top of the background
- Below: Content will move below the background and default to Theme Setting > Colors
Content width
MOBILE
Set the width of the content on a screens less than 768px wide
DESKTOP
Set the width of the content on a screens larger than 768px wide. Max width is 1240px
Options
Horizontal form
By default, the dropdowns will layout side by side. Uncheck this setting to have them stack one of top of the other
First dropdown text
Choose the initial text to display in the first dropdown. By default it will be 'Select'
Remaining dropdown text
Choose the initial text to display in the remaining dropdowns. By default it will be 'Select'
Background color
Choose a custom color for the dropdown background
Button
Customize the text for the button. By default it will be 'Search'
Style
Choose 1 of 2 styles:
- Primary button
- Secondary button
Mobile Text/Heading alignment
Text can be aligned to the left, right or centered to the container on screens less than 768px wide
Desktop Text/Heading alignment
Text can be aligned to the left, right or centered to the container on screens larger than 768px wide
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
Background color
Choose a custom color for the background
Background color gradient
Choose a custom gradient for the background
Background/Overlay 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%
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'
Collection Block
Access content blocks using black arrow next 'Advanced filter'
Collection
Select the collection
Title
Customize the title for the collection. By default, the drop down listing will use the collection title
Filter 1-3
Add the title of the storefront filter. For more information on using product filters, click here
Text Block
Heading font
Choose either the 'Primary' or 'Secondary' heading font set in Theme Settings > Typography
Heading outline
Choose from 1 of 7 options:
- None: No outline will be applied
-
No background: An outline will be applied to the text, but the background will be transparent
- Thin
- Default
- Thick
-
Background: An outline will be applied to the text, and the background color will be applied
- Thin
- Default
- Thick
Heading size
Set the heading size with the slider. 18px is the minimum, and it steps up by 6 to a maximum of 240px
Bottom margin
Customize the bottom margin of the heading from the default to a dynamic value. -100px is the minimum, and it steps up by 5 to a maximum of 100px
Color
Choose a custom color for the heading
Responsive size
By default, text will resize based on the size of the screen. Uncheck this option to keep the text a consistent, static size. Useful when using negative margins on preceding sections
SUBHEADING
Sub title of the section or feature
Subheading font
Choose either the 'Primary' or 'Secondary' heading font set in Theme Settings > Typography
Subheading outline
Choose from 1 of 7 options:
- None: No outline will be applied
-
No background: An outline will be applied to the text, but the background will be transparent
- Thin
- Default
- Thick
-
Background: An outline will be applied to the text, and the background color will be applied
- Thin
- Default
- Thick
Sub heading size
Set the heading size with the slider. 18px is the minimum, and it steps up by 6 to a maximum of 240px
Bottom margin
Customize the bottom margin of the subheading from the default to a dynamic value. -100px is the minimum, and it steps up by 5 to a maximum of 100px
Color
Choose a custom color for the subheading
Text
A text block for basic formatting including bold, italic, formatted lists & linked text
Background Image Block
Image height
Enable section height
If enabled, the height will be determined by mobile & desktop settings below. Otherwise, the height will be determined by the image.
NOTE: Option may be dependent on the 'Contain content' setting
MOBILE
The height is a percentage of the height of the screen when viewed on device with screen less than 768px wide. 10% is the minimum, and it steps up by 1 to a maximum of 100%.
NOTE: Option may be dependent on the 'Contain content' or 'Enable section height' setting
DESKTOP
The height is a percentage of the height of the screen when viewed on device with screen greater than 768px wide. 10% is the minimum, and it steps up by 1 to a maximum of 100%.
NOTE: Option may be dependent on the 'Contain content' or 'Enable section height' setting
Overlay
Background color
Choose a custom color for the background
Background color gradient
Choose a custom gradient for the background
Background/Overlay 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%
Image
Lazy load image(s)
Disable for "above the fold" images. Enable for any image that is not visible on the initial page load
Desktop image
The desktop image will be displayed when the container is greater than 768px 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 desktop image
Mobile image
The mobile image will be displayed when the container is less than 768px 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 mobile image
* NOTE: May not be available on all sections, blocks or templates