Create an Easter Egg Hunt on your website!

April 18, 2014
by Max

    Every easter for my client Lupine, we create a virtual easter egg hunt on their website. I randomly place little easter egg images throughout the web pages, and when they are clicked on, a popup appears with a coupon code. It’s a engaging way to have fun with your customers. With Easter coming up in a couple days, I figured I’d share how exactly it works so you can use this cool method if you’d like to on your own store.

    Lupine‘s website is run on BigCommerce and is using a jQuery library called jQuery UI. If your website is not currently utilizing jQuery UI, I highly recommend as a UI framework. This could also be done with others like Bootstrap, but this example uses jQuery UI. If you’re not using jQuery UI and need instruction on getting it installed, follow this guide.

    1.) Create the easter egg images. Keep them smaller so you can hide them well.
    2.) Create the clickable graphic by making an img tag and wrapping it with an anchor. Give the image an ID that will call the popup. I gave my egg an ID of EasterEgg15. I also wrapped both elements in a parent div with a class of “ee” so that I can hide it with CSS until it’s ready.

    
    <div class="ee"><a href="#"><img id="Easter15egg" alt="" src="https://store.lupinepet.com/product_images/uploaded_images/15-egg.png" /></a></div>
    

    3.) If you want to position the egg more specifically, use inline styles and add positioning to the parent div to position the egg around the page. IE:

    
    <div class="ee" style="position: relative; top: 195px; left: 300px;"><a href="#"><img id="Easter15egg" alt="" src="https://store.lupinepet.com/product_images/uploaded_images/15-egg.png" /></a></div>
    

    4.) Create the popup that will appear when someone clicks on the egg. This done by just creating a simple div with a unique ID – mine is Easter15dialog. provide a title and display: none to hide it initially.

    
    <div id="Easter15dialog" style="display: none;" title="You've Found an Egg!">
    <h2 style="text-align: center; color: #505050;">You&#8217;ve found an Easter Egg!</h2>
    <p style="margin: 15px; font-size: 16px; text-align: center; color: #505050;">Hoppy Easter! Create a fun message with a <strong>Coupon Code</strong> here.
    </div>
    

    5.) Bring it all together by binding the link to the dialog by using some jQuery.

    
    <script type="text/javascript">// <!&#091;CDATA&#091;
    $&;(document).ready(function () {
        $&;('#Easter15egg').click(function () {
            $&;('#Easter15dialog').dialog().dialog('open');
            return false;
        });
        });
    
    // &#093;&#093;></script>
    

    That’s it! You should now see the popup when you click the egg. Mix it up by creating multiple eggs with different discounts or free shipping with varying difficulty of finding them. You’ll have to create multiple popups and initialize each one.

    If you’re using this on your Big Commerce store, be wary of any activated mobile templates as those provide a completely different template and mobile users wouldn’t see these eggs unless provided.

    About

    Max Avedisian has had the pleasure of working with a extremely broad range of clients in order to bring the best in technology and digital production today. From traveling the world as a production and band assistant, to cutting-edge video production, to next-level graphic and web design, Max Avedisian has serviced a wide range of needs and has met the challenges of many businesses small and large. Max has been professionally pursuing his passions in Digital Design since his graduation from Full Sail University in 2010.

    Leave a Comment