Customizing your filter layout

A filter layout defines how your filters are arranged on a theme. A suitable filter layout will speed up the customer product filtering process, resulting in more efficient touchpoints.

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

Note: Filter layouts generated by our app are only displayed on collection pages containing the filter trees which are set up by our app.

On this page

Customize your current filter layout

When setting up Product Filter & Search on a certain theme, the app will ask you to select where you want to place your filter trees. 

You might want a vertical layout or a horizontal layout. After the setup process finishes, you cannot alter the position of your filter layout once it has been successfully applied to the theme. If you want to switch from a vertical layout to a horizontal layout or vice versa, you need to set up a new theme with your preferred position of the filter layout. You can visit the second section of this article to have detailed instructions.

To customize your current filter layout:

  1. From the app’s admin, go to Filter  > Filter layout.

  2. Select your current filter layout: 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 only work with the latest versions of the new front-end lib V2 on our default theme or on the supported themes from our library. You can contact us at support@boostcommerce.net if these settings do not work with your theme.

Switch the position of your filter layout

When you want to turn the vertical filter layout into a horizontal one, you cannot do it instantly by visiting Filter > Filter layout from the app’s admin. One new theme needs to be first set up and you will apply it with your desired position of the filter layout. Then you can consider customizing the filter layout to your liking by following the instructions in the first section.

To switch your filter layout from vertical to horizontal and vice versa:

  1. From the app’s admin, go to Theme  > Theme setup to set up a new theme.
  2. In the Theme Setup section, click Set up new theme.
  3. Click I have duplicated my theme. 
    4. Tip: It is recommended that you make a backup copy of the current theme and apply the new filter layout with the duplicate. As a result, you can always publish the original when you are not satisfied with the new filter layout.
  4. In the Select a theme to set up Filter & Search on section, choose a theme that you want to set up the filter layout with a preferred position.
  5. In the Select a filter position section, choose your preferred position.
  6. Click Run Setup. Wait until the process completes.
    7. Tip: When you change the filter layout of your current theme, you will get a warning because this change will be published right on your storefront, which may have unfortunate display errors. We recommend that you run the setup on unpublished themes.
  7. Preview your settings and consider publishing the theme when it meets your needs.

Customize filter layout on App Lib V1

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

To customize filter layout on App Lib V1:

  1. From Shopify App 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.