Articles in this section

See more

Avoiding MailChimp Conflicts

Advanced Customization

Please note that this tutorial is considered an advanced customization and is not supported by Out of the Sandbox. If you encounter difficulties with this, please contact a third party developer for more troubleshooting, customization or functionality.

  • Last updated:
  • Updated
Follow

As of March 21st 2019, the Mailchimp for Shopify integration has been removed from the Shopify Marketplace. 

View Mailchimp's official statement

Learn more about Mailchimp's changes to their integration with Shopify, instructions to sync your contact lists, and manual workarounds for marketing features.

As far as we know, the 'Form Action URL' setting of the Turbo theme will continue to function for adding email address submissions to a List on Mailchimp. 

If you're using the MailChimp popup subscribe form on your storefront, there is a known conflict when integrating this functionality in Out of the Sandbox themes. This can be resolved by implementing some minor CSS adjustments. Please head to your "styles.scss" file located in Online Store > Themes > Edit code > Assets. The code you'll want to add will vary slightly depending on how you'd like the form to work.

 

In This Article

 

Hide the form on mobile devices

To hide the form completely on mobile devices, which can sometimes be a better route from a user experience standpoint and better conform with Google's mobile popup penalty, please add the following to the bottom of your "styles.scss" file located in Online Store > Themes > Edit code > Assets:

@media only screen and (max-width: 768px) {
  .mc-banner { display: none !important; }
}
 

Move the pop-up on mobile devices

If your site has a fixed navigation bar, the popup window often conflicts with this functionality. To resolve these conflicts, you have two choices:

 

Move the pop-up to the middle of the screen:

To move the MailChimp pop-up to the middle of the screen, please add the following to the very bottom of your "styles.scss" file located in Online Store > Themes > Edit code > Assets:

@media only screen and (max-width: 768px) {
  .mc-banner { top: 50% !important; }
}

 

Overlay the pop-up

To make the popup visible over the navigation bar, please add the following to the very bottom of your "styles.scss" file located in Online Store > Themes > Edit code > Assets:

@media only screen and (max-width: 768px) {
  .mc-banner { z-index: 9999 !important; }
}
 

Add an overlay to the pop-up

By default, MailChimp does not darken the space around the popup window, which can often be confusing because users don't realize they have to close the window. To add a dark overlay to your pop-up, please add the following code to the very bottom of your "styles.scss" file located in Online Store > Themes > Edit code > Assets:

@media only screen and (max-width: 768px) {
  .mc-modal-bg { background-color:rgba(0, 0, 0, 0.5); !important; }
}
 

Allow content to be clicked

The final option is to allow page content to still be clicked even when the popup is visible. To make these adjustments, please add the following to the very bottom of your "styles.scss" file located in Online Store > Themes > Edit code > Assets:

@media only screen and (max-width: 768px) {
  .mc-banner { display: none !important; }
}

One downside of this approach, however, is that if the user clicks content, the popup window will not close automatically and elements on the page will still be hidden behind the popup.

 

Related articles