To customize your filter layout

📖

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.

On this page

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 SSR version and other numbered versions:

SSR V1/V2/V3
Desktop layout (horizontal + vertical) Vertical layout

Horizontal layout
Mobile layout Mobile layout
Settings Settings

💡

The positional layouts have been grouped up on our SSR version due to some changes that allow users to directly change the filter layout without the need to run their theme setup.

To configure your filter layout

SSR:

When you first set up a new theme with the Boost app, the default value is ' Default - Left side'.
After the theme is integrated 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 support@boostcommerce.net 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 support@boostcommerce.net.