Update 20 Feb 2019: Maropost Commerce Cloud will be closing down their old Maropost Commerce [email protected] newsletter service in favour of Mailchimp and Smartrmail.
All sites that use the default Maropost Commerce Cloud newsletter subscribe form in their footer can follow the instructions below to redirect signups to Smartrmail or Mailchimp.
Once you start sending email newsletters to your customers and prospects, any email address you collect is a chance to improve your webstore success.
When you use Mailchimp For Maropost Commerce Cloud or Smartrmail, all customers that opt-in when making a purchase are automatically added to your newsletter list.
But that’s not the only way to collect newsletter subscribers. Having a newsletter subscribe form in your website footer is the first step to building a great email list.
In this post, we’ll show you how to easily replace the default Maropost Commerce Cloud footer subscribe form with a Mailchimp or Smartrmail subscribe form.
The method below is a quick way that has worked without further tweaking on 9 out of 10 Maropost Commerce Cloud themes we have come across.
Heads up! Following this post entails making code level changes to your Maropost Commerce Cloud site. If you are not familiar with html and css we suggest that you do not follow these instructions. Instead, pass a link to this post to your developer, or get in touch with Keetrax or another Maropost Commerce Cloud design partner to help you out!
Using Mailchimp
1. Get the embed code
First, lets get your Mailchimp form embed code. Log in to Mailchimp and find the list that you want your new emails to be subscribed to.
Click on the menu button to the right of the list, and navigate to “Signup forms”:
On the next page, click “Select” on “Embedded forms”:
In the code snippet that you see on the next page, copy the parts of the code I have highlighted in the screenshot below.
We’re looking for the form action (top) and the hidden field name (bottom).
2. Add the Mailchimp sign-up form to your Maropost Commerce Cloud website
Now, find your footer template. An easy way to get there is via “All Settings & Tools” in the Maropost Commerce Cloud control panel. From there, click on “Webstore Templates”.
From there, you will find your footer template under your_theme > templates > footers > template.html.
Note: now is a good moment to make a full backup copy of the file and save it somewhere on your computer. This means that if things go wrong, you’ll be able to recover quickly!
In the footer template, find your current newsletter subscribe form.
Replace the whole subscribe form with the following code block:
<form action="[REPLACE-ME-1]"
method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="newsletter validate" target="_blank"
novalidate="">
<div id="mc_embed_signup_scroll">
<div class="mc-field-group input-group" role="group">
<input type="email" value="" name="EMAIL" class="required email form-control input-email" id="mce-EMAIL"
placeholder="Enter your email address" required="" aria-label="Email Address">
<div class="input-group-btn">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-default"
data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">
</div>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="[REPLACE-ME-2]" tabindex="-1" value="">
</div>
</div>
</form>
See where it says [REPLACE-ME-1] and [REPLACE-ME-2]? You need to replace those with the form action and hidden field name that you got from Mailchimp earlier.
So in our example, it now looks like this:
Now, save your changes, and refresh the cache.
When you reload your website, you will now have a Mailchimp subscribe form! Make sure to test it out to confirm that everything went well, and you’re good to go!
Using Smartrmail
1. Get the embed code
First, lets get your Smartrmail form embed code. Log in to Smartrmail and go to “Subscribers”.
Next, open the manually created list that you want your new subscribers to be added to:
On the list page, scroll down until you see the “sign up form” settings. Click on “customise form”:
Scroll down to the “Embedded HTML Code”. Look for the form action and copy it – see the highlighted URL in the screenshot below:
2. Add the embed code to your Maropost Commerce Cloud site
Now, find your footer template. An easy way to get there is via “All Settings & Tools” in the Maropost Commerce Cloud control panel. From there, click on “Webstore Templates”.
From there, you will find your footer template under your_theme > templates > footers > template.html.
Note: now is a good moment to make a full backup copy of the file and save it somewhere on your computer. This means that if things go wrong, you’ll be able to recover quickly!
In the footer template, find your current newsletter subscribe form.
Replace the whole subscribe form with the following code block:
<form accept-charset="UTF-8" action="[REPLACE-ME]" method="post">
<div class="input-group">
<input name="subscribe_form[anti_bot]" type="text" style="display: none" />
<input id="subscriber_email" name="subscribe_form[email]" type="email" placeholder="Enter your email address"
required="" aria-label="Email Address" class="required email form-control input-email">
<div class="input-group-btn">
<input name="commit" type="submit" value="Subscribe" class="btn btn-default"
data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">
</div>
</div>
</form>
See where it says [REPLACE-ME]? You need to replace that with the form action that you got from Smartrmail earlier.
So in our example, it now looks like this:
Now, save your changes, and refresh the cache.
When you reload your website, you will now have a Smartrmail subscribe form! Make sure to test it out to confirm that everything went well, and you’re good to go!
