A hideable section in Mailchimp allows you to toggle whether that section is output in the email you want to send. It’s really useful for times when you might now have any content for that section or it’s not relevant at the time.
Mailchimp by default places the hideable icon right in the middle of the template which is problem if you have other editable content directly behind it. No matter what you do, you’ll never reach that hideable icon before you first triggering the editable content around it.
The show/hide icon shows, then hides!
The Mailchimp custom HTML editor can be styled with CSS in your actual template which is quite useful to us (in this instance!).
First, we want to head to the Content Studio and create a folder called ‘Mailchimp UI’.
Then download these improved hideable icon images and upload them to your new Mailchimp UI folder.
Now here comes the coding part! Add the following CSS before the closing head tag.
Move the icon to the left
First we want to move the show/hide icon to the left so it doesn’t become impossible to click if it shows above an editable area.
Now we can point to our new show/hide icons. Add the respective icon URLs to each background image attribute.
As the show/hide icon is also used for repeatable content, we only want to change the size of the hideable section icon.
Now we have larger, easier to target icons that clearly show the button’s intent which is to either hide or show the section.
It’s a small win but it’s the small details that make the editorial experience a little better for our customers and hopefully yours too!
