How can I redesign the sign up button in Shopify Dawn?

[jesuisjulie]

Hey guys,

I would like to redesign my sign up/ newsletter subscription section in Shopify Dawn.

Do you know how to get from this view:

to this one:

This is my store URL: https://jnsq.shop/

Thank you!

Julia

[Made4uo-Ribe]

Hi @jesuisjulie

Try this one.

• From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
• Find the theme that you want to edit and click on “Actions” and then “Edit code”.
• In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

button#Subscribe {
    background: black;
    color: white;
}
.field:after {
    border-bottom: none;
}
input#NewsletterForm--footer {
    border: 1px solid black;
}

• And Save.
• Result:
• 

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[Moeed]

Hey @jesuisjulie

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[jesuisjulie]

Hi Ribe! Thank you so much for the code!

It works, but the there are some issues with the button. On desktop it looks like it’s slightly bigger than the subscription field:

on mobile it’s also not aligned:

The rest looks great!

[Made4uo-Ribe]

Oh, I didnt check that. Try this one again.

Same Instruction.

@media only screen and (max-width: 749px){
button#Subscribe {
    margin-top: 0px !important;
    right: -1px;
 
}
}

.field {
    border: 1px solid black;
}
button#Subscribe {
    background: black;
    color: white;
    right: -1px;
}
.field:after {
    border-bottom: none;
}

And Save.

Result:

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[jesuisjulie]

Hi Ribe, thank you! It looks like another line appeared:

also on mobile the “sign up” text is slightly higher than the rest

Hopefully it’s an easy fix

[Made4uo-Ribe]

Why is that keep appearing i already wipe that out. Try this one.

.field:after {
    border-bottom: none !important;
}

And Save.

i hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[jesuisjulie]

Thank you! It’s removed now