Skip to main content
All CollectionsFilterFilter Layout
To customize your filter layout
To customize your filter layout

In this article, we will show you how to customize your filter layout

Connell Nguyen avatar
Written by Connell Nguyen
Updated over a week ago

๐Ÿ“– A filter layout defines your filter arrangement on your theme pages. An appropriate filter layout will speed up the customer product filtering process, resulting in more efficient touchpoints.

Our app provides 2 main layouts for your filters with various settings supporting both desktop and mobile versions and allows you to switch the position of your filter layout.

โš ๏ธ Filter layouts integrated into your theme by our app are only displayed on collection pages associated with our filter trees.


What is a Filter layout?

A filter layout is how our filter is displayed on your storefronts. The arrangement can take different positional layouts: horizontal vs vertical. It can also appear differently: show-all-option vs collapsed. You can set the filter layout up according to your store's look and business strategy.

Currently, the filter layout setting differs slightly between our newest TURBO version and other numbered versions:

TURBO

V1/V2/V3

Desktop layout (horizontal + vertical)

Vertical layout

Horizontal layout

Mobile layout

Mobile layout

Settings

Settings

๐Ÿ’ก The positional layouts have been grouped on our TURBO version due to some changes that allow users to change the filter layout directly without running their theme setup.


To configure your filter layout

TURBO:

When you first set up a new theme with the Boost app, the default value is 'Default - Left side'.

After integrating the theme with Boost, you can adjust the layout position using the standard setting options. To change your layout position, you don't need to set up a new theme with your preferred layout position as in the last version. Instead, you can:

  1. Navigate to Filters > Filter layout > Desktop layout

  2. Select a layout you want to change

  3. Save settings and check the new layout on your storefront

โ€‹

V2/V3:

When you first set up a new theme with the Boost app, you will be asked how to place your filter trees:

Vertical vs Horizontal

You can choose between a vertical layout or a horizontal layout. You cannot alter the layout position using normal setting options after Boost's theme integration. You have to set up a new theme with your preferred layout position if you want to switch the filter's position.

To switch the position of the filter layout

To change the position of your filter layout, you need to create/duplicate your desired theme and run the setup process again with it. In the setup process, you will choose the preferred alternative position that you want the filter layout to change to.

  1. Duplicate the preferred theme that you want to change the filter layout

  2. Within the app's admin, go to Theme > Theme setup to set up a new theme.

  3. In the Theme Setup section, click Set up new theme.

  4. Select your duplicated theme, tick all the features you want to install and go Next

  5. Select your wanted filter position: Left column or On top

  6. Run setup. Wait until the process is complete

  7. Preview your settings and consider publishing the theme when it satisfies your requirements

To customize your current layout

  1. From the appโ€™s dashboard, go to Filter > Filter layout

  2. Select the filter layout position the theme is using: Vertical layout or Horizontal layout. Utilize our previews and select your preferred setting

  3. [Optional] Visit the Mobile layout tab to select your preferred layout on mobile

  4. [Optional] Visit the Settings section to allow your filter layout to stick when your customers scroll up and down through the product list. Toggle the Sticky filter on Desktop and Sticky filter on Mobile buttons to implement a sticky filter layout on desktop and mobile versions

  5. Click Save settings

  6. Check how the new filter layout appears on your storefront

Note: These settings work with the latest versions of the new front-end lib V2 and V3 on our default theme or the supported themes from our library. You can contact us at [email protected] if these settings do not work with your theme.

V1:

By default, our App Lib V1 allows you to change the filter layout without setting up a new theme.

To customize filter layout on App Lib V1

  1. From Shopify Admin > Online store > Themes.

  2. Select [Target Theme] > Customize.

  3. In the top drop-down bar:

    • To customize the collection page, select Collections > Default collection > Collection pages on the left sidebar.

    • To customize the search page, select Others > Search > Search pages on the left sidebar.

  4. Switch the filter's layout from vertical to horizontal, or vice versa.

  5. Tick the Sticky Filter on Desktop and Sticky Filter on Mobile buttons to implement a sticky filter layout on desktop and mobile versions.

  6. Utilize our previews and select your preferred filter layout setting as:

    • Filter Layout Default

    • Filter Layout Collapse

    • Filter Layout Slide (Only work on Vertical Layout)

  7. Click Save.

  8. Check how the new filter layout appears on your storefront.


โ€‹

If you have any questions or need further assistance, please do not hesitate to reach out to our dedicated support team at [email protected].

Did this answer your question?