Hide "gender" filter from certain collections on mobile

Solved

Hide "gender" filter from certain collections on mobile

PetitFox
Excursionist
20 0 6

Hello, I was looking for a way to hide a specific filter (gender) from certain collection pages (menino-2-6-anos, menina-2-6-anos, rapaz-7-12-anos and rapariga-7-12-anos).

 

I managed to get it to work on the desktop version by applying the code below in the theme.liquid just before the </head> tag, but it seems it's not working on the mobile version - I can still see the gender filter on those collections on mobile.

 

Can anyone help me adapt the code so it also works on mobile? I'm using the Dawn theme, and my website is petitfoxportugal.myshopify.com.

 

{% assign full_url = request.host | append: request.path %}
{% if full_url contains 'menino-2-6-anos' or full_url contains 'menina-2-6-anos' or  full_url contains 'rapaz-7-12-anos' or full_url contains 'rapariga-7-12-anos' %}
<style>
.disclosure-has-popup:has([aria-label="Género (0 selecionada)"]) {
    display: none!important;
}
</style>
{% endif %}

Captura de ecrã 2024-08-11, às 22.37.47.pngCaptura de ecrã 2024-08-11, às 22.38.02.png

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
10038 2387 3013

This is an accepted solution.

Hi @PetitFox 

Replace on this one. 

 

{% assign full_url = request.host | append: request.path %}
{% if full_url contains 'menino-2-6-anos' or full_url contains 'menina-2-6-anos' or  full_url contains 'rapaz-7-12-anos' or full_url contains 'rapariga-7-12-anos' %}
<style>
.disclosure-has-popup:has([aria-label="Género (0 selecionada)"]) {
    display: none!important;
}
.mobile-facets__details.js-filter:has([aria-controls="FacetMobile-1-template--23273162080605__product-grid"]) {
    display: none !important;
}
</style>
{% endif %}

 

And Save. 

Result:

Made4uoRibe_0-1723414906442.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

Replies 2 (2)

Made4uo-Ribe
Shopify Partner
10038 2387 3013

This is an accepted solution.

Hi @PetitFox 

Replace on this one. 

 

{% assign full_url = request.host | append: request.path %}
{% if full_url contains 'menino-2-6-anos' or full_url contains 'menina-2-6-anos' or  full_url contains 'rapaz-7-12-anos' or full_url contains 'rapariga-7-12-anos' %}
<style>
.disclosure-has-popup:has([aria-label="Género (0 selecionada)"]) {
    display: none!important;
}
.mobile-facets__details.js-filter:has([aria-controls="FacetMobile-1-template--23273162080605__product-grid"]) {
    display: none !important;
}
</style>
{% endif %}

 

And Save. 

Result:

Made4uoRibe_0-1723414906442.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
PetitFox
Excursionist
20 0 6

It worked! Many thanks for this