Any chance to have the black theme only applied to the home page? (DEBUT)

Solved
BRIZAM
Excursionist
41 3 8

Hi Team,

Is it possible to have a "Black theme" applied to just the home page - all my other sections remain as is?

I wanted my home sections to have a black background with white text and red "buy now" buttons like this one for eg:

Screen Shot 2021-07-04 at 5.39.19 pm.png

 

Thanks for your help

 

brizam.com (pw: m)

0 Likes
Pallavi
Shopify Expert
2240 370 486

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

div#shopify-section-hero-1 {
padding-bottom: 0;
}

div#shopify-section-16254050011675d36f {
background: black;
color: white !important;
}

div#shopify-section-16254050011675d36f .product__policies, div#shopify-section-16254050011675d36f .product__policies a {
color: white;
}

div#shopify-section-16254050011675d36f .product__policies dd .price-item--regular {
color: white;
color: var(--color-body-text);
}

div#shopify-section-16254050011675d36f .price--on-sale .price-item--regular {
color: white;
}

div#shopify-section-16254050011675d36f .product-single__description.rte {
color: white;
}
div#shopify-section-hero-1 {
padding-bottom: 0;
}

div#shopify-section-16254050011675d36f {
background: black;
color: white !important;
}

div#shopify-section-16254050011675d36f .product__policies, div#shopify-section-16254050011675d36f .product__policies a {
color: white;
}

div#shopify-section-16254050011675d36f .product__policies dd .price-item--regular {
color: white;
color: var(--color-body-text);
}

div#shopify-section-16254050011675d36f .price--on-sale .price-item--regular {
color: white;
}

div#shopify-section-16254050011675d36f .product-single__description.rte {
color: white;
}

div#shopify-section-16254053324c62aa23 {
background: black;
}

div#shopify-section-16254053324c62aa23 h3.h4 {
color: white;
}

div#shopify-section-16254053324c62aa23 .rte-setting p {
color: white;
}

div#shopify-section-16254053324c62aa23 a.btn.btn--secondary {
padding-left: 20px;
padding-right: 20px;
white-space: normal;
margin-top: 0;
margin-bottom: 10px;
min-height: 44px;
background: #da2f0c;
color: white;
line-height: 26px;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
BRIZAM
Excursionist
41 3 8

@Pallavi wow thank you so much !!!

Pallavi
Shopify Expert
2240 370 486

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing