Shopify themes, liquid, logos, and UX
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 %}
Solved! Go to the solution
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:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
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:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
It worked! Many thanks for this
By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024