Shopify themes, liquid, logos, and UX
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! 🙂
Solved! Go to the solution
This is an accepted solution.
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>
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.
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.
do you have like this?
Hi,
No. I had the image above the 'subscribe' box.
yes, please send contact page code so i will update
<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>
This is an accepted solution.
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>
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!
that tax come up to Shopify admin page we doesn't control but you have add fix tax code above this its work
OK, thanks.
Is there anyway to reduce the gap between the Page title and the content? It is very large currently!
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;
}
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.
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025