Shopify themes, liquid, logos, and UX
Hello, I have custom image sections below my collection banner image for all of my collections. I would like to remove this section from certain collections and leave it on others.
I have used the following code in theme.css, to remove these sections entirely from my mobile site. and I am wondering how I can tweak it to remove the content from the collections I no longer desire (on desktop and mobile).
@_media screen and (max-width:749px) {
.custom-collection-section .custom__item {
display: none!important;
To clarify, I am happy that the section does not display on any collections in mobile, but I would like to remove this section from just a few desktop collections as well.
Link to a collection I would like to remove the custom image section from: https://earthquake-outdoor-power-equipment.myshopify.com/collections/rear-tine-tillers
Password: Prieth
Solved! Go to the solution
This is an accepted solution.
If you want to go the css way, you can add the collection handle to the as a <body> class and use that hide stuff for a specific collection
More info about this here https://www.shopify.com/partners/blog/92262598-creating-useful-css-hooks-in-liquid
Sorry for facing this issue, it's my pleasure to help us.
Welcome to the Shopify community!
and Thanks for your Good question.
i can see this code is working fine
Thank you for your response. you are correct, that code works for removing the section from mobile but I would like to also remove that section from specific pages on desktop. Is that possible?
Yes, it is possible
The way I would approach it however is not with css but with metafields.
As you are already using metafields, another collection metafield could be created to enable/disable the output of the current metafield data on a per collection bases.
Could you please send the liquid code that currently outputs the metafield data in the collections?
Hello,
That certainly sounds like the correct way to do it but I do not know the system well and could not locate where the collection page metafield code is located. Is it not effective to remove it with css?
Hi, to target specific collections by css you would need to have a css names with the collection handle, which most themes do not have.
Also, each time you created a new collection you would need to add css code if you want to hide the metafields for that collection.
Can you please share the following:
- password to your site (here or by PM)
- theme you are using
- how did you implement the metafields output in the collection? using an app or custom code in theme?
hi @ARDI1960 did you fix the issue?
Thank you for your response. I am using Debut Theme and the site password is "Prieth". I utilized a 3rd party to create the metafields and they suggested the Metafield's Guru App which is now being used on my site.
hi @ARDI1960, can I request collaborator access to your store to take a look at the code?
For the time being I am going to see if I can handle it before giving any more access. I was hoping it would be an easy css change. If I have still not solved the problem by the time my site is ready to launch I will reach out again. Thank you for your time!
This is an accepted solution.
If you want to go the css way, you can add the collection handle to the as a <body> class and use that hide stuff for a specific collection
More info about this here https://www.shopify.com/partners/blog/92262598-creating-useful-css-hooks-in-liquid
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024