How to add Custom CSS to specific sections on specific pages

gomezmau · ‎03-10-2023

Hello community!

I am using the Sense template version 3.0.0 and I want to modify several sections on a specific page only, using the custom CSS option. However, when I modify them, changes are applied to all other pages that uses that same section.

For example I want to modify on a specific page:

1. Collection Banner font size + background color

And I successfully do so by placing this custom CSS

h1.collection-hero__title {
font-size: 25px;
text-align: center;
}
.collection-hero{
background: #EDE0E0;
}

However, changes should be applied to one specific page only and not across the whole site where the same collection/product grid is used.

NOTE: I have attached a file so you can see this

Can anyone guide me on how to do this? I have searched and found examples on adding the Id name and class name of the page I want to modify but I fail to do so.

I am not code savvy at all, the changes I made where from hrs of searching 🙂 but can follow instructions.

Thanks a lot in advance for any help you can bring me.

Cheers

PageFly-Victor · ‎03-10-2023

Hi @gomezmau ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:

Step 1. Go to Online Store -> Theme -> Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before </body> :

{% if collection.url == "/collections/juguetes-y-muebles-para-ninos" %}
  <style>
h1.collection-hero__title {
font-size: 25px !important;
}
.collection-hero{
background: #EDE0E0 !important;
}
.collection-hero__text-wrapper{
    text-align: center;
}
.collection-hero__description.rte {
    max-width: 100% !important;
}

  </style>
{% endif %}

This only changes for the page whose path you specified. The rest of the pages will not be affected

Hope my answer will help you.

Best regards,

Victor | PageFly

View solution in original post

shraddha_patel · ‎03-10-2023

Hello,

Without store url I am not able to send you the exact class or id of your page. But can suggest you the way. You may find your <body> tag in inspect element [Right click on your site page > Find option inspect > search for body tag in inspect html] and can use a class which is template specific.

For example : On product page there might be class 'template-product' added or on cart page there might be class 'template-cart' added.

This is theme specific so you have to check it or send me url of the page so I can give yout the exact class. After finding class place it before this css.

For example -

.template-product h1.collection-hero__title {
font-size: 25px;
text-align: center;
}
.template-product .collection-hero{
background: #EDE0E0;
}

Need more help with theme customization and store development ? You can Reach me here
Or Text me

gomezmau · ‎03-10-2023

hi Shraddha!

Thanks alot for your prompt response.

I would appreciate if you could provide the exact details from the Url I provided

https://www.minimaall.com/collections/juguetes-y-muebles-para-ninos

This is the website main url

www.minimaall.com

shraddha_patel · ‎03-10-2023

Add below css instead of your old one. Try it and let me know that worked or not.

#shopify-section-template--16107775721693__main-collection-banner h1.collection-hero__title {
font-size: 25px;
text-align: center;
}
#shopify-section-template--16107775721693__main-collection-banner .collection-hero{
background: #EDE0E0;
}

Need more help with theme customization and store development ? You can Reach me here
Or Text me

gomezmau · ‎03-11-2023

Hi Shraddha_patel,

Thanks a lot for you support as well. I tried the CSS code you provided but unfortunately it does not work.

I just don't know how to Custom CSS for a single page only.

Thanks again.

shraddha_patel · ‎03-14-2024

Hello @gomezmau ,

The store url seems unavailable at the moment [ I have tried www.minimaall.com ]. Could you please send updated store url or check the previous one and correct it. I will check why it's not working and help you to make that work.

Thank you

Need more help with theme customization and store development ? You can Reach me here
Or Text me

tim_wilfreds · ‎03-13-2024

Hi Shaddha - would you mind doing this for my own?

Im looking to set a color background color to the section on my homepage "tiktok"

thanks in advance!!

BW,

Tim

wilfreds.shop

Tim Fisher, from wilfreds.shop

shraddha_patel · ‎03-14-2024

Hello @tim_wilfreds ,

I will help you with this but not sure which section you've mentioned. I have checked the store "wilfreds.shop" but couldn't find any section related to "tiktok" on home page. Can you please double check the section name or type and make sure the section you're referring is on live site. If it's in development theme please share preview url to check.

Thank you

Need more help with theme customization and store development ? You can Reach me here
Or Text me

PageFly-Victor · ‎03-10-2023

Hi @gomezmau ,

Could you please share URL and your store password if it enabled? So that we can help you.
Thank you.

gomezmau · ‎03-10-2023

hi PageFly-Victor!

Thanks alot for your quick reply.

I would appreciate if you could provide the exact details from the Url:

https://www.minimaall.com/collections/juguetes-y-muebles-para-ninos

This is the website main url

www.minimaall.com

PageFly-Victor · ‎03-10-2023

Hi @gomezmau ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:

Step 1. Go to Online Store -> Theme -> Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before </body> :

{% if collection.url == "/collections/juguetes-y-muebles-para-ninos" %}
  <style>
h1.collection-hero__title {
font-size: 25px !important;
}
.collection-hero{
background: #EDE0E0 !important;
}
.collection-hero__text-wrapper{
    text-align: center;
}
.collection-hero__description.rte {
    max-width: 100% !important;
}

  </style>
{% endif %}

This only changes for the page whose path you specified. The rest of the pages will not be affected

Hope my answer will help you.

Best regards,

Victor | PageFly

gomezmau · ‎03-11-2023

Hi PageFly-Victor,

Thank you very much for this, it nailed it perfectly and I took the same parameters to modify other pages and sections too, it helped a lot, thank you very much.

If its not too much asking, I was wandering if you could help me out with these 2 inquiries more too?

1. How can I change the text displayed in the "Buy it now" button across the whole site? It displays "Comprar ahora" and I would like to modify the text. If you could show me how to do it on this page, then I can manage and do it for others too:

https://www.minimaall.com/products/baguira-mesa-de-comedor

2. Is there a way that I could modify the Custom CSS and manage to do the same as my initial question, instead of modifying the code of the theme? I ask this because supposedly Shopify enabled this Custom CSS in order for us to keep updating the Theme as time passes by and if we modify the code, then the theme wont update.

Thanks a lot for you great help and support!

How to add Custom CSS to specific sections on specific pages

How to add Custom CSS to specific sections on specific pages

Community Blog Articles