Need help with Newsletter adjustments

Solved
jacauschi23
Explorer
60 9 17

Hello, I need some help with the newsletter signup on the home page...

- removing the single red border line underneath "Enter your email"

- changing "Enter your email" text color to #3b3b3b and font-size: 12px

- removing the submit arrow and instead have a solid red #e90000 "SUBSCRIBE" button below the Email entry, same width. Font-Size: 12px

 

Test Site: https://doja-exclusives.myshopify.com/

PW: aobrew

0 Likes
HardikDavra
Shopify Partner
1799 279 791

This is an accepted solution.

Please place this code at the end of Assets -> theme.scss

#shopify-section-1568117974886 .newsletter__input {
  border: none;
font-size: 12px;
}
.long-arrow {
display: none;
}
#shopify-section-1568117974886 .newsletter__input::placeholder {
  color: #3b3b3b;
}

#shopify-section-1568117974886 .newsletter__input:-ms-input-placeholder {
  color: #3b3b3b;
}

#shopify-section-1568117974886 .newsletter__input::-ms-input-placeholder {
  color: #3b3b3b;
}
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
jacauschi23
Explorer
60 9 17

@HardikDavra thanks but it only removed the border line and the arrow. The other changes were not made

HardikDavra
Shopify Partner
1799 279 791

This is an accepted solution.

To add subscribe button, I need to do some code for it. So I need to enter into your store.

Would you please provide me access of your store?

 

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
jacauschi23
Explorer
60 9 17

@HardikDavra I messaged you a Collaborator Request Code for the site. Thank you so much

LitExtension
Shopify Partner
641 66 119

Hi @jacauschi23

To solve your problem, you can edit your theme.

Steps:

1. From your Shopify admin, go to Online Store > Themes -> Select your theme.

2. Click Actions > Edit code.

3. Open the file name "theme.scss". Please place this code at the end of the "theme.scss" file.

    .newsletter .newsletter__input {

    padding: 0;

    opacity: 1;

}

 

.newsletter .newsletter__submit {

    position: absolute;

    top: 50%;

    right: 0;

    cursor: pointer;

    transform: translateY(-50%);

}

 

.newsletter .newsletter__input+.newsletter__submit:before {

    position: absolute;

    content: 'Subcrible';

    right: 0;

    top: 50%;

    transform: translateY(-50%);

    color: #e90000;

    font-weight: 700;

    opacity: 1;

    text-transform: uppercase;

}

 

.newsletter .newsletter__form div:hover .newsletter__input,

.newsletter .newsletter__form div:hover .newsletter__submit {

    opacity: 1;

}

 

.newsletter .newsletter__input::-webkit-input-placeholder {

    color: #3b3b3b;

    font-size: 12px;

}

 

.newsletter .newsletter__input::-moz-placeholder {

    color: #3b3b3b;

    font-size: 12px;

}

 

.newsletter .newsletter__input::-ms-input-placeholder {

    color: #3b3b3b;

    font-size: 12px;

}

 

.newsletter .newsletter__input::-moz-placeholder {

    color: #3b3b3b;

    font-size: 12px;

}

 

.newsletter .newsletter__input::placeholder {

    color: #3b3b3b;

    font-size: 12px;

}

Screenshot to refer: https://prnt.sc/119h7l2

Hope this helps.

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
jacauschi23
Explorer
60 9 17

@LitExtension thank you but I need "SUBSCRIBE" to be its own button underneath the email field except the button needs be solid #e90000 with white text, unlike the email entry field which has a border. I think you may have misread my initial inquiry.

0 Likes
HardikDavra
Shopify Partner
1799 279 791

@jacauschi23 Please check now.

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
jacauschi23
Explorer
60 9 17

I had to add !important next to each HEX color and then it worked.