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.