Re: How to hide sections on different pages using the same template

How to hide sections on different pages using the same template

abmhr
Shopify Partner
15 1 0

Hi! 

I have to different pages using the same lame standard pages template.

If i now implement a section on one of the pages it will automatically be shown on the other one.

I now thought I'd be smart and implement a code in the theme.liquid basically like this

{% if template contains 'page' and page.handle == 'your-page-handle' %}
<style>
.hide-featured-collection {
display: none !important;
}
</style>
{% endif %}

But this does not seem to work. Do you have any idea, how i could establish this without creating different templates?

Thank you!


Replies 10 (10)

Shadab_dev
Shopify Partner
631 39 70

So yes, creating custom sections or editing the already made sections you are using to include two more options of hidi g the section on specific devices. Will be like a checkbox option in liquid settings and you can show/hide with css.

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
abmhr
Shopify Partner
15 1 0

Hi! And what would be the right code for it? With the one I provided it didn’t work.

Shadab_dev
Shopify Partner
631 39 70

Are you using dwan or any free themes provided by Shopify??

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
abmhr
Shopify Partner
15 1 0

Yes, I’m using the origins theme

Shadab_dev
Shopify Partner
631 39 70

All right. I will update you with the code and the directions.

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
abmhr
Shopify Partner
15 1 0

Thank you! Let me know the code below please 🙂

Shadab_dev
Shopify Partner
631 39 70

Okay. So i got this. Let me guide you through this.

So open your code editor and for any section that you want this feature in to hide or show section on specific devices, follow these steps.

I tried this on rich-text section. So on the code editor i opened rich-text.liquid file and coded these under section settings. 

Shadab_dev_0-1727333350082.png


So just after settings: [  paste this code
{
"type": "checkbox",
"label": "Hide Section on Desktop",
"id": "hide-on-desktop",
"default":false
},
{
"type": "checkbox",
"label": "Hide Section on Mobile",
"id": "hide-on-mobile",
"default":false
},

 

This will give you an option like this

Shadab_dev_1-1727333425683.png


Secondly at the top of your section under stylesheet tag add this 
For desktop
{% if section.settings.hide-on-desktop %}
.section-{{section.id}}{
display:none;
}
{% endif %}
{% if section.settings.hide-on-desktop == false %}
.section-{{section.id}}{
display:block;
}
{% endif %}

For mobile
@media screen and (max-width: 767px){
{% if section.settings.hide-on-mobile %}
.section-{{section.id}}{
display:none;
}
{% endif %}
{% if section.settings.hide-on-mobile == false %}
.section-{{section.id}}{
display:block;
}
{% endif %}
}


Also in the section container add this under the classes section-{{section.id}}

Shadab_dev_2-1727333576910.png

 

This should do it. I hope i was able to explain. Things get tough when explaining like this. if you get it fine, if not you can try reaching out to me by email and i shall guide you through on a call. Or you can get me a collaborator access and tell me the sections you want this for and i shall do it for you.


 



Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.
abmhr
Shopify Partner
15 1 0

Thank you! I’ll try it asap. How do I find the sectionID for the featured collection? 

abmhr
Shopify Partner
15 1 0

Hi again! Thank you for your assistance. However, I didn’t manage to make it work with your solution. I found a work-around using an if-condition asking the path and adjusting the style accordingly. Also using a condition that’s also doing the same before the {%schema%} referencing to the condition above.

thank you though for your time!

Shadab_dev
Shopify Partner
631 39 70

Well great if it worked out for you. All is well that ends well.

Buy me Coffee, if you feel i was helpful. Email Me or WhatsApp me for any help with shopify theme customizations or any project in web dev. If this is helpful, please Like and Accept the solution.