• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

OrganicWeb

Mailchimp Training & Consulting

  • Home
  • Services
    • Mailchimp Training
    • Mailchimp Consulting
  • Free Tools
    • Mailchimp Tutorials on YouTube
    • Subject Line Generator
    • Marketing Ideas Generator
    • Map Maker for Email
    • WhatsApp Click to Chat Generator
    • Avoid Email Going to Spam
    • Email Link Generator
    • Is Mailchimp Down?
    • Marketing Facts and Stats
  • Content
    • Blog
    • Videos
  • Contact & About
    • Contact
    • About

A responsive countdown timer for Mailchimp

Creating a sense of urgency prompts our potential customers to buy. Scarcity of course is another means of persuading people to buy. In email marketing, or on our website, a countdown timer is a great way to impose these psychological effects on our clients.

A simple countdown timer for email marketing

On websites we can code a countdown timer using, for example, JavaScript or PHP or even use an already coded timer such as a WordPress plugin. Unfortunately inserting code into an email won’t show to many of your recipients due to the variances in email reader capabilities. The most reliable means of inserting a countdown timer into a campaign in by embedding an image which shows the time remaining.

NiftyImages has a free plan where you can create and customise the look of countdown timers that you may embed into your Mailchimp campaigns. The example above shows a timer created with NiftyImages.

Horizontal scrolling to see full email campaign width

Once you’ve created your timer in NiftyImages you’ll receive some code that you can add to a Mailchimp code content block that will display the image. The code will look something like:

<img src="https://img1.niftyimages.com/bmi/cg-/02k" />

You’ll notice that if you view the campaign on a small width screen (e.g. Android phone or iPhone), the countdown time image will force you to horizontal scroll to see the full width email message. Fortunately with a few simple changes we can make the image responsive so that subscribers don’t need to scroll to see the full width email you send them.

How to make your email countdown timer looks good on small screens

To make the NiftyImages countdown timer image responsive (so it looks good on mobile and other small width devices) follow these instructions:

  1. In Mailchimp, add a code content block to your campaign.
  2. Add the following to the code content block in Mailchimp:
    <style type="text/css">
        @media only screen and (max-width: 480px){
            .organicweb{
                height:auto !important;
                max-width:600px !important;
                width: 100% !important;
            }
        }
    </style>
  3. Create your countdown timer in NiftyImages and copy the HTML provided.
  4. In Mailchimp, add the HTML to the code content block (below the CSS as added earlier).
  5. Your code will look something like
    <img src="https://img1.niftyimages.com/bmi/cg-/02k" />

    Change this to include class="organicweb" e.g.

    <img class="organicweb" src="https://img1.niftyimages.com/bmi/cg-/02k" />

You’ll notice that the image in your email campaign will now resize according to the width of the viewing screen. A simple solution to make your countdown timer display responsively.

Found this useful? Please share:

Related

  • How to Add a Surveymonkey or Typeform Survey to Mailchimp
  • Magically Have Mailchimp Capitalize Your Subscribers First Names
  • How to send an attachment in Mailchimp

Filed Under: Marketing

Watch Gary in action

Gary frequently adds Mailchimp instructional videos to his YouTube channel. Subscribe to keep updated.

→  Subscribe   ←

How to add an editable attachment to a Mailchimp campaign.

How to add, and send, coupon codes in Mailchimp.

Reader Interactions

Comments

  1. wissensagentur says

    February 22, 2019 at 10:51 pm

    Thank you so much for this! It works pretty well and without you code I had no chance to get this right as a nontechy person.

    Reply
  2. Omisha says

    July 20, 2019 at 9:07 pm

    How do i change the date?

    Reply
    • Gary says

      July 21, 2019 at 12:05 pm

      Login to Nifty Images and they provide the means to change the date.

      Reply

Leave a Reply Cancel reply

You are here: Home / Marketing / A responsive countdown timer for Mailchimp

Primary Sidebar

Mailchimp write about my work

Read on Mailchimp.com

Learn from a Mailchimp Pro Partner

Signup to receive info about Gary's Mailchimp beginner and advanced classes.

Sign up

Gary on Australian National Radio

Changes are coming to the Australian Spam Act

Read Gary's article in SmartCompany

Meet Gary, Mailchimp Expert

Gary is a Mailchimp Expert and Partner. He delivers Mailchimp training and consulting services in Australia, New Zealand and Singapore. Gary presents at Mailchimp events and hosts the first, and only, Australian Mailchimp sponsored event. He is M.B.A. qualified from Henley Business School, U.K.

Contact Gary for your Mailchimp needs

Footer

Customer Rating

Mailchimp Pro Partners

Contact

Contact Gary for all your Mailchimp training, consulting and integration needs.

Contact Gary.

Copyright © 2022 · Sitemap · ABN: 40800872179 · Privacy Policy · Terms of Service