Solved

How to add Custom CSS to specific sections on specific pages

gomezmau
Excursionist
14 1 2

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

 

 

Accepted Solution (1)
PageFly-Victor
Shopify Partner
7865 1785 3056

This is an accepted solution.

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

PageFlyVictor_0-1678469699061.png

 

Hope my answer will help you.

Best regards,

Victor | PageFly

View solution in original post

Replies 11 (11)

shraddha_patel
Shopify Partner
155 24 23

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
Excursionist
14 1 2

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
Shopify Partner
155 24 23

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
Excursionist
14 1 2

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
Shopify Partner
155 24 23

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
Tourist
11 0 1

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
Shopify Partner
155 24 23

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
Shopify Partner
7865 1785 3056

Hi @gomezmau ,

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

gomezmau
Excursionist
14 1 2

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
Shopify Partner
7865 1785 3056

This is an accepted solution.

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

PageFlyVictor_0-1678469699061.png

 

Hope my answer will help you.

Best regards,

Victor | PageFly

gomezmau
Excursionist
14 1 2

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!