Vertical filters section

This section was introduced in version 2.0

The Vertical filters section is the vertical counterpart of the Filters section. The two sections are functionally identical, however the Vertical filters section allows for more visual customization.

Adding filters

The first thing that you need to make sure of is to have product filters to your collections. Please take a moment to read through the guide here on how to set those up, as they are going to be necessary (and also important for your store in general).

Then, to display the filters, follow the respective section of the Filters section.

Section settings

Vertical filters

Background Image: Upload a background image to enhance the visual appeal of your vertical filters.

Overlay background: Add a gradient overlay to your background image to enhance readability and aesthetic appeal.

Content

Heading: Add a title for the section (optional).

Heading size: Adjust the size of your heading to make your message stand out. Available options: Small, Normal, Large, Extra large, and Extra extra large.

Description: A brief description that appears below the title.

Button label and link: Customize the button in the Vertical filter section by setting a label and linking it to any part of your store, such as a product page, contact form, or another destination.

Layout

Make section fullwidth: This option, when enabled, will turn the section into a fullwidth one.

Content width: Adjust the width of your content within the section to optimize readability and visual balance. Only applies on desktop. The maximum width (in percentage) of the call to action’s content (heading and description).

Filters

Position: Choose whether to display the filters on the left or right side of the page.

Filters heading: Add a custom title for the filters section (optional).

Collections: You can optionally have the first filter dropdown be based on a set of hand-picked collections. This becomes necessary if you have more than 5000 products, as Shopify doesn’t display filters in collections with more than 5000 products.

Collections label: Customize the text of the collections filter.

Collection tooltip: Optional text to appear as tooltip on the collections filter.

Mobile layout

Background image: Add an image that will appear in the background when viewed on mobile devices.

Heading size: Select the heading size (Small, Normal, Large, etc.) specifically for the mobile view.

Colors

Color scheme: Select one of the predefined color schemes as defined in Theme settings > Colors. For more information regarding the color schemes please refer to our article about creating your own color scheme.

Filters color scheme: Controls the color scheme of the filters panel. Select one of the predefined color schemes as defined in Theme settings → Colors.

Section spacing

The section spacing settings gives you the option to adjust the top & bottom section spacing values. Please note: If you select a color scheme with a background color, these settings will affect the spacing between the top or bottom of the section and the content of the section.

SEO

Heading tag: Select the appropriate heading level (H1, H2, or H3) based on how you want the section title to appear.

Visibility

Show section on desktop: Enable or disable the section’s visibility on desktop devices.

Show section on mobile: Enable or disable the section’s visibility on mobile devices.

Hide section if…: Enable this option when the section’s fields are bound to dynamic sources (i.e. metafields or metaobjects). The section will be hidden on the front-end if the most important field(s) are empty, i.e. when there is no meaningful output.