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

Store Design
, ,
1

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

hasanali1_0-1679304941775.png
hasanali1_0-1679304941775.png1042×269 5.38 KB

hasanali1_1-1679304956842.png
hasanali1_1-1679304956842.png631×132 5.13 KB

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/

2

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/

1 Like
3

Password: pastelgrid

4

@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:

Screenshot at Mar 20 18-25-38.png
Screenshot at Mar 20 18-25-38.png783×584 119 KB

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

1 Like
5

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

6

@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;
}
2 Likes
7

Hello @GemPages ,

Thank you so much for the code it worked for me! :blush:

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