Color of the background

Solved

Color of the background

damien68
Excursionist
25 0 6

Hi everyone, I have changed my shopify Theme, and now that I have the Craft theme, I can't change the color of my contact page and my blog page. I already tried with the options that offers Shopify, but it didn't work. 

Could you please help me to resolve the issue ? This is the link to my contact page : https://ma-tasse-en-bois.fr/pages/contact and yo my blog page : https://ma-tasse-en-bois.fr/blogs/articles-de-blog. I would like to have the white color instead of the brown one. Thank you .

damien68_0-1718547519902.pngdamien68_1-1718547558954.png

 

 

Accepted Solution (1)

BSSCommerce-HDL
Shopify Expert
997 336 396

This is an accepted solution.

Hi @damien68

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSCommerceHDL_0-1718547719322.png

Step 2: Search theme.liquid
Step 3: Before close head tags. Pls insert this code: 

BSSCommerceHDL_1-1718547770719.png

{% assign full_url = request.host | append: request.path %}
  {%- if full_url contains 'contact' or full_url contains 'articles-de-blog' -%}
    <style>
      body.gradient {
        background: white !important;
      }
    </style>
  {%- endif -%}

Here is result: 

BSSCommerceHDL_2-1718547809499.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 4 (4)

BSSCommerce-HDL
Shopify Expert
997 336 396

This is an accepted solution.

Hi @damien68

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSCommerceHDL_0-1718547719322.png

Step 2: Search theme.liquid
Step 3: Before close head tags. Pls insert this code: 

BSSCommerceHDL_1-1718547770719.png

{% assign full_url = request.host | append: request.path %}
  {%- if full_url contains 'contact' or full_url contains 'articles-de-blog' -%}
    <style>
      body.gradient {
        background: white !important;
      }
    </style>
  {%- endif -%}

Here is result: 

BSSCommerceHDL_2-1718547809499.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
damien68
Excursionist
25 0 6

Hi @BSSCommerce-HDL  it worked perfectly thank you 🙂

Ashraful
Shopify Partner
6 1 3

Since the theme customizer options aren't working, you can use custom CSS code. Here's how:

 

1. Access your Shopify theme code:

Login to your Shopify admin dashboard.
Click on "Online Store" and then "Themes".
Find the "Craft" theme and click on "Actions" then "Edit code".

 

2. Identify the CSS file:

In the "Assets" folder, look for a file named "theme.css" or "style.css". This is where you'll add the custom code.

 

3. Target specific elements (optional):

If you only want to change the background color, you can target the general page class.
But, for more control, you can target specific elements like the contact form section or blog post container using their class names.

 

4. Add the CSS code:

At the bottom of the chosen CSS file, paste the following code and adjust the color value:

 

/* Target the entire page (background color) */
.page {
background-color: #ffffff; /* White color code */
}

/* OR (Target specific elements) */
/* Find the class name for your contact form section (replace with actual class name) */
.contact-form-section {
background-color: #ffffff; /* White color code */
}

/* Find the class name for your blog post container (replace with actual class name) */
.blog-post-container {
background-color: #ffffff; /* White color code */
}

 

5. Save the changes:

Click on "Save" in the theme editor.

 

Additional tips:

If you're unsure about the class names for specific elements, you can inspect the page elements in your browser's developer tools to find them.
You can change the color code (#ffffff) to any other color you prefer. You can find color codes online using a color picker tool.

 

Caution: Editing theme code requires some understanding of CSS. If you're not comfortable with it, consider hiring a Shopify expert to make these changes for you.

PageFly-Henry
Shopify Partner
1184 335 283

Hi @damien68 

 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

body.gradient, .color-scheme-1.gradient {

    background: white !important;

}

In addition, on the banner page of the home page, you can add "shop now" buttons and headings so that users can easily identify and redirect to collection pages.

PageFlyHenry_0-1718548804594.png

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.