My email Sign Up button is stuck on black after making background transparent

Solved

My email Sign Up button is stuck on black after making background transparent

Malakush
Excursionist
39 1 19

Hello pro's, having a little issue. 

 

My email Sign Up button is stuck on black after making the background transparent so I could add a background image. I would like to have a white box with black text and a black outline. Nothing changes when i play with the settings below. Seems to be locked as is. I used Scheme 6 in order to use the transparent background. If I use other schemes I can have a white email signup box but no background image. 

 

Malakush_0-1749111393563.png

Malakush_1-1749111399916.png

Malakush_2-1749111485046.png

https://kykeonlabs.co/

Password: sewsogs

 

 

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
12019 2348 2528

This is an accepted solution.

Hi @Malakush 

Please add the following code to the Custom CSS in Sales channels > Online Store > Themes > Customize > Theme settings.

.newsletter-form__field-wrapper .field__input {
    background: #fff;
}
.newsletter-form__field-wrapper .newsletter-form__button,
.newsletter-form__field-wrapper .field__label { 
    color: #000;
}
.newsletter-form__field-wrapper .field:after {
    box-shadow: 0 0 0 1px #000;
}

Screenshot 2025-06-05 at 15.38.16.png

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 5 (5)

Dan-From-Ryviu
Shopify Partner
12019 2348 2528

This is an accepted solution.

Hi @Malakush 

Please add the following code to the Custom CSS in Sales channels > Online Store > Themes > Customize > Theme settings.

.newsletter-form__field-wrapper .field__input {
    background: #fff;
}
.newsletter-form__field-wrapper .newsletter-form__button,
.newsletter-form__field-wrapper .field__label { 
    color: #000;
}
.newsletter-form__field-wrapper .field:after {
    box-shadow: 0 0 0 1px #000;
}

Screenshot 2025-06-05 at 15.38.16.png

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Malakush
Excursionist
39 1 19

Thank you kindly! Worked perfectly 🙂

Dan-From-Ryviu
Shopify Partner
12019 2348 2528

You are very welcome

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

topnewyork
Astronaut
1539 189 250

Hi @Malakush,


1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.newsletter-form__field-wrapper .field__input {
    background: rgb(245 0 0 / 0%) !important;
}

 

topnewyork_0-1749113043488.png

 


Thanks!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month

steve_michael2
Navigator
454 39 62

Hello @Malakush ,

 

Navigate to Online Store > Themes > click on Edit code. Locate and open the theme.css or base.css file.
Scroll to the bottom and add the following CSS code:

.newsletter-form__field-wrapper .field__input {
  background: #fff;
}
.newsletter-form__field-wrapper .newsletter-form__button,
.newsletter-form__field-wrapper .field__label {
  color: #000;
}
.newsletter-form__field-wrapper .field:after {
  box-shadow: 0 0 0 1px #000;
}

 

Thanks!