Skip to main content

Advanced Filter

  • Updated

How to find these settings...

  1. Online Store
  2. Customize (Theme Editor)
  3. Add section
  4. Advanced Filter

Filter products using product tags or storefront filtering added in the admin. 

 

Recommended reading

In this section...

 

Overview

For a complete tag tutorial, check out Product Filters.  

Product tags are used to filter products within the Advanced Filter and the Collection Pages. Filter tags are added to the product admin and follow a simple structure: Group_Title

 Group Title Product Tag
Color Red Color_Red
Size XL Size_XL
Gender Male Gender_Male

 

Storefront filtering is set up in Online Store > Navigation and is based on variants, availability, pricing, type, and vendor.  To use this method, disable Enable tag based filters.

 

NOTE: Filters are case sensitive!

 

Using the tag group title above or the storefront filter title as an example, if a user selects the collection 'Shirts' from the first dropdown, additional dropdowns will be created for 'Color', 'Size' & 'Gender':

avenue-theme-advanced-filter.png

Collection ˅ Color ˅ Size ˅ Gender ˅
Shirts Red S Male
  White M Female
  Blue L  

 

Each filter is dependent on the previous

  • Select Shirts: The filter in 'Shirts' that match one of the tags 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 Color > Red will be available in the remaining dropdowns. After you hit 'Search', you will go to /collections/shirts/color_red or /collections/shirts?filter.v.option.color=Red
  • Select Shirts + Red + XL: 'Gender' filters in 'Shirts' that include the Color > Red AND Size > XL filters will be available in the last dropdown.  After you hit 'Search', you will go to /collections/shirts/color_red+size_xl or /collections/shirts?filter.v.option.color=Red&filter.v.option.size=XL
  • Select Shirts + Red + XL + Male: Products in 'Shirts' that include the Color > Red AND Size > XL AND Gender > Male tags will be available for the search.  After you hit 'Search', you will go to /collections/shirts/color_red+size_xl+gender_male or /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.

 

Text

Heading

Title of the section or feature

 

Subheading

Secondary title of the section or feature

 

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'

 

Button

Customize the text for the button. By default it will be 'Search'

 

Background

Show image

Include a background image

 

Image

The background image dimensions depend on 2 options:

  • Whether full width or container width.  Refer to Full width below
  • The height will depend on your Height settings below

NOTE: Background images can use Focal Points to specify the main focus of the image. Learn more about Focal Points

 

White text

When an image is chosen, you can uncheck this setting if you want the overlaid text to be the default color

 

Full width

The banner image and background color have the option of being as wide as the screen or only as wide as the content container. Refer to the following table to reference content widths & optimal image sizing:

Setting Desktop Width Minimum Image Width
Full width checked 100% 1900px
Full width unchecked 1200px 1280px

 

Height

The overall height of the section in relation to the height of the screen. 5% is the minimum, and it steps up by 5 to a maximum of 100%

 

Overlay

A color may be applied to background images to help the text clarity

 

Opacity

When an 'Overlay' color has been selected, control the opacity with the slider.  0% is the minimum, and it steps up by 5 to a maximum of 100%

 

Background color

If an image is not used as a background, you can choose between None, Primary & Secondary. The Primary & Secondary colors are set in the Theme Settings Color section

 

Collection Content Blocks

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 text preceding the '_' from the product tag or the title of the storefront filter. For more information on using product tags as filters, click here