📖 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:
Navigate to Filters > Filter layout > Desktop layout
Select a layout you want to change
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.
Duplicate the preferred theme that you want to change the filter layout
Within the app's admin, go to Theme > Theme setup to set up a new theme.
In the Theme Setup section, click Set up new theme.
Select your duplicated theme, tick all the features you want to install and go Next
Select your wanted filter position: Left column or On top
Run setup. Wait until the process is complete
Preview your settings and consider publishing the theme when it satisfies your requirements
To customize your current layout
From the app’s dashboard, go to Filter > Filter layout
Select the filter layout position the theme is using: Vertical layout or Horizontal layout. Utilize our previews and select your preferred setting
[Optional] Visit the Mobile layout tab to select your preferred layout on mobile
[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
Click Save settings
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
From Shopify Admin > Online store > Themes.
Select [Target Theme] > Customize.
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.
Switch the filter's layout from vertical to horizontal, or vice versa.
Tick the Sticky Filter on Desktop and Sticky Filter on Mobile buttons to implement a sticky filter layout on desktop and mobile versions.
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)
Click Save.
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].