Changing text color on the newsletter button - Supply theme

Highlighted
Tourist
8 0 1

Hi Support.

I'm using Supply theme and I need to change the text color only on the button in the newsletter section.

I've done some successful code changes using Edit Code for other stuff, but couldn't do this :) 

Help, please.

0 Likes
Navigator
417 22 75

I can help you out. Go ahead and go to Edit Code and open your Snippets folder. There's a snippet called "newsletter-form.liquid", go ahead and open that. That contains all the html for your newsletter section. Find the <button> element. Look at the class. It should be something like:

<button type="submit" class="btn{% if button == 'secondary' %}-secondary{% endif %} btn--small" name="commit" id="subscribe">

just go ahead and append a class to the end of "btn-small" something to the extent of "my-btn" like this:

<button type="submit" class="btn{% if button == 'secondary' %}-secondary{% endif %} btn--small my-btn" name="commit" id="subscribe">

then go into your assets folder and open the theme.scss file. Scroll ALLLLLLLLL the way to the bottom and add your CSS.

.my-btn{
 color:Orange; 
}

Now you have orange text for your button. Hope it helps.

1 Like
Tourist
8 0 1

Awesooooome Ninthony , Many thanks to you , it worked just as i needed. 

Big Like :)

0 Likes
Shopify Staff
Shopify Staff
370 24 57

Hey there, Eyad!

Bo here from Shopify Support.

That is a really great question! I did some digging into this for you and found that the newsletter "Sign Up" button can be edited independently to the other buttons through some custom CSS. I would encourage you to not edit any of the CSS but to add any new rules to the bottom of the file. Anything that is added will overwrite the rules that came before without changing anything else, whereas making a direct edit to pre-existing CSS can break your whole site.

  • Go to Online Store > Actions > Edit Code as seen in this screenshot. 
     
  • Once you are in the theme code you will need to open the Assets folder and select theme.scss.
     
  • You will scroll to the bottom as previously mentioned and add the following code.
.newsletter-section {
& .input-group-btn {
& button {
color: #E5C649;
}
}
}
  • You will change the color code here to the color you would actually want! You can take a look at all the codes in the theme customizer. Go to Online Store > Customise > Theme Settings > Colors just like in this screenshot. 

Let me know how this goes and if there is anything else I can help you with, I'm happy to help!

All the Best

-Bo

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Tourist
8 0 1

Hi Bo 

Thanks for your kind feedback, i've done the above steps you mentioned, but no change was noticed, the text color didn't change. 

0 Likes
Shopify Staff
Shopify Staff
370 24 57

I noticed on your website that you removed the newsletter section from your store. It would be my understanding that the code I have mentioned would work, however, this is applicable to the newsletter section only. These changes would not affect the newsletter sign up in the footer. Is this the e-mail sign up in the footer what you would like to change? 

All the Best,

Bo

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Tourist
8 0 1

Hi Bo

Yes, i would like to change the email signup in the footer. But I don't remember I removed any sections as in the Supply theme this signup form is placed in the footer by default. 

Please advise if im missing something or if I removed any section by mistake. 

 

Thanks in advance 

Eyad

0 Likes
Shopify Staff
Shopify Staff
370 24 57

Great question Eyad,

So the code that I initially gave you was for the Newsletter Section which would have hovered just above the footer. The newsletter section in the footer will need to be edited independently. Not to worry though, it is very easy to do! We will need to go to Online Store > Actions > Edit Code > theme.scss.liquid and scroll to the bottom of the file again. From here you will add the following code and hit save: 

.footer-section {
& .input-group-btn {
& button {
color: #2DA4F3;
}
}
}

Let me know how this goes and if there is anything else I can help you with, I'm happy to help!

All the Best,

Bo

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
3 0 0

@Bo

Hello.

.newsletter-section {
& .input-group-btn {
& button {color: #E5C649;
}
}
}

how would i go about adding a hover function, to change the text color when hovering over? 

Thanks in advance. 

 

0 Likes
Shopify Staff
Shopify Staff
370 24 57

Hey there, @Sebastian19

 

Great question. So once again I would recommend adding the following at the very bottom of the theme.scss.liquid to override the previous code as opposed to editing the pre-existing code. 

 

To  change the background color of the button to red when you hover:

.newsletter-section .contact-form .input-group-btn button:hover {
    background: red;
}

To change the *color* of the text to red when you hover:

.newsletter-section .contact-form .input-group-btn button:hover {
    color: red;
}

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes