Go to Stripo
All Collections
Editor Questions
How-To Questions
How to create an HTML carousel for your emails?

How to create an HTML carousel for your emails?

This article will show you how to create an HTML carousel for your emails.
Valeriia avatar
Written by Valeriia. Updated over a week ago

In this article, we will show you how to create an HTML carousel for your emails and will provide you with all the necessary code samples to make the creation process really fast.

Step 1. Getting started

Drag the HTML block into your template;

Double-click it in the editor to open its code;

Paste the following code sample.

Code sample to copy and paste:

<!--[if !mso]><!-->
<div id="shopping-crt" style="mso-hide:all;display:none;max-height:0px;overflow:hidden;">

  <inputclass="y-hide"type="radio"id="pbuds-white"name="icon"checkedstyle="display:none;mso-hide:all;">

  <inputclass="y-hide"type="radio"id="pbuds-orange"name="icon"
style="display:none;mso-hide:all;">

  <inputclass="y-hide"type="radio"id="pbuds-mint"name="icon"style="display:none;mso-hide:all;">

  <inputclass="y-hide"type="radio"id="pbuds-charcoal"name="icon"style="display:none;mso-hide:all;">

</div>
<!--<![endif]-->

Please be advised:

  • all elements, except the first one, should always be hidden. This is why we’ve added the style display:none; and special styles for different email clients;

  • we used the y-hide class to hide these elements in Yahoo;

  • we used the mso-hide:all style to hide these elements in Outlook;

  • also to hide the entire carousel in the Outlook app for desktops, we wrapped it in the <!--[if !mso]><!--> <!--<![endif]--> comment.

Step 2. Customizing the code

Now we may proceed to adding product images and colors.

First off, you need to paste the code given below right above the closing tag </div>.

Code sample to copy and paste:

<div id="carousel" style="mso-hide:all;display:none;max-height:0px;overflow:hidden;">

    <table width="100%" style="mso-hide: all;" role="presentation" cellpadding="0" cellspacing="0" border="0">

        <tbody>
            <tr>
                <td width="100%" align="center">

                    <div class="content-1 olcom-display hero-bg1"><img src="https://services.google.com/fh/files/emails/atc-pixelbuds-desktop-image-hero-2-white.png" width="515" class="hero-imgs ios-hide" alt></div>

                    <div class="content-2 y-hide olcom-hide hero-bg2" style="display: none;"><img src="https://services.google.com/fh/files/emails/atc-pixelbuds-desktop-image-hero-2-orange.png" width="515" class="hero-imgs ios-hide"  alt></div>

                    <div class="content-3 y-hide olcom-hide hero-bg3" style="display: none;"><img src="https://services.google.com/fh/files/emails/atc-pixelbuds-desktop-image-hero-2-mint.png" width="515" class="hero-imgs ios-hide"  alt></div>

                    <div class="content-4 y-hide olcom-hide hero-bg4" style="display: none;"><img src="https://services.google.com/fh/files/emails/atc-pixelbuds-desktop-image-hero-2-charcoal.png" width="515" class="hero-imgs ios-hide" alt></div>

                    <div class="olcom-hide">
                      <table class="icons" style="mso-hide: all;" role="presentation" cellpadding="0" cellspacing="0" border="0">
                        <tbody>
                          <tr>

                              <td style="padding-right: 15px;"><label for="pbuds-white"><img src="https://services.google.com/fh/files/emails/color-picker-white-desktop.png" class="icon1" alt></label></td>

                              <td style="padding-right: 15px; padding-left: 15px;"><label for="pbuds-orange"><img src="https://services.google.com/fh/files/emails/color-picker-orange-desktop.png" class="icon2"  alt></label></td>

                              <td style="padding-right: 15px; padding-left: 15px;"><label for="pbuds-mint"><img src="https://services.google.com/fh/files/emails/color-picker-mint-desktop.png" class="icon3" alt></label></td>
        <td style="padding-left: 15px;"><label for="pbuds-charcoal"><img src="https://services.google.com/fh/files/emails/color-picker-charcoal-desktop.png" class="icon4" alt></label></td>

                          </tr>
                        </tbody>
                      </table>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Please be advised:

  • each product image is wrapped in a <div> block with the appropriate class content-1, content-2, etc.;

  • images with colors are placed in a tag <label> with an attribute <for> for each input. Due to this, the matching input will have the value checked, and we will be able to hide or show the desired block;

  • all product images, except for the first one, have display:none style;

  • the y-hide and olcom-hide classes are required to hide an element in Yahoo and Outlook. These classes are described above;

the classes hero-bg1, hero-bg2, etc. are required for styles on mobile devices. They also include links to product images. It is important. When you change images in the layout, you need to change them in these styles as well. Styles will be described below.

Step 3. Building a fallback

Now we need to create a fallback for those email clients that do not support the styles required for the carousel.

Please paste it at the very beginning of the carousel code.

Code sample to copy and paste:

<!-- FALLBACK -->

<table id="fallback" class="webkit-hide" width="100%" bgcolor="#f8f8f8" role="presentation" cellpadding="0" cellspacing="0" border="0">
    <tbody>
        <tr>
            <td>
                <table style="border-collapse: collapse;" role="presentation" cellpadding="0" cellspacing="0" border="0">
                    <tbody>
                        <tr>
                            <td style="border-collapse: collapse; font-family: 'Google Sans', Arial, sans-serif; font-weight: normal; padding-bottom: 10px;">

                                <!-- CTA BUTTON -->

                                <table align="center" class="cta-btn " style="margin: 0 auto; padding: 0; border-spacing: 0; border-radius: 2px; background-color: #1A73E8; border-collapse: separate; font-weight: normal; color: #ffffff;" bgcolor="#1A73E8" role="presentation" cellpadding="0" cellspacing="0" border="0">
                                    <tbody>
                                        <tr>
                                            <td style="border-collapse: collapse; padding: 0; text-align: left; mso-padding-alt: 8px 24px; color:#ffffff; border-radius: 4px; background-color: #1A73E8; border: 1px solid #1A73E8; font-family: 'Google Sans', Arial, sans-serif; font-weight: normal;" align="left" bgcolor="#1A73E8"><a href="https://viewstripo.email/" target="_blank" style="text-align: center; text-decoration: none; border-radius: 2px; font-size: 16px; line-height: 24px; color: #ffffff; font-family: 'Google Sans', Arial, sans-serif; font-weight: normal; letter-spacing: normal;" class="esd-frame-element esd-hover-element esdev-disable-select">

                                                    <!--[if !gte mso 9]><!----><span style="padding: 8px 24px; display: block;">
                                                        <!--<![endif]--> Shop
                                                        <!--[if !gte mso 9]><!---->
                                                    </span>
                                                    <!--<![endif]-->
                                                </a></td>
                                        </tr>
                                    </tbody>
                                </table><!-- /CTA BUTTON -->
                            </td>
                        </tr>
                        <tr>
                            <td><a href="https://viewstripo.email/" style="color: #1A73E8; text-decoration: none; font-family: 'Google Sans', Arial, sans-serif; font-weight: normal; letter-spacing: normal;" class="esd-frame-element esd-hover-element esdev-disable-select"><img src="https://services.google.com/fh/files/emails/crm-presto-preorder-desktop-image-hero-2-orange.png" width="600" class="m-hide" style="border: none; display: block;" border="0" alt>

                                    <!--[if !mso]><!--><img src="https://services.google.com/fh/files/emails/crm-presto-preorder-mobile-image-hero-2-orange.png" width="100%" style="mso-hide: all; border: none; display: none;" class="d-hide m-fluid" border="0" alt>

                                    <!--<![endif]-->
                                </a></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>

</table
><!-- /FALLBACK -->

In our case, a fallback is a button with a product image that directs to the site.

  • please, replace existing links with the your product links in two places, as shown below:

  • replace existing links with the links to product images:

Step 4. Working on the HMTL carousel styles

Now, we need to add styles.

You can either insert a style tag right before your code, or paste only the styles without the <style type="text/css"></style> tag into the CSS tab.

Important:

You must choose either tab: HTML or CSS, do not paste the styles into both.

Please be advised:

the styles below describe how the carousel works. Using the checked state of the inputs, upon a click on the label elements with the product's color, we hide the unnecessary ones and show the necessary blocks.

  • to visually show what color is selected, we use the following styles for each color;

  • the styles below show product images on mobile devices. Change them as well when changing product images.

The styles in the @media screen yahoo{ } block are for Yahoo. Styles that start with [owa] are for Outlook. Outlook also needs the [class~="x_hero-bg1"] styles, just in case [owa] doesn't work. The Body [data-outlook-cycle] styles are meant for Outlook on iOS and Android mobile devices.

Did this answer your question?