Solved

How can I change a single page's background color on my website?

aliciavterrible
Excursionist
14 1 4

Hi there, hoping someone can please help. I have tried and tried to do it myself but just cannot figure it out!

 

I would like the background of this page to be changed to colour ffc0cb - just this page only, the Disney Princess page, not the rest of the site.

 

Here's the link: https://40565c-2.myshopify.com/pages/princess-boutique
PW: LSOHC

 

Many thanks in advance 🙂

Accepted Solution (1)
aliciavterrible
Excursionist
14 1 4

This is an accepted solution.

I have fiddled some more and have managed to get it working perfectly, adding separate rules for each div

 

{% if page.handle == "princess-boutique" %}
<style>
.page-content {
background: #ffc0cb !important;
}
.index-section {
background: #ffc0cb !important;
}
.shopify-section {
background: #ffc0cb !important;
}
.main-content {
background: #ffc0cb !important;
}
.image-wrap {
background: #ffc0cb !important;
}
</style>
{% endif %}

 

 Thanks again for your help.

https://40565c-2.myshopify.com/pages/princess-boutique
PW: LSOHC

View solution in original post

Replies 6 (6)

techlyser_web
Shopify Partner
1689 310 327

Hello @aliciavterrible 
Can you share page URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
aliciavterrible
Excursionist
14 1 4

Thanks for replying  🙂

It's https://40565c-2.myshopify.com/pages/princess-boutique
Password: LSOHC

Moeed
Shopify Partner
3947 999 1245

Hey @aliciavterrible 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

{% if page.handle == "disney-princess" %}
<style>
.collection-content {
    background: #ffc0cb !important;
}
</style>
{% endif %}

RESULT:

Moeed_0-1708776961111.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
aliciavterrible
Excursionist
14 1 4

Thank you so much, I have added the code to the theme.liquid file but it didn't make any change on the front end..?? Sorry to be a pain, I REALLY appreciate your help.

aliciavterrible
Excursionist
14 1 4

I changed the code a little:

{% if page.handle == "princess-boutique" %}
<style>
.page-content {
background: #ffc0cb !important;
}
</style>
{% endif %}

And I can see it's changed some of the containers to the correct background colour, but there's still black where it shouldn't be. Is there another little bit of code that will make it work 100%? Thanks again 🙂

aliciavterrible
Excursionist
14 1 4

This is an accepted solution.

I have fiddled some more and have managed to get it working perfectly, adding separate rules for each div

 

{% if page.handle == "princess-boutique" %}
<style>
.page-content {
background: #ffc0cb !important;
}
.index-section {
background: #ffc0cb !important;
}
.shopify-section {
background: #ffc0cb !important;
}
.main-content {
background: #ffc0cb !important;
}
.image-wrap {
background: #ffc0cb !important;
}
</style>
{% endif %}

 

 Thanks again for your help.

https://40565c-2.myshopify.com/pages/princess-boutique
PW: LSOHC