Solved

Customize Newsletter Design | Dawn theme

hasanali1
Shopify Partner
126 5 14

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

hasanali1_0-1679304941775.pnghasanali1_1-1679304956842.png

 

 

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/

 

 

 

Accepted Solution (1)
GemPages
Shopify Partner
5588 1261 1207

This is an 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;
}

 

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 6 (6)

GemPages
Shopify Partner
5588 1261 1207

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/

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
hasanali1
Shopify Partner
126 5 14

Password: pastelgrid

GemPages
Shopify Partner
5588 1261 1207

@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

 

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
hasanali1
Shopify Partner
126 5 14

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

 

GemPages
Shopify Partner
5588 1261 1207

This is an 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;
}

 

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
NaomiNN
Pathfinder
112 1 5

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 ?