As of March 21st 2019, the Mailchimp for Shopify integration has been removed from the Shopify Marketplace. For existing connected users, the integration will remain in effect through May 12th.
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. We will keep you posted on the best next-steps for your email service integration as we learn more about how the integration with Shopify and Mailchimp will be affected.
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
- Move the pop-up on mobile devices
- Add an overlay to the pop-up
- Allow content to be clicked
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.