How to replace Mailchimp with Shopify default newsletter sign-up form?

Solved
ozgaga
New Member
2 0 0

Hi,

We are using a paid theme that doesn't have "add section" for Shopify's default newsletter sign-up form. 

How to replace Mailchimp with Shopify default newsletter sign-up form? 

Which code do we need to replace?

Best regard,

Jimmy

This is what we want to replace with shopify default newsletter sign-up form.

section-newsletter-v1.liquid
<div data-section-id="{{ section.id }}" data-section-type="section-newsletter-v1" style="{% if section.settings.margin_top != blank %}margin-top: {{section.settings.margin_top}}px;{%endif%} {% if section.settings.margin_bottom != blank %}margin-bottom: {{section.settings.margin_bottom}}px;{% endif %}">
  {% if settings.newsletter_form_action != blank %}
  {% assign form_action = settings.newsletter_form_action %}
  {% else %}
  {% assign form_action = '#' %}
  {% endif %}
  <div class="container container-v2">
  <div class="section-newsletter-v1" style="background: {{section.settings.bg_newsletter}}">    
    <span class="ic-mail">
          <i class="{{section.settings.icon_top}}"></i>
    </span>
        {% if section.settings.title_newletter != blank %}
        <div class="title_newletter">
          <h3 class="title mb-0">{{section.settings.title_newletter}}</h3>
        </div>
        {% endif %}
        
        {% if section.settings.content_newletter != blank %}
        <p class="mb-0 content">{{section.settings.content_newletter}}</p>
        {% endif %}      
      
      <div class="row ">        
        <div class="col-lg-12">
          <div class="newletter_email">          
          <form class="needs-validation form-inline" action="{{form_action}}" method="post">
            <div class="form-group">                           
              <input type="email" name="EMAIL" class="form-control" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}" required >                 
            </div>
            <button class="btn" type="submit">{{ 'general.newsletter_form.submit_footer' | t }}</button>
          </form>
        </div> 
        </div>
      </div>
    </div>
  </div>
</div>
 
<style>
  
</style>
 
 
{% schema %}
{
  "name": "Section Newsletter v1",
  "settings": [
 
{
      "type": "color",
      "id": "bg_newsletter",
      "label": "Background Color",
      "default": "#fbf3f0"
    },
{
      "type": "text",
      "id": "icon_top",
      "label": "Icon top ",
      "default": "icon-mail",
   "info": "[Get icon in here](https:\/\/fontawesome.com\/v4.7.0\/icons)"
    },
 
    {
      "type": "text",
      "id": "title_newletter",
      "label": "Title Newletter",
      "default": "LIKE BEING FIRST?"
    },
 
{
      "type": "text",
      "id": "content_newletter",
      "label": "Content Newletter",
      "default": "Then get your can't-miss style news, before everybody else"
    },
 
    {
      "type": "header",
      "content": "Section Space"
    },
    {
      "type": "text",
      "id": "margin_top",
      "label": "Margin Top",
      "info": "Defined in pixels. Do not add the 'px' unit."
    },
    {
      "type": "text",
      "id": "margin_bottom",
      "label": "Margin Bottom",
      "info": "Defined in pixels. Do not add the 'px' unit."
    }
  ],
  "presets": [
    {
      "name": "Section Newsletter v1",
      "category": "HOME 1"
    }
  ]
}
{% endschema %}
 
{% stylesheet %}
{% endstylesheet %}
 
{% javascript %}
{% endjavascript %}

 

Accepted Solution (1)

Accepted Solutions
LukaszWiktor
Shopify Partner
273 13 85

This is an accepted solution.

Hi @ozgaga 

It looks like your newsletter section should have a configurable form action. I can see settings.newsletter_form_action in the Liquid code, however, I don't see newsletter_form_action in the settings schema.

If you add the following code snippet:

 

{
        "type": "text",
        "id": "newsletter_form_action",
        "label": "Form action URL",
        "default": "#"
},

 

just below {% schema %}, then you will be able to set the form URL in the section settings (like you already can do with the background color or title). You can then set the form action to a URL which you can extract from Mailchimp from an embedded form code (Manage audience > Signup forms > Embedded forms).

image.png

Hope this helps,
Lukasz

I'm a software engineer. I make things happen automatically.
Check out my apps Exporteo, Fulfilleo, and Personal Discount.

View solution in original post

Replies 12 (12)
LukaszWiktor
Shopify Partner
273 13 85

This is an accepted solution.

Hi @ozgaga 

It looks like your newsletter section should have a configurable form action. I can see settings.newsletter_form_action in the Liquid code, however, I don't see newsletter_form_action in the settings schema.

If you add the following code snippet:

 

{
        "type": "text",
        "id": "newsletter_form_action",
        "label": "Form action URL",
        "default": "#"
},

 

just below {% schema %}, then you will be able to set the form URL in the section settings (like you already can do with the background color or title). You can then set the form action to a URL which you can extract from Mailchimp from an embedded form code (Manage audience > Signup forms > Embedded forms).

image.png

Hope this helps,
Lukasz

I'm a software engineer. I make things happen automatically.
Check out my apps Exporteo, Fulfilleo, and Personal Discount.
ozgaga
New Member
2 0 0
Yain
New Member
5 0 0

Hi, 

Good day.

I have a challenge almost similar to the one in this conversation, but it is to replace mailchimp with Klaviyo. I am using Turbo 4.1.2 theme and in the newsletter section, there is only one box (field) for mailchimp. With other themes, I have seen two fields, 1 for Klaviyo and the other for mailchimp.

How can I add the section for Klaviyo and then replace the signups from Mailchimp with Klaviyo?

I will be grateful for some advice on how to do it.

Thanks in advance for your support.
Best regards,

Yai

LukaszWiktor
Shopify Partner
273 13 85

Hi @Yain,

I'd need to have a look at the theme code. Can you share your website address? I'll then send you a request from my Shopify Partner dashboard to access the Themes area in your store.

Thanks,
Lukasz

I'm a software engineer. I make things happen automatically.
Check out my apps Exporteo, Fulfilleo, and Personal Discount.
Yain
New Member
5 0 0

Hi Lukasz, 

 

Thank you so much for your support.  

 

Thanks in advance,

Yai

LukaszWiktor
Shopify Partner
273 13 85

Thanks @Yain. I just sent you an access request.

I'm a software engineer. I make things happen automatically.
Check out my apps Exporteo, Fulfilleo, and Personal Discount.
Yain
New Member
5 0 0
Hi Lukasz,

Thank you so much for your response. The address is: https:/mybackstretch.com.

Thanks in advance,
Yai
Yain
New Member
5 0 0
Hi Lukas,

Access granted! Thanks in advance,
rgds,
Yai
LukaszWiktor
Shopify Partner
273 13 85

Hi @Yain,

Thank you for granting me access. I just checked the newsletter section in your theme. I can see that if don't specify the form action, then the sign up form will add subscribers to your customers list in Shopify. And if you have Klaviyo installed in your store, then the app will automatically sync your customers from Shopify to Klaviyo. In other words, you don't need to set any form action. It should already work as it is. I've just signed up on your website. Can you see my email address in Klaviyo?

Thanks,
Lukasz

I'm a software engineer. I make things happen automatically.
Check out my apps Exporteo, Fulfilleo, and Personal Discount.
Yain
New Member
5 0 0
Hi Lukasz

Thank you so much for the support. I am grateful for the update.

The reason we were confused is that we are starting a blog and a signup link has to be added to it. The link that the agency inserted based on the site is the link to mail mailchimp. That is what prompted me to check. We did not see the field for Klaviyo ID as is in one of our sites.

We will those proceed with publishing the blog and monitor the it.

Thanks once again.
Yai
neilc221
New Member
1 0 0

Hi Lukasz,

 

I just can't figure out how to replace the mailchimp code.

right now, the sign up box leads to a broken link.

can you help?

Neil at Reading Glass World

Karolin_Bierbra
Shopify Partner
1 0 0

Hi @LukaszWiktor ,

got the same issue. If I don't put anything in the form field action of Mailchimp and I submit an email address, I get a blank page. 

Maybe you could help me please?

I can DM you my website address so you can have a look. 

Thanks for your time.

Karolin