Editing the email sign up section

Solved

Editing the email sign up section

AlphaWindshield
Tourist
4 0 1

I am having a hard time editing the layout of the email sign up section on my home page. It looks a little bulky currently and I don't love the way it looks. Hoping someone can help me edit the layout. I am using the Dawn theme. Wanting to make it look like the included image.

 

Screenshot 2024-09-15 at 11.18.52 AM.png

Accepted Solution (1)

Vinsinfo
Shopify Partner
446 152 149

This is an accepted solution.

@AlphaWindshield Please follow below steps to change the newsletter style. Let me know whether it is helpful for you.
 
1. From admin go to "Online Store" -> "Themes".
2. Click "Edit code" button from the current theme.
Vinsinfo_2-1726506351723.png

 

3. Go to "newsletter.liquid" file.
Vinsinfo_1-1726506342961.png

 

4. Then search id="Subscribe" and remove the below code inside the button element and enter "subscribe" like below attached image and save changes.
<span class="svg-wrapper">
{{- 'icon-arrow.svg' | inline_asset_content -}}
</span>
Vinsinfo_0-1726506335974.png

 

5. Then Go to "base.css" and paste the below code at the bottom of the file and save changes.

 

.newsletter__wrapper {
    display: grid;
    grid-template-columns: 1fr;
    background-color: #595959;
    color: #FFFFFF;
    align-items: center;
}
.newsletter__wrapper h2 {
    color: #FFFFFF !important;
    text-transform: uppercase;
}
.newsletter__wrapper .newsletter__subheading {
    width: 100%;
}
.newsletter__wrapper #Subscribe {
    width: max-content;
    padding: 5px 20px;
    background-color: #000000;
    color: #FFFFFF;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.newsletter__wrapper .newsletter-form__field-wrapper {
    max-width: 48rem !important;
}
.newsletter-form__field-wrapper .field__input {
    border-radius: 5px;
}
.newsletter-form__field-wrapper .field::after {
    box-shadow: none;
}
.newsletter-form__field-wrapper .field__input {
    padding-right: 11rem;
}

@media screen and (min-width:750px) {
    .newsletter__wrapper {
        grid-template-columns: 1fr 1fr;
        text-align: left; 
    }
    .newsletter__wrapper div:nth-of-type(2) {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin: 0px !important;
    }
    .newsletter__wrapper .newsletter__subheading {
        margin: 0px !important; 
    }
    .newsletter-form {
        max-width: 48rem !important;
    }
}

 

 

Result will be like,

Vinsinfo_3-1726506586922.png

 

 

NOTE: If the provided solution not works. Please share your store URL to help you on this.
 
 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to [email protected] for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Replies 6 (6)

BSSCommerce-HDL
Shopify Partner
2305 833 904

Hi @AlphaWindshield, Can you kindly share your store link with us? We will check it and suggest you a solution if possible.

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

namphan
Shopify Partner
1518 191 211

Hi @AlphaWindshield,

Please send me the store link, I will check it for you

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? [email protected]

websensepro
Shopify Partner
1272 144 160

Hi @AlphaWindshield , kindly share your store URL.

 

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial

Vinsinfo
Shopify Partner
446 152 149

This is an accepted solution.

@AlphaWindshield Please follow below steps to change the newsletter style. Let me know whether it is helpful for you.
 
1. From admin go to "Online Store" -> "Themes".
2. Click "Edit code" button from the current theme.
Vinsinfo_2-1726506351723.png

 

3. Go to "newsletter.liquid" file.
Vinsinfo_1-1726506342961.png

 

4. Then search id="Subscribe" and remove the below code inside the button element and enter "subscribe" like below attached image and save changes.
<span class="svg-wrapper">
{{- 'icon-arrow.svg' | inline_asset_content -}}
</span>
Vinsinfo_0-1726506335974.png

 

5. Then Go to "base.css" and paste the below code at the bottom of the file and save changes.

 

.newsletter__wrapper {
    display: grid;
    grid-template-columns: 1fr;
    background-color: #595959;
    color: #FFFFFF;
    align-items: center;
}
.newsletter__wrapper h2 {
    color: #FFFFFF !important;
    text-transform: uppercase;
}
.newsletter__wrapper .newsletter__subheading {
    width: 100%;
}
.newsletter__wrapper #Subscribe {
    width: max-content;
    padding: 5px 20px;
    background-color: #000000;
    color: #FFFFFF;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.newsletter__wrapper .newsletter-form__field-wrapper {
    max-width: 48rem !important;
}
.newsletter-form__field-wrapper .field__input {
    border-radius: 5px;
}
.newsletter-form__field-wrapper .field::after {
    box-shadow: none;
}
.newsletter-form__field-wrapper .field__input {
    padding-right: 11rem;
}

@media screen and (min-width:750px) {
    .newsletter__wrapper {
        grid-template-columns: 1fr 1fr;
        text-align: left; 
    }
    .newsletter__wrapper div:nth-of-type(2) {
        grid-column: 2;
        grid-row: 1 / span 2;
        margin: 0px !important;
    }
    .newsletter__wrapper .newsletter__subheading {
        margin: 0px !important; 
    }
    .newsletter-form {
        max-width: 48rem !important;
    }
}

 

 

Result will be like,

Vinsinfo_3-1726506586922.png

 

 

NOTE: If the provided solution not works. Please share your store URL to help you on this.
 
 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to [email protected] for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

AlphaWindshield
Tourist
4 0 1
namphan
Shopify Partner
1518 191 211

Hi @AlphaWindshield,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.newsletter__wrapper {
  display: grid;
  grid-template-areas:
  "heading"
  "text"
  "font";
  grid-template-columns: 1fr;
}
@media screen and (min-width: 750px) {
  .newsletter__wrapper {
    grid-template-areas:
        "heading font"
        "text font";
    grid-template-columns: auto 1fr;
  }
}
.newsletter__wrapper h2 {
  grid-area: heading;
  text-align: center;
}
@media screen and (min-width: 750px) {
  .newsletter__wrapper h2 {
    text-align: left;
  }
}
.newsletter__subheading {
  grid-area: text;
  text-align: left;
}
.newsletter__subheading+div {
  grid-area: font;
}
.newsletter-form,
.newsletter-form__field-wrapper {
  max-width: 50rem;
}

it will display like this:

Screenshot.png

Coffee tips fuels my dedication.
Shopify Development Service
Need help with your store? [email protected]