Stripo provides a great tool “AMP Carousel” for creating product carousels in email templates.
However, not all email services support AMP elements.
In this article, we will show how to create a product carousel using regular HTML/CSS code.
Important: This article describes a custom solution, so basic HTML/CSS skills are required.
Note: The HTML Carousel from this article is currently supported only on AppleMail and SamsungMail.
Step 1. Getting started:
Click on the "Content" → "Blocks" in the editor;
Drag the HTML block into your template;
The code editor will be opened and you will see the HTML block’s code;
Replace the existing code with the following code sample:
Code sample to copy and paste:
<style type="text/css">
@media screen and (max-width: 600px) {
.m-fluid {
width: 100% !important;
}
.cta-btn a {
font-size: 16px !important;
line-height: 24px !important;
}
.cta-btn span {
padding: 8px 24px !important;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
input.fallback_ctrl:checked~#shopping-crt {
display: block !important;
max-height: none !important;
background-color: #f8f8f8;
}
input.fallback_ctrl:checked~#fallback {
display: none !important;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
table.icons img {
width: 64px;
height: 64px;
}
#carousel {
display: block !important;
max-height: none !important;
}
#pbuds-orange:checked~div table table img.icon2,
#pbuds-mint:checked~div table table img.icon3,
#pbuds-charcoal:checked~div table table img.icon4 {
border-radius: 100%;
cursor: pointer;
}
img.icon1 {
position: relative;
border-radius: 100%;
cursor: pointer;
}
#pbuds-white:checked~div table table img.icon1 {
position: relative;
border-radius: 100%;
cursor: pointer;
border: 2px solid #d8d8d8 !important;
border-radius: 100%;
padding: 4px;
width: 52px;
height: 52px;
}
img.icon2,
#pbuds-white:checked~div table table img.icon1,
#pbuds-mint:checked~div table table img.icon3,
#pbuds-charcoal:checked~div table table img.icon4 {
border-radius: 100%;
cursor: pointer;
}
#pbuds-orange:checked~div table table img.icon2 {
position: relative;
border-radius: 100%;
cursor: pointer;
border: 2px solid #d8d8d8 !important;
border-radius: 100%;
padding: 4px;
width: 52px;
height: 52px;
}
img.icon3,
#pbuds-white:checked~div table table img.icon1,
#pbuds-orange:checked~div table table img.icon2,
#pbuds-charcoal:checked~div table table img.icon4 {
border-radius: 100%;
cursor: pointer;
}
#pbuds-mint:checked~div table table img.icon3 {
position: relative;
border-radius: 100%;
cursor: pointer;
border: 2px solid #d8d8d8 !important;
border-radius: 100%;
padding: 4px;
width: 52px;
height: 52px;
}
img.icon4,
#pbuds-white:checked~div table table img.icon1,
#pbuds-orange:checked~div table table img.icon2,
#pbuds-mint:checked~div table table img.icon3 {
border-radius: 100%;
cursor: pointer;
}
#pbuds-charcoal:checked~div table table img.icon4 {
position: relative;
border-radius: 100%;
cursor: pointer;
border: 2px solid #d8d8d8 !important;
border-radius: 100%;
padding: 4px;
width: 52px;
height: 52px;
}
#pbuds-white:checked~div div.content-1,
#pbuds-orange:checked~div div.content-2,
#pbuds-mint:checked~div div.content-3,
#pbuds-charcoal:checked~div div.content-4 {
display: block !important;
}
#pbuds-orange:checked~div div.content-1,
#pbuds-orange:checked~div div.content-3,
#pbuds-orange:checked~div div.content-4,
#pbuds-white:checked~div div.content-2,
#pbuds-white:checked~div div.content-3,
#pbuds-white:checked~div div.content-4,
#pbuds-mint:checked~div div.content-1,
#pbuds-mint:checked~div div.content-2,
#pbuds-mint:checked~div div.content-4,
#pbuds-charcoal:checked~div div.content-1,
#pbuds-charcoal:checked~div div.content-2,
#pbuds-charcoal:checked~div div.content-3 {
display: none !important;
}
#pbuds-white,
#pbuds-orange,
#pbuds-mint,
#pbuds-charcoal {
display: none;
}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) and (max-width: 600px) {
table.icons img {
width: 36px;
height: 36px;
}
.ios-hide {
display: none !important;
}
.hero-bg1 {
background-image: url(https://services.google.com/fh/files/emails/atc-pixelbuds-mobile-image-hero-2-white.png) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center !important;
width: 100% !important;
padding-top: 87% !important;
}
.hero-bg2 {
background-image: url(https://services.google.com/fh/files/emails/atc-pixelbuds-mobile-image-hero-2-orange.png) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center !important;
width: 100% !important;
padding-top: 87% !important;
}
.hero-bg3 {
background-image: url(https://services.google.com/fh/files/emails/atc-pixelbuds-mobile-image-hero-2-mint.png) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center !important;
width: 100% !important;
padding-top: 87% !important;
}
.hero-bg4 {
background-image: url(https://services.google.com/fh/files/emails/atc-pixelbuds-mobile-image-hero-2-charcoal.png) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center !important;
width: 100% !important;
padding-top: 87% !important;
}
}
[owa] #fallback {
display: block !important;
}
[owa] #shopping-crt {
display: none !important;
}
[id~="x_fallback"] {
display: block !important;
}
[id~="x_shopping-crt"] {
display: none !important;
}
@media screen and (max-width: 600px) {
body[data-outlook-cycle] #fallback {
display: block !important;
}
body[data-outlook-cycle] #shopping-crt {
display: none !important;
}
}
</style>
<!--[if !mso]><!--><input type="checkbox" id="fallback_ctrl" class="fallback_ctrl" style="display:none !important;mso-hide:all;" checked>
<!--<![endif]-->
<!-- FALLBACK -->
<table id="fallback" 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-fluid" style="border: none; display: block;" border="0" alt></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><!-- /FALLBACK -->
<!--[if !mso]><!-->
<div id="shopping-crt" style="mso-hide:all;display:none;max-height:0px;overflow:hidden;"><input type="radio" id="pbuds-white" name="icon" checked style="display:none;mso-hide:all;"><input type="radio" id="pbuds-orange" name="icon" style="display:none;mso-hide:all;"><input type="radio" id="pbuds-mint" name="icon" style="display:none;mso-hide:all;"><input type="radio" id="pbuds-charcoal" name="icon" style="display:none;mso-hide:all;">
<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 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 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 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>
</div>
<!--<![endif]-->
Here is a detailed explanation of the sample code:
All product elements, except the first one, should always be hidden. This is why we’ve added the style
display:none;and other special styles for various email clients;We have used the
mso-hide:allstyle to hide these elements in Outlook;Also to hide the entire carousel in the Outlook app for desktops, we've wrapped it in the
<!--[if !mso]><!--> <!--<![endif]-->comment;Buttons for selecting the needed color are images 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.
The styles depicted in the screenshot below describe how the carousel works. Using the checked state of the inputs, upon clicking on the label elements with the product's color, we are hiding the unnecessary elements and show the necessary ones:
Styles that start with [owa] are for Outlook. The body[data-outlook-cycle] styles are meant for Outlook on iOS and Android mobile devices.
Step 2. Customizing the code:
Now we may proceed adding product images and links.
Each product image is wrapped in a <div> block with the appropriate classes
content-1,content-2, etc. We shall add links to our product images here:
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 must change them in these styles as well:
To change the appearance of buttons, add new image links here:
We also must have a fallback for those email clients that do not support the styles required for the carousel.
The Carousel code contains a fallback part. In our case, the fallback is a button with a product image that directs to a website.
Please, replace existing links with your product links in two places, as shown below;
Replace the existing image path with a link to the product image;
As a result, the appearance of our carousel will be as follows;
And here is how the fallback looks in Gmail.
Thank you for taking the time to read our articles. We hope you will find this information helpful.
If you have any additional questions, please email us at support@stripo.email.
We would be glad to talk with you.