Policy Page, background and text colour change

shopcheri · ‎12-17-2024

How do I change the background color and text colour of all policy page and contact us pages.

i want background colour: #FAF8F1

text colour: #D94F16

URL: shopcheri.co

password free

Made4uo-Ribe · ‎12-17-2024

Hi @shopcheri

Try this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

main#MainContent:has(.shopify-policy__container) {
    background: #FAF8F1;
    max-width: 100%;
    margin-bottom: -20px;
}

.shopify-policy__body {
    max-width: 560px;
    margin: auto;
}
.shopify-policy__title h1 {
    margin-top: 0;
    padding-top: .67em;
}

.shopify-policy__container * {
    color:  #D94F16;
}

.shopify-policy__body .rte p {
    margin-bottom: 0;
}

And Save.
Result:

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

zack_dev · ‎12-17-2024

hi

first step is to add html class to pages for this

you can add the following on theme.liquid.
Go to online store > next to themes click on three dots then edit code > under layout > theme.liquid

then insert {{ page.handle }} to <body tag so it looks like

<body class="{{ page.handle }} gradient"> .

Then we can add specific css to page.

- Helpful? Like or Accept solution, - Buy me Coffee ☕

-

Contact me

TheScriptFlow · ‎12-17-2024

Hi @shopcheri this is Qasim ready to help you.

- Need a Shopify Specialist? Chat on WhatsApp Or Email at info@thescriptflow.com

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral

- If my solution was helpful, mark it as a solution and hit the like button! And Wait Don't forget to Buy me a Coffee ☕

Guleria · ‎12-17-2024

Hello @shopcheri ,

Edit theme.liquid
search for </body>

here just before to it add this code

{% if request.path == '/policies/privacy-policy'  
   or request.path == '/policies/shipping-policy' 
   or request.path == '/policies/contact-information' %}
   <!-- Content or logic for the specified pages -->
   <style>
 #MainContent {
    background-color: #000;
}
#MainContent * {
    color: #fff;
}
</style>
{% endif %}

Regards
Guleria

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

shopcheri · ‎12-20-2024

facing same issue with your code adjustment:

the last line from ALL policy sections as well contact us page is being cut off.

please suggest how tot fix this issue.

Made4uo-Ribe · ‎12-17-2024

Hi @shopcheri

Try this one.

From your Shopify admin dashboard, click on "Online Store" and then "Themes".
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

main#MainContent:has(.shopify-policy__container) {
    background: #FAF8F1;
    max-width: 100%;
    margin-bottom: -20px;
}

.shopify-policy__body {
    max-width: 560px;
    margin: auto;
}
.shopify-policy__title h1 {
    margin-top: 0;
    padding-top: .67em;
}

.shopify-policy__container * {
    color:  #D94F16;
}

.shopify-policy__body .rte p {
    margin-bottom: 0;
}

And Save.
Result:

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

shopcheri · ‎12-17-2024

thanks so much! that worked!

shopcheri · ‎12-18-2024

i just check the mobile version.

so the last from the refund policy, and contact us page is being cut for some reason.

is there a solution for that?

shopcheri · ‎12-18-2024

last line*

Made4uo-Ribe · ‎12-18-2024

Oh, It's from the footer padding.. As you can see on the code I provide I didnt add anything on the footer.

Try to find the file "refund.policy" you can search it

And find this line.

You can add some comment sign.

or remove it.

When I remove this is the result.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

shopcheri · ‎12-19-2024

i cant seem to find "refund policy" anywhere

shopcheri · ‎12-20-2024

is there any other way ?

Made4uo-Ribe · ‎12-20-2024

Did you already solved the issue?

THis is on my end.

If this fixed your issue, Likes and Accept as Solution are highly appreciated. ☕ Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

Policy Page, background and text colour change