• Projects
  • Blog

Improving the usability of Mailchimp’s hideable button

Does Mailchimp's hideable icon show current state or intent? Let's make the button clearer with new action intent icons!

Posted: 24th February 2021

What is a hideable section?

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.

The UI problem

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 solution

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.

Additional template code

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.

Use the Copy image URL function then paste in the respective URLs

As the show/hide icon is also used for repeatable content, we only want to change the size of the hideable section icon.

The outcome

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!