Change Background Color From Specific Page

Shopify Discussion
1

Hello, I need help changing the background color of two sections on a specific page. When I try to change the background color from white to #ECE3E3, it only changes the color of the section’s background and not the main #MainContent section. There is still a gap of the white color of the #MainContent section. Also, when I change the main #MainContent color, it changes on all pages. I only want to change the color on a specific page.

Page link: https://it3c4l97jlh53jxv-85198045527.shopifypreview.com/pages/bundle
Password: wellness

I try to use this code:

{% if template == 'page.bundle' %} .animate--hover-3d-lift { background: #ece3e3 !important; } {% endif %}

68c7e0fd-b286-4dff-ac19-8177f7151057.jpg
68c7e0fd-b286-4dff-ac19-8177f7151057.jpg1600×845 97 KB

1 Like
2

Hi @Ammzish

You can also use the section id.

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

div#shopify-section-template--23432765735255__influencer_HxdPEB .Influencers-main {
     background: #ece3e3 !important;
}

section#shopify-section-template--23506589319511__main {
    background: #ece3e3 !important;
}

div#shopify-section-template--23506589319511__influencer_bDnBnk .Influencers-main {
    background: #ece3e3 !important;
}
.Influencer--inner {
    margin: 0;
}

And Save.

Result:

Made4uoRibe_0-1726520809086.png
Made4uoRibe_0-1726520809086.png1466×761 118 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

@Made4uo-Ribe Thank you for the reply with the solution. I added the code you provided in the base.css and it changed the background color, but the issue is the same. there’s a white gap of #MainContent and I want to change the color for it as well, or remove it.

https://it3c4l97jlh53jxv-85198045527.shopifypreview.com/pages/bundle

Ammzish_0-1726522382878.png
Ammzish_0-1726522382878.png1900×450 205 KB

4

Oh, It didnt listen. I did remove that one. Thats is a margin from the inner grid.

try this one.

.Influencers-main .Influencer--inner {
    margin: 0px !important;
}

If you are familiar with the code. Change this.

Made4uoRibe_0-1726522689572.png

To the above I provdie. Or better to replace for this.

div#shopify-section-template--23432765735255__influencer_HxdPEB .Influencers-main {
     background: #ece3e3 !important;
}

section#shopify-section-template--23506589319511__main {
    background: #ece3e3 !important;
}

div#shopify-section-template--23506589319511__influencer_bDnBnk .Influencers-main {
    background: #ece3e3 !important;
}
.Influencers-main .Influencer--inner {
    margin: 0px !important;
}

And save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
5

@Made4uo-Ribe It worked. Thank you so much.

6

Also, can I ask if there is a way to change the color of all influencer sections on a specific page? https://it3c4l97jlh53jxv-85198045527.shopifypreview.com/pages/bundle

7

Try the code you have.

And Save.

I think you already knows where this will be paste.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
8

I insert this code in base.css but it’s also changing colors from other pages section.

9

If it is, the template code that your using ‘page_bundle’ is not on the json template.

10

@Made4uo-Ribe For clarification: the code is changing color from all sections on the site

11

I had a wonderful online shopping experience. Sattva Songbird the checkout process was quick and easy, and the product variety is excellent. My order was precisely what I ordered, and it arrived swiftly. Strongly advise everyone searching for excellent and high-quality services

12

Oh, You already add password in your site. I just like to check it again.