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

There are 2 options for filtering, tag based and storefront filtering.

Storefront Filtering

Storefront filtering is set up the Search & Discovery app and is based on variants, availability, pricing, type, vendor, and other content.  To use this method, disable Enable tag based filters. 

Tag Based

Tags can be used for a number of reasons, but to use them to filter products you must follow a simple structure: Group_Title

Group

Title

Product Tag

Color

Red

Color_Red

Size

L

Size_L

Gender

Male

Gender_Male

 

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 'Group' text preceding the '_' from the product tag or 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 'Group' or 'Label' will be the bolded text above the list or dropdown & the 'Title' is the list or dropdown item. Click the filters to see the relationship with one another.

Search & Discovery Filter Label

'Shirts' Product Tag

'Filter 1-3' Input Text to Use

Color

Color_Red

Color

Color

Color_White

Color

Color

Color_Blue

Color

Size

Size_Small

Size

Size

Size_Medium

Size

Size

Size_Large

Size

Gender

Gender_Male

Gender

Gender

Gender_Female

Gender

 

Using the tags & 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':

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 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 'Color_Red' tag or 'Red' storefront filter will be available in the remaining dropdowns. After you hit 'Search', you will go to either:
    • /collections/shirts/color_red
    • /collections/shirts?filter.v.option.color=Red
  • Select Shirts + Red + XL: 'Gender' filters in 'Shirts' that include the 'Color_Red' AND 'Size_XL' tags or storefront filters will be available in the last dropdown.  After you hit 'Search', you will go to either:
    • /collections/shirts/color_red+size_xl
    • /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 or storefront filters will be available for the search.  After you hit 'Search', you will go to either:
    • /collections/shirts/color_red+size_xl+gender_male
    • /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.

 

Enable heading *

To accommodate customizations using other sections and headings, you can opt to exclude the default heading

 

Heading

Title of the section or page, either default or custom

 

Use h1 tag

For SEO purposes, set the 'Heading' to use an h1 tag. NOTE: This should only be used once per page

 

Heading size

Set the heading size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 96px

 

Subheading

Secondary title of the section or feature

 

Subheading size

Set the subheading size with the slider. 12px is the minimum, and it steps up by 6 to a maximum of 96px

 

Text *

A text block for basic formatting including bold, italic & linked text

 

Text color

Choose a custom color for the text

 

Text hover color *

Choose a custom color for links when hovered over

 

Text alignment

Text can be aligned to the left, right or centered to the container

 

Content width

The design is based on a 12 column, 1200px wide layout. Refer to the following table to reference content widths:

Setting

Desktop Width

Mobile Width

33%

380px

100%

50%

580px

100%

66%

780px

100%

75%

800px

100%

 

Horizontal position

After setting the content width, content can be aligned to the left, right or centered

 

Vertical position

After setting the content width, content can be aligned to the top, bottom or middle

 

Desktop/Mobile/Custom 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

 

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 Desktop/Mobile Width

Full width checked

100%

1900px/600px

Full width unchecked

1180px

1180px/600px

 

The height will determine the overall width of the background image.  The following would be used to determine the actual necessary width of an image:

Screen Width x Height x Image Ratio = Desired Width

 

Height

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

Some sections may have Desktop & Mobile options:

  • Desktop:  Used on screens larger than 768px
  • Mobile: Used on screens smaller than 768px

 

Overlay color

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

 

Overlay gradient

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

 

Overlay 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%

 

* May not be available in all Banners

 

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'

 

Text color

Choose a custom color for the text

 

Text hover color

Choose a custom color for links when hovered over

 

Dropdown line color

Choose a custom color for the dropdown border & arrow

 

Dropdown background color

Choose a custom color for active select & dropdown background color

 

Dropdown background opacity

If set to 0%, color will only be visible when the select is active. 0% is the minimum, and it steps up by 5 to a maximum of 100%

 

Button

Customize the text for the button. By default it will be 'Search'. The button text color will be assigned by the following as they are assigned:

  • Default Theme Settings > Buttons > Text color
  • Banner > Overlay color
  • Section > Background color

 

Outline button

Invert the button to use a frame with no background

 

Section

Lazy load images *

Enable for "above the fold" images.  Disable for any image that is not visible on the initial page load

 

Background color

Choose a custom color for the background

 

Background 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 10 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 10 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. 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 768px 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 768px 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 768px 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'

 

* May not be available in all Sections

 

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