Liquid/Html Code for Newsletter?

NathanDuran
New Member
20 0 0

Hello! So wanted to create urgency for my products. I have created a simple countdown timer that counts down to a certain date. I have got it to display something when the countdown reaches 0. What I want to do is say, "Please Sign Up for Our Newsletter to keep up to date with new sales and products"  and I want to display the news letter sign up. I just need the code to display the news letter sign up. is it something like {{ newsletter.signup }} or similar? That is the only piece of code I need. Thanks!

Replies 19 (19)
Savannah_F
Shopify Staff
Shopify Staff
540 1 106

Hey, Nathan! 

Savannah here from the Shopify Guru Team. 

This should do the trick, depending on which theme you're using and where you'd like to display the combo: 

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


Happy selling!

Savannah | Shopify Guru
support@shopify.com

Savannah | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

blacmirage
New Member
1 0 3

Hi does anyone have liquid code to create a newsletter page. There is the option for a contact page template but i would prefer one just to sign up to my mailing list if possible. Thanks.

George_C
Pathfinder
118 1 118

The reply above didn’t explain how to implement that code. That code is for a new page template that you must create. Do this by going to Online Store > Themes then choose Edit Code from the drop-down menu button.

In the code editor, choose “add new template” and then use “page” as the base template and rename as desired. 

Enter the code above in-between the existing code that is auto-generated when you generate the new template. 

Then go to your “subscribe” page, and on the right-hand column there will be a box with a drop-down menu to choose the page template. Choose the one you just created. It will be named “page.[the name you gave it]”

Monster, creature & cryptozoology patches, buttons & stickers.
trudelizares
New Member
2 0 0

how can I add a field on the newsletter?

trudelizares
New Member
2 0 0

How do I add a field on the newsletter?

I added this code on gp-footer-newsletter.liquid
can anyone help me?

<input type="hidden" name="contact[tags]" value="newsletter">
      <input type="name" name="contact[name]"
        id="Name"
        class="input-group__field newsletter__input input-large"
        value="{% if customer %}{{ customer.name }}{% endif %}"
        placeholder="{{ 'general.newsletter_form.name_placeholder' | t }}"
        autocorrect="off"
        autocapitalize="off" required
       value="newsletter">
      <input type="email"
        name="contact[email]"
        id="Email"
        class="input-group__field newsletter__input input-large"
        value="{% if customer %}{{ customer.email }}{% endif %}"
        placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}"
        autocorrect="off"
        autocapitalize="off" required>
      <span class="input-group__btn">

 

Mdaniels21
New Member
2 0 0

Hi was this resolved? I’m trying to add the sign up tab on the end of my blog

Tashhall
Tourist
3 0 1

Hi I have managed to implement this fine but on my newsletter page it shows up with translation missing - any advice on how to fix this?

 

Tashhall_0-1620304606827.png

 

 

Thanks!

Geancanch
New Member
1 0 1

I'm getting the same error message, using the Prestige theme. Anyone have any fixes for this?

PeteBaston
New Member
1 0 0

Hello, 

The issue is due to you having a new language item added with no corresponding property on the locale. 

The simplest and quickest fix is to remove the liquid code: 

{{'general.newsletter_form.email_placeholder' | t }}

It will then be: placeholder=“”

If you do want to set up new translatable language items then you will need to do this in locale file.

Thanks,

 Peter

mystore123
New Member
3 0 0

Thanks George C. When you say "Enter the code above in-between the existing code that is auto-generated when you generate the new template" what exactly do you mean? Where in between the following code does the longer code need to go?

<div class="grid">

<div class="grid__item post-large--two-thirds push--post-large--one-sixth">

<div class="section-header">
<h1 class="section-header--title">{{ page.title }}</h1>
</div>

<div class="rte">
{{ page.content }}
</div>

</div>

</div>

George_C
Pathfinder
118 1 118

Place it between these two lines of code:

</div>

<div class="rte">

 

Monster, creature & cryptozoology patches, buttons & stickers.
DenisAt
Tourist
10 0 10

This is not working for me. If I paste this as HTML even into a complete/new page - I see only garbage...

 

jelenaces
New Member
1 0 0

That worked! Thank you for the detailed instructions, George!
Is there a way for us to manipulate its position, looks?

Frisk_20
Excursionist
28 0 10

Hello,

I have been following the advice on this forum and it worked with my previous theme but now i'm using Prestige and it doesn't work.

I have this in my liquid:

<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="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 %}"
""
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"></span>
</button>
</span>
</div>
{% endif %}
{% endform %}
</div>
</div>

<div class="rte">
{{ page.content }}
</div>
</div>
</div>
</div>

 

What I miss is the "Subscribe" button and some styling.

Any advice to make it work on Prestige?

Thanks!

ariel03
New Member
1 0 2

I am not an expert and really do not know code at all, but this is what worked for me in the brooklyn theme:

 

In the code editor, choose “add new template” and then use “page” and select liquid as the base template and rename as desired. 

 

Then I went to my Sections in the code editor and clicked on newsletter.liquid. Copied all the code up to SCHEMA around line 48.

 

Then pasted this code in my newly created page template between

{{ page.content }} and <div>

 

Then save. Now you can create a new page in your theme as you normally would, selecting your renamed template from the drop down menu on the right. Add title and text as normal. This worked for me.

HandsonDeck
New Member
1 0 0

I'm having the same issue, was this ever resolved???  Would be really nice if Shopify could make this easier, seems like we're all wanting the same thing.

George_C
Pathfinder
118 1 118

I have been migrating my theme from Debut to the new "Shopify 2.0" theme Dawn, and everything is much, much easier to implement and customize now. Even adding custom code can be done without actually opening up the code files, you can just add the custom code in the visual editor. There's a section/block for adding in custom code.  It's really great. 

 

There is also a default "Contact Form" section/block you can easily drag into the page template without needing to touch any code at all. So yes, Shopify has indeed made this much easier. Have to give them credit on this one! 

 

I'd highly recommend upgrading to a 2.0 theme if you do any customizations. So much easier. Shopify really did a good job. 

Monster, creature & cryptozoology patches, buttons & stickers.
CDRess
Excursionist
15 0 19

I was SO close to figuring this out on my own today but your comment did it. Thank you so much! I've spent way too much time on this today 😜 

LB2022
Tourist
12 1 2

THIS TOTALLY FIXED MY PROBLEM. THANK YOU!!!