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

Solved
Highlighted
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 %}

 

0 Likes
Highlighted

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.
Highlighted
New Member
2 0 0

Thank you Lukasz!

0 Likes
Highlighted
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

0 Likes
Highlighted

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.
0 Likes
Highlighted
New Member
5 0 0

Hi Lukasz, 

 

Thank you so much for your support.  

 

Thanks in advance,

Yai

0 Likes
Highlighted

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

I'm a software engineer. I make things happen automatically.
Highlighted
New Member
5 0 0
Hi Lukasz,

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

Thanks in advance,
Yai
0 Likes
Highlighted
New Member
5 0 0
Hi Lukas,

Access granted! Thanks in advance,
rgds,
Yai
0 Likes
Highlighted

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.
0 Likes