How can I customize the newsletter design in the Dawn theme?

[hasanali1]

is there a way to change the newsletter (both in footer and induvial section) from this boring design to this?

let me know if u can help!!

website - https://the-style-luxe.myshopify.com/

password - reucho

website with better looking newsletter- https://allureluxe-pastelgrid.myshopify.com/

[GemPages]

Hello @hasanali1 

It's GemPages support team and glad to support you today.

Please share the password of the  store: https://allureluxe-pastelgrid.myshopify.com/

[hasanali1]

Password: pastelgrid

[GemPages]

@hasanali1 

It's GemPages support team and glad to support you today.

I would like to give you a solution to support you.

1. Go to Online Store -> Theme -> Edit code.

2. Open your assets/theme.css  theme file.

3. Add the code at the end of the file:

.newsletter-form__button{   
  position: absolute;
  width: 75px;
  border: 1px solid #ffffff;
}
.newsletter-form__field-wrapper .field__input{
  width: 100%;
  border: 1px solid #ffffff;
  margin: 0 !important;
}
.newsletter-form__field-wrapper > .field{
    position: relative;
    padding-right: 80px;
}
     .newsletter-form__field-wrapper > .field::after,
    .newsletter-form__field-wrapper > .field::before{
        display: none !important;
    }

Result:

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

[hasanali1]

thank you loads!! is there a way to replace the 'arrow' to a text instead 'SUBSCRIBE' ?

[GemPages · Accepted solution]

@hasanali1 

Please try again with the code below:

.newsletter-form__button{   
  position: absolute;
  width: 85px !important;
  border: 1px solid #ffffff;
}
.newsletter-form__field-wrapper .field__input{
  width: 100%;
  border: 1px solid #ffffff;
  margin: 0 !important;
}
.newsletter-form__field-wrapper > .field{
    position: relative;
    padding-right: 90px;
}
     .newsletter-form__field-wrapper > .field::after,
    .newsletter-form__field-wrapper > .field::before{
        display: none !important;
    }
#Subscribe::before{
  content: 'Subcribe';
  font-size: 14px;
  text-transform: uppercase;
}
#Subscribe svg{
  display: none;
}

[NaomiNN]

Hello @GemPages,

Thank you so much for the code it worked for me!😊

Is there a way to change the position of the button to below the field and in black color ?