d
Topic
Posts:
7
10 days ago

Changing text color on the newsletter button - Supply theme

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.

i
Replies
Ninthony Member
Posts:
32
Last edited 10 days ago
g
1
upvotes

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.

Posts:
7
10 days ago

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

Big Like :)

Bo Shopify Employee
Posts:
42
Last edited 9 days ago

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

Posts:
7
9 days ago

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. 

Bo Shopify Employee
Posts:
42
9 days ago

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

Posts:
7
9 days ago

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

Bo Shopify Employee
Posts:
42
6 days ago

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