Solved: How to replace Mailchimp with Shopify default newsletter sign-up form? - Page 2 - Shopify Community

Promotion image

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)

314 24 120

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

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

View solution in original post

Replies 12 (12)