Articles in this section

See more

Avoiding MailChimp Conflicts

  • Last updated:
  • Updated
Follow
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.

Introduction

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