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

[ozgaga]

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

[LukaszWiktor · 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).

Hope this helps,
Lukasz

[ozgaga]

Thank you Lukasz!

[Yain]

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]

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

[Yain]

Hi Lukasz, 

Thank you so much for your support.  

Thanks in advance,

Yai

[LukaszWiktor]

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

[Yain]

Hi Lukas,

Access granted! Thanks in advance,
rgds,
Yai

[LukaszWiktor]

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

[Yain]

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]

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]

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

[Yain]

Hi Lukasz,

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

Thanks in advance,
Yai