How to hide sections on different pages using the same template

[abmhr]

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!

[Shadab_dev]

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.

[abmhr]

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

[Shadab_dev]

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

[abmhr]

Yes, I’m using the origins theme

[Shadab_dev]

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

[abmhr]

Thank you! Let me know the code below please 🙂

[Shadab_dev]

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. 

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

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}}

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.


 

[abmhr]

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

[abmhr]

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]

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