How can I change the color scheme of my newsletter section?

Store Design
1

Hi I want to change the color of my newsletter section to red#CF2044, the heading text to black and the body text to white and the button to be black or white how can i code that in? see attached image

current screenshot
current screenshot995×522 35 KB

1 Like
2

@breyonwella

Please share your store URL.

3

www.wellastudiomall.com/

1 Like
4

@breyonwella

Please add the following code at the bottom of your assets/theme.scss.liquid file.

#shopify-section-newsletter .newsletter {
    background-color: #CF2044 !important;
}
#shopify-section-newsletter .section-header__title{
color: #000 !important;
}
#shopify-section-newsletter .rte p{
color: #fff !important;
}
#shopify-section-newsletter button#Subscribe {
    background-color: #000;
}

Hope this works.

Thanks!

5

hello @breyonwella

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file. see screenshot https://nimb.ws/in89SI

.newsletter{
       background: #CF2044;
    }
   .h1.section-header__title{
       color: black;
    }
    .section-subheading.rte.text-center >p{
       color: white;
    }
    .btn.newsletter__submit{
       background: black;
    }
    .input-group-field.newsletter__input{
       background: #f6f6f7;
    }
6

thank you so much this helped!

7

is there a way to code it so that the rest of the headings on the homepage dont turn black and stay red? only heading i need black is in the newsletter section

header.JPG
header.JPG706×170 10.3 KB

new letter.JPG
new letter.JPG1351×348 33.7 KB

8

hello @breyonwella please remove last insert code and update with this below code

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

#shopify-section-newsletter .newsletter{
       background: #CF2044;
    }
     #shopify-section-newsletter  .h1.section-header__title{
       color: #000000 ;
    }
       #shopify-section-newsletter  .section-subheading.rte.text-center >p{
       color: #ffffff;
    }
       #shopify-section-newsletter .btn.newsletter__submit{
       background: #000000;
    }
       #shopify-section-newsletter .input-group-field.newsletter__input{
       background: #f6f6f7;
    }