Re: Moving my email newsletter sign up box

Solved

How can I reposition my email newsletter sign-up box?

KieranC
Excursionist
17 0 8

Hi, I have recently created a page specifically for my email newsletter sign up.

The box where my customer will enter the email address has gone to the very bottom of the page. How would I move this in between my text and my image? I have attached the code of the page and I am using the debut theme. 

Thanks in advance! 🙂 

Screenshot 2022-03-10 at 17.30.51.png

Screenshot 2022-03-10 at 17.36.46.png

Click to expand...
 
Accepted Solution (1)
KetanKumar
Shopify Partner
37583 3668 12151

This is an accepted solution.

@KieranC 

can you try this code

<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>


</div>
</div>
</div>
<div class="newsletter-section{% if section.settings.show_background %} index-section--newsletter-background{% endif %}">
<div class="page-width text-center">
<div class="section-header text-center">
{% if section.settings.title != blank %}
<label for="Email" class="h2">{{ section.settings.title | escape }}</label>
{% endif %}
{% if section.settings.subtitle != blank %}
<p>{{ section.settings.subtitle | escape }}</p>
{% endif %}
</div>
{% form 'customer' %}
{{ form.errors | default_errors }}
{% if form.posted_successfully? %}
<p class="form--success">{{ 'general.newsletter_form.confirmation' | t }}</p>
{% else %}
<div class="input-group password__input-group">
<input type="hidden" name="contact[tags]" value="newsletter">
<input type="email"
name="contact[email]"
id="Email"
class="input-group__field newsletter__input"
value="{% if customer %}{{ customer.email }}{% endif %}"
placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}"
autocorrect="off"
autocapitalize="off">
<span class="input-group__btn">
<button type="submit" class="btn newsletter__submit" name="commit" id="Subscribe">
<span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>
</button>
</span>
</div>
{% endif %}
{% endform %}

<div class="rte">
{{ page.content }}
</div>
</div>
</div>
If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 14 (14)

AvadaCommerce
Shopify Partner
3879 840 999

Hi @KieranC ,

 

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

banned

KetanKumar
Shopify Partner
37583 3668 12151

@KieranC 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.
If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KieranC
Excursionist
17 0 8
KetanKumar
Shopify Partner
37583 3668 12151

@KieranC 

do you have like this?

KetanKumar_0-1646991350529.png

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KieranC
Excursionist
17 0 8

Hi, 

No. I had the image above the 'subscribe' box.

Screenshot 2022-03-10 at 17.30.51.png

KetanKumar
Shopify Partner
37583 3668 12151

@KieranC 

yes, please send contact page code so i will update

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KieranC
Excursionist
17 0 8

<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>

<div class="rte">
{{ page.content }}
</div>
</div>
</div>
</div>
<div class="newsletter-section{% if section.settings.show_background %} index-section--newsletter-background{% endif %}">
<div class="page-width text-center">
<div class="section-header text-center">
{% if section.settings.title != blank %}
<label for="Email" class="h2">{{ section.settings.title | escape }}</label>
{% endif %}
{% if section.settings.subtitle != blank %}
<p>{{ section.settings.subtitle | escape }}</p>
{% endif %}
</div>
{% form 'customer' %}
{{ form.errors | default_errors }}
{% if form.posted_successfully? %}
<p class="form--success">{{ 'general.newsletter_form.confirmation' | t }}</p>
{% else %}
<div class="input-group password__input-group">
<input type="hidden" name="contact[tags]" value="newsletter">
<input type="email"
name="contact[email]"
id="Email"
class="input-group__field newsletter__input"
value="{% if customer %}{{ customer.email }}{% endif %}"
placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}"
autocorrect="off"
autocapitalize="off">
<span class="input-group__btn">
<button type="submit" class="btn newsletter__submit" name="commit" id="Subscribe">
<span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>
</button>
</span>
</div>
{% endif %}
{% endform %}
</div>
</div>

 

KetanKumar
Shopify Partner
37583 3668 12151

This is an accepted solution.

@KieranC 

can you try this code

<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>


</div>
</div>
</div>
<div class="newsletter-section{% if section.settings.show_background %} index-section--newsletter-background{% endif %}">
<div class="page-width text-center">
<div class="section-header text-center">
{% if section.settings.title != blank %}
<label for="Email" class="h2">{{ section.settings.title | escape }}</label>
{% endif %}
{% if section.settings.subtitle != blank %}
<p>{{ section.settings.subtitle | escape }}</p>
{% endif %}
</div>
{% form 'customer' %}
{{ form.errors | default_errors }}
{% if form.posted_successfully? %}
<p class="form--success">{{ 'general.newsletter_form.confirmation' | t }}</p>
{% else %}
<div class="input-group password__input-group">
<input type="hidden" name="contact[tags]" value="newsletter">
<input type="email"
name="contact[email]"
id="Email"
class="input-group__field newsletter__input"
value="{% if customer %}{{ customer.email }}{% endif %}"
placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}"
autocorrect="off"
autocapitalize="off">
<span class="input-group__btn">
<button type="submit" class="btn newsletter__submit" name="commit" id="Subscribe">
<span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>
</button>
</span>
</div>
{% endif %}
{% endform %}

<div class="rte">
{{ page.content }}
</div>
</div>
</div>
If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KieranC
Excursionist
17 0 8

Hi Ketan, 

That has now moved the box to the top of page, is there any way to have my text above it?

Thanks for all your help so far! Screenshot 2022-03-11 at 10.31.10.png

KetanKumar
Shopify Partner
37583 3668 12151

@KieranC 

that tax come up to Shopify admin page we doesn't control but you have add fix tax code above this its work

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KieranC
Excursionist
17 0 8

OK, thanks. 

KieranC
Excursionist
17 0 8

Is there anyway to reduce the gap between the Page title and the content? It is very large currently! 

KetanKumar
Shopify Partner
37583 3668 12151

@KieranC 

yes, please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.grid__item.medium-up--five-sixths.medium-up--push-one-twelfth .newsletter-section {
    padding-top: 0px;
}

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AvadaCommerce
Shopify Partner
3879 840 999

Hi @KieranC ,

 

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css->paste below code at the bottom of the file:

.newsletter-section {
    padding-top: 0 !important;
}

.newsletter-section .section-header {
    margin-bottom: 20px !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

banned