Removing Custom Metafield content from specific collection pages

ARDI1960 · ‎01-21-2021

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

PeanutButter · ‎01-25-2021

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

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es

View solution in original post

KetanKumar · ‎01-21-2021

@ARDI1960

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

ARDI1960 · ‎01-22-2021

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?

PeanutButter · ‎01-22-2021

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?

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es

ARDI1960 · ‎01-22-2021

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?

PeanutButter · ‎01-22-2021

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?

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es

PeanutButter · ‎01-25-2021

hi @ARDI1960 did you fix the issue?

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es

ARDI1960 · ‎01-25-2021

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.

PeanutButter · ‎01-25-2021

hi @ARDI1960, can I request collaborator access to your store to take a look at the code?

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es

ARDI1960 · ‎01-25-2021

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!

PeanutButter · ‎01-25-2021

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

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es

Removing Custom Metafield content from specific collection pages

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links