How to add a hide filter button on mobile in Turbo theme?

Store Design
, , ,
1

I use Turbo and would like to add a button to hide filters in mobile only. The Theme developer has this in their Retina theme but not in Turbo. Has anyone added this type of button in Turbo to toggle the filters on and off?

filter.jpeg
filter.jpeg364×561 20.3 KB

2

@Michael_H_1_1 - we can use css to hide this button, can you please share this page link?

3

Hi @Michael_H_1_1 ,

Can you give me your page URL( with pass if your store password is enabled) so I can check it for you?

Kind & Best regards,
GemPages Support Team

4

Hello @Michael_H_1_1 ,

We are OneExperts from OneCommerce.

If you’re using the Turbo theme on Shopify and you want to add a button to hide filters on mobile devices only, you can achieve this by using some custom JavaScript and CSS. Here is an example of how to do this:

  1. In your Shopify admin, navigate to the theme editor.
  2. In the theme editor, navigate to the “Sections” folder and locate the “collection-template.liquid” file, click on it to open it.
  3. Find the section where the filters are located, it should look something like this:
{% include 'collection-filters' %}
  1. Add the following code snippet just after the above div to create a button

{{ ‘collection.filters.filter’ | t }}

  1. Next, navigate to the “Assets” folder, locate the “theme.scss.liquid” file and open it.
  2. Add the following CSS code to hide the filters by default on mobile screens:

@media (max-width: 767px) {
.filters

Hope this is helpful for you.

Please let us know if you need further clarification.

Best regards,

OneExperts by OneCommerce