How do I target a single page for CSS customization?

Shopify Discussion
1

Hey there!

I’m trying to do some customizations with CSS but only on one page. I know I can target a section and an element individually…but how do I target a specific page?

In this particular instance, I want to customize a section on all 4 of my collection pages.

https://nuts-for-cheese.myshopify.com/collections/dairy-free-cheese

How would I target only the collection pages?
thank you in advance for any pointers!

2

Hello @CarrieT ,

It’s the GemPages Support Team and we are glad to assist you today!

You could please try using the condition for your code, for example:

{% if collection.handle == "dairy-free-cheese" %}

{% endif %}

You can add the code to the theme.liquid file and add you CSS code inside the tag:

Best regards,
GemPages Support Team

3

Hey there @GemPages !
Thanks for jumping in.
So how would I just add simple CSS?

For example…I have a custom CSS file and I’ve added:

/center text on bottom of page CTAs/
@media (max-width: 1000px){
.shopify-section–media-with-text .media-with-text__content {
justify-content: center!important;
text-align: center!important;
padding-top: 0px!important;
margin-top: -20px!important;
}
}

Now how would I target the page inside this custom code? Thank you!

4

Hi @CarrieT ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.liquid->paste the code below before :

{% if template contains 'collection' %}

{% endif %}

I hope it would help you
Best regards,

Kate | PageFly

5

Hey there @PageFly-Kate !
I appreciate you jumping in.

Is there no way to achieve this inside the CSS editor? instead of changing the liquid file? There must be a way to just add a selector to my CSS?
Thank you!!!

6

Hi @CarrieT ,

Because in your theme there is no specific class or ID on any page. If you edit the css for the Collection page, but inserting the code into the generic css file may affect other pages

7

Ahhh…got it.

That makes sense.
I tried your recommendation with the theme.liquid file and it worked great. :slightly_smiling_face:
Thank you!!!

8

Hi @PageFly-Kate !!!

Your solution worked great…thanks again for this. I was wondering if it’s possible to exclude a ‘media with text’ section from a collection? I’m now needing to use a ‘media with text’ section on the collection pages as a header but I’m unable to while I have this code for all sections within the collection page. Do you have any ideas on how to exclude one of the media with text sections?
Maybe some kind of
not: and then the section identifier?
Thank you SO much for any pointers :slightly_smiling_face:

9

Hi @CarrieT ,

I’m sorry but this is out of my scope. You may try contacting Shopify support or finding another expert regarding this issue.
Best regards,