1973 Ltd

The Email Shop

By on May 6th In Development
seagate-argos

Over the last few blog posts we’ve been on the hype train for interactive emails. We definitely think it’s the future of email and there’s already a lot you can do with it. We’ve talked about how to make an email interactive as well as explore the creativity side of it with our gaming email example. This time we wanted to create something a bit more commercial friendly that a client could use. This is where ‘The Email Shop’ comes in.

The Email Shop is an interactive email, which incorporates interactive elements to create a shopping like experience within an email. Whilst this concept is nothing new we’ve wanted to build something like this for a while and are keen to share the results. Before we delve deeper into the template feel free to take a look at the finished article (There’s a lot of code to dive into).

What Does The Email Do?

So now that you’ve looked at the code you’re probably wondering what the email does. Well this can be explained below.

The email allows the reader to select what product they want to buy, along with some styling options, before allowing them to add the product to their cart. They can then be directed to a webpage to complete the transaction.

It’s important to note that an interactive email can’t replicate all the steps regarding buying a product, as the support is simply not available on most email clients. This is the reason why the redirect to a webpage is needed.

How Does It Work?

In order to explain how the email works it’s probably best to show visually each step. As mentioned in previous posts on interactive emails the use of checkboxes is needed to hide and show sections of the email depending on the interaction. This email has no less than 48 checkboxes!

The reason for this many interactions in the email are because you need to account for every scenario the reader could go down when selecting and styling their product. Webpages can use JavaScript and other scripts to manipulate the product styling, therefore bypassing the need to have several variants of the same product on one page. Emails however don’t have this luxury, as there is not support for scripts in email, therefore requiring the manual inclusion of every product variant.

We can break down how each variant is placed within the template with a nice flow chart. It will display a small part of the process in our email template –

blog-post-shop-1

As you can see by just having two options when it comes to your choice in pencils you need to have 10 checkboxes. This is because you need a checkbox to select either Black or Blue and then 4 checkboxes for each colour to select what quantity you want. If you apply this logic to all the colour options we have in our email you can see where all the checkboxes have come from

blog-post-shop-2

Although having this many pieces in one email can seem daunting all your doing essentially is displaying one table depending on what colour you’ve selected and then again for the quantity you’ve selected.

Now that we’ve explained how the email works let’s dive into the coding to see what CSS relates to what sections of the email.

The Code

As mentioned before the interactivity in the email is actually very basic to the point where you are just turning elements on or off depending on what the user selects. However, it’s important to discuss what is being turned on or off when the email is clicked. To do this let’s break down the email into the three steps of the email – picking a colour, picking a quantity and adding the product to the cart.

When you first see the email you’ll be greeted with just the colour choices. This is the first state of the email and has everything turned off. We do this by adding display:none to every interactive element in the email.

When you click a colour you will activate the quantity selection of that colour. This is done by adding a style of display:table, using a CSS rule linked to the checking of the correct radio button, to the quantity table. This displays the next step of the email which is the quantity selection.

The CSS rule will override the display:none, which is placed to hide the table, making the table visible to the user. Below is a snippet of code which shows you how the code looks when the Green colour has been clicked along with the CSS rule for it –

As you can see the CSS rule isn’t changing the inline styling for the quantity table but instead adding a new display style, which thanks to the use of !important, overrides the display:none. This process is then repeated for the next step, picking the quantity.

Below is the code which is used to activate the last step in the email, adding the product to the cart. We used the quantity of 10 as an example –

The code structure remains the same because you want the same results as the previous step. We’ll now move onto the last section, adding the product to the cart.

The ’Add To Cart’ button is the final step of the email and takes the user’s product selection from the email to a cart on the webpage. With scripts not working in email, due to lack of email client support, standard links have to be used to create the add to cart process in the email. The links that are used are exactly the same as the ones cart on the product’s website. This is because your looking to create the same procedure, therefore needing the same link.

Adding these links to the email is a simple process and below is a section of coding within our template where the links are placed. The interaction to display this button is the same as the other steps –

You can see that the coding for the template is relatively simple and we hope by taking what’s been discussed in this post you can create something similar for your templates.

So why use it?

The big question regarding the email and indeed any interactive email is “why should we use an interactive email when a standard email works just fine for us?” From a personal view point, I guess the answer is that it improves the customer experience with your emails and allows you to build a picture of how that customer shops. This will hopefully aid your own marketing strategy for future email sends as you can tailor the emails to their spending habits, generating hopefully more sales.

Consider that by placing the majority of a shopping process into an email instead of a website you’re also streamlining the buying event for a reader as they no longer have to jump from website to email. Having every option to buy a product in the email means the whole buying process is quicker, therefore securing a higher chance of someone buying something from your company. This is especially the case in today’s society where people are constantly on the go and are looking to save as much time as possible on everyday tasks such as buying general goods or products.

Conclusion

Over the course of this blog post we’ve detailed our latest email experiment and have shown how it works. We hope it inspires you to create something interactive in your own emails.

There’s a lot of reasons why we think an interactive shopping email can work in today’s society as stated in this blog post and past posts. We look forward with anticipation to seeing interesting, interactive, ecommerce emails appear. As for our interactive emails, well keep an eye on your inboxes..

Comments  -  6 Comments

  • Rich on August 2nd, 2016

    This is really cool, but do you have any information on client support and fallback options for clients that don’t support it?

    • 1973 on August 3rd, 2016

      Hi Rich,

      Thank you for the kind words regarding the blog post. For answers to your question please refer to the answer we gave for Bonnie.

  • Bonnie Coombs on July 27th, 2016

    how does this render in the majority of clients who cannot render interactive emails?

    • 1973 on August 3rd, 2016

      Hi Bonnie,

      For email clients that don’t support interactive elements in an email they will just display the email as a static template. In the case of this particular email you’ll just see the original text and image before the ‘shop’ element of the email. The purpose of the email within this blog post was to showcase the possibility of email going forward and therefore we don’t necessarily offer the greatest fallback options for the template. We are keen however to talk about this in future blog posts.

  • Steve on July 27th, 2016

    Cool article! I always enjoy seeing people push the envelope with HTML email :)

    A couple of questions:

    Any details about email client compatibility? Based on CampaignMonitor’s CSS compatibility chart it looks like the sibling combinator (~) doesn’t work on Outlook / Yahoo / GMail and probably other webmail clients; is there a suitable fallback since you can’t really target your sends based on email client to exclude these?

    Also, with so many choices (48 checkboxes, plus corresponding CSS rules, plus 48 custom links, etc.) it seems likely that the email will be truncated; any tips for getting around this?

    Thanks!

    • 1973 on August 3rd, 2016

      Hi Steve,

      Thank you for the praise regarding the article and the email.

      In regards to your first question we really wanted to showcase the possibility of incorporating a shopping experience into an email rather than focus on the basics of interactive email. This means that we used coding which would show this off rather than worrying about using the correct CSS syntax. The majority of webmail clients will support this email but some tweaks to the coding would be required to make it work which we felt would take our time up and time away from what we wanted to talk about. In future live builds we will certainly look to use coding which will be compatible with the majority of webmail clients instead of just the iOS devices which this email works with.

      Regarding your second question about the email truncating we’ve found that interactive emails we have built which feature more code (fallback coding, mso code, etc.) have not truncated. Keeping the code in the email clean and tidy will help to avoid this. If your finding that the template is still very large even with clean code we suggest minifying the code to remove any unneeded spacing.

Leave a reply

Follow our blog!

Recent Posts

Categories

Our latest tweets

Archives

Authors