Big Cartel Theme Support

How do I add a newsletter subscription form to my Big Cartel theme?

How do I add a newsletter subscription form to my Big Cartel theme?

Choose Your Newsletter Service

If you do not already have a newsletter (a.k.a. mailing list) service, you will first need to create an account with one. There are many options available, and all will work with your Aarcade theme and Big Cartel shop. Some of our preferred newsletter services include:

  1. YMLP
  2. MailChimp
  3. TinyLetter

Once you have created an account with a newsletter service, you will be able to access the following:

  1. Sign-up form link: This is a link to your sign-up form hosted by your newsletter provider. Sending visitors to this link is the easiest way to use your sign-up services.
  2. Sign-up form HTML code: This is HTML code that you can insert into your own web page, to display a sign-up form at your site.
  3. Popup sign-up form code: This is JavaScript code that you can insert into your own web page, to display a popup sign-up form at your site. Not all providers will have their own popup code, however Aarcade themes include tools for easily creating your own popup (as detailed below).

The controls to access these items will differ between newsletter services, so it is recommended that you refer to your particular service’s help section and contact their support if needed. In some cases you may need to create a contact group and/or newsletter (also referred to as a list or campaign) before the sign-up form options are made available to you.

Your newsletter service may also allow you to edit the appearance and text for your sign-up forms, so make use of these controls before using your forms with your site.

Newsletter Display Options

Regardless of which method(s) you use to apply your newsletter sign-up, always test your changes thoroughly, including sign-up and shop functionality, on both desktop and mobile devices.

Some of the ways you can use your your sign-up form link include:

  1. Add the link URL to the Newsletter URL field in your shop license — in the Licenses area of your Aarcade admin — to display the link along with your other social network links.
  2. Add the link to one of your main menus using the x-sp-link special menu item detailed at How do I edit my navigation menus in my Big Cartel admin?
  3. Use the link anywhere in your page content — refer to How do I link to a web address or a file from my page? — or in your custom email communications.

Using your sign-up form HTML code

Some of the ways you can use your your sign-up form HTML code include:

  1. Insert your newsletter form code into a custom page, refer How do I add a page to my Big Cartel shop?
  2. Insert your newsletter form code via an Insert Content page, refer An introduction to the Insert Content method.
  3. Create an x-sp-modal special menu item — refer to How do I edit my navigation menus in my Big Cartel admin? — to add a link to one of your main menus that displays your newsletter in a popup form.
  4. Use your newsletter form with a [[popup]] shortcode — refer to Shortcodes - Popup links and windows
  5. Use your newsletter form attributes in the [[newsform]] shortcode — refer to Shortcodes - Newsletter signup form and How do I add a search or newsletter form input to my header or footer?

Using your popup sign-up form code

To insert a newsletter provider’s popup sign-up form code, use the methods detailed in the article How do I add custom JavaScript to my Big Cartel shop?.


For this example, we have a TinyLetter account. We’ve set all of our custom options to our preference and we’re ready to link to our sign-up form. We locate the link in the Share section of our controls at TinyLetter, labelled Your subscribe form link:

https://tinyletter.com/featherweight

We want this link to appear in our main menu, so we use option 2 from Using your sign-up form link above, and create a new page in our Big Cartel admin and name it…

x-sp-link Join our Newsletter

..and then switch to HTML edit mode and add the following to the page content…

https://tinyletter.com/featherweight##nw

..and then save our changes. Note that we added ##nw to the end of the URL in this example, to make the link open in a new browser window.


For this example, we have a MailChimp account. We’ve created a list and set all of our custom options to our preference and we’re ready to add our sign-up form to the footer of our shop. We locate the form code in the Lists > Our list name > Signup forms > Embedded forms section of our controls at MailChimp, labelled Copy/paste onto your site:

<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//aarfie.us1.list-manage.com/subscribe/post?u=153800a4512df382d14b6d0fa&id=20a03c4bd0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
    <div id="mc_embed_signup_scroll">
	<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
	<label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
	
</div>
	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response"></div>
		<div class="response" id="mce-success-response"></div>
	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div></div>
    <div class="clear"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

We want to add our form to the footer of our shop, so we use option 2 from Using your sign-up form HTML code above, and create a new Insert Content page in our Big Cartel admin and name it…

x-ic-after-footer

..and then switch to HTML edit mode and paste our form into the page content…

[[clearspace height="30"]]

<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//aarfie.us1.list-manage.com/subscribe/post?u=153800a4512df382d14b6d0fa&id=20a03c4bd0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
    <div id="mc_embed_signup_scroll">
	<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
	<label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
	
</div>
	<div id="mce-responses" class="clear">
		<div class="response" id="mce-error-response"></div>
		<div class="response" id="mce-success-response"></div>
	</div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div></div>
    <div class="clear"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

..and then save our changes. Note that we use the [[clearspace]] shortcode — see Shortcodes - Add or remove space — to create some space above our form.

Let’s say we’re not entirely happy with the appearance of the form at this stage. We decide to try the [[newsform]] shortcode — option 5 from Using your sign-up form HTML code above — instead of the default MailChimp form code.

So we change the content of our x-ic-after-footer footer page to:

<div style="margin: 30px auto;text-align: center">
<h3>Sign up to our newsletter for exclusive discounts and sales!</h3>

[[newsform input="jondoe@mail.com" action="//aarfie.us1.list-manage.com/subscribe/post?u=153800a4512df382d14b6d0fa&id=20a03c4bd0" name="EMAIL"]]
</div>

Note that we used additional HTML to center, style and add text to our form.


Example 3: Using the sign-up form code in a popup

For this example, we have a YMLP account. We’ve set all of our custom options to our preference and we’re ready to display our sign-up form in a popup at our Big Cartel shop. We locate the form code in the Website Forms > Create/edit form > Add Form to Your Site section of our controls at YMLP, labelled HTML Code Snippet for Manual Website Form:

<form method="post" action="http://ymlp.com/subscribe.php?id=geeqmmqgmgh" target="_blank">
<table border="0" align="center" cellspacing="0" cellpadding="5">
<tr><td colspan="2"><font size="2" face="verdana,geneva">Fill out your email address<br />to receive our newsletter!</font></td></tr>
<tr>
<td valign="top"><font size="2" face="verdana,geneva">Email address:</font></td>
<td valign="top"></td>
</tr>
<tr><td colspan="2"> </td></tr>
</table>
</form>

We want our form to popup for new visitors to our shop, so we use option 4 from Using your sign-up form HTML code above. We want the form to popup regardless of which page the visitor lands on, so we choose the Insert Content method x-ic-after-all - option 2 from Using your sign-up form HTML code above.

We create a new Insert Content page in our Big Cartel admin and name it..

x-ic-after-all

..and then switch to HTML edit mode and paste our form into the page content, wrapped in our [[popup]] shortcode with the timer set to 8 seconds..

[[popup timer="8000" name="My newsletter popup"]]

<form method="post" action="http://ymlp.com/subscribe.php?id=geeqmmqgmgh" target="_blank">
<table border="0" align="center" cellspacing="0" cellpadding="5">
<tr><td colspan="2"><font size="2" face="verdana,geneva">Fill out your email address<br />to receive our newsletter!</font></td></tr>
<tr>
<td valign="top"><font size="2" face="verdana,geneva">Email address:</font></td>
<td valign="top"></td>
</tr>
<tr><td colspan="2"> </td></tr>
</table>
</form>

[[/popup]]

..and then save our changes. Don’t click the close button on your popup while you are fine tuning its appearance. Once you close it, it will not reappear unless you rename it. Refer to the support article Shortcodes - Popup links and windows for more information on this and available options.

We can also get fancy with our form styling by applying custom CSS - see How do I create custom style code? - or by using some of the classes built into all Aarcade themes. For example, in the following code we’ve reformatted our YMLP code into a paper class form (a built in form class) and added an intro title and text:

[[popup timer="8000" name="My newsletter popup"]]

<h2>Sign up to our newsletter!</h2>

<p>Sign up and get a discount code for immediate savings. You'll also be amongst the first to find out about new items and sales.</p>

[[clearspace height="30"]]

<form class="paper" method="post" action="http://ymlp.com/subscribe.php?id=geeqmmqgmgh" target="_blank">
	<div class="grid table">
		<div class="inner">
			<div class="form-item tile">
				<label>Email address:</label>
				
			</div>
		</div>
	</div>
	<div class="form-item">
		<button type="submit">Sign Up</button>
	</div>
</form>

[[/popup]]


Example 4: Using the popup sign-up form code

For this example, we have a MailChimp account. MailChimp has their own popup sign-up code and we’ve decided to use that. We’ve created a list and set all of our custom options to our preference and we’re ready to add our code. We locate the code in the Lists > Our list name > Signup forms > Subscriber Popup section of our controls at MailChimp.

After we’ve styled our Subscriber Popup and click the Publish button to apply our final changes, we click the View Code button to copy the code for our site.

Now we’re ready to insert the JavaScript as detailed in the article How do I add custom JavaScript to my Big Cartel shop?. We create a new Insert Content page in our Big Cartel admin and name it..

x-ic-close-body-code

..and then switch to HTML edit mode and paste our code into the content of the page..

<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us1.list-manage.com","uuid":"153800a4512df382d14b6d0fa","lid":"20a03c4bd0"}) })</script>

..and then save our changes.

After adding our JavaScript we thoroughly test the popup, as well as our shop, to ensure it does create any errors or conflicts with important functionality like site navigation and product add to cart and checkout.

If your MailChimp script prevents your pages from scrolling correctly (this typically happens on page loads after dismissing the popup), you can try adding , parseOnLoad: true to the data-dojo-config attribute within the first <script> tag. In our example, this would be:

<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false, parseOnLoad: true"></script><script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us1.list-manage.com","uuid":"153800a4512df382d14b6d0fa","lid":"20a03c4bd0"}) })</script>

AarcadeHow do I add a newsletter subscription form to my Big Cartel theme?