Embedding product modules inside your email newsletter

Mentor ,
Sep 18, 2012 Sep 18, 2012

Copy link to clipboard

Copied

In some instances you may want to embed featured products or products which are on special, inside your email newsletter and send them to your client base. In this article I'll take you through the steps of achieving this, while preserving the professional look of your newsletter. I will assume that you know how to create your mailing list and add your customers to it.

Setting up the campaign

Step 1.

To create a new campaign go to E-mail Marketing > E-mail Campaigns and click Add Emial Campaign. Choose One-off Campaign and click Next.

Step 2.

In step 2 give your campaign a meaningful name and fill in other details. I called mine "Product specials for September". It will be easy to recognize that campaign later on and simply make a copy of it.

Step 3.

Choose your mailing list in step 3 and click Next.

Step 4.

For step 4 I have chosen the template Sales #3. I recommend you to choose a suitable template rather than creating a newsletter from scratch. The reason being is that coding newsletters is very different from coding web pages, mainly because of the limitations in the email clients' ability to render CSS, floats and arrange div the way the web browser can. And the templates we provide are coded for the email campigns. A good starting resource for coding guidelines can be found at http://forums.adobe.com/docs/DOC-1788.

template-sales-3.jpg


Template I chose for this article.

Step 5.

Now we've come to step 5 where we need to replace the products in the middle of the newsletter with a module, which will pull in those products from the database. The issue we have is that we can not simply place the product module inside the newsletter, as it will render the Add To Cart button, the quantity field and perhaps other elements, which are not supported by emial clients.

The solution is to use a custom product layout for this purpose and exclude the add to cart button and anything else that is not supported by email clients.

Creating a custom layout for newsletter products

We basically want to create a product layout that will match this table inside Sales #3 template as closely as possible . This is the table in question:

sales-no-3-template.jpg

Once I've created that layout I can place my individual products inside it and replace the placeholder products in there. To do that I'm going to open BC's Alpha File Manager in a new tab. I will be working in 2 tabs in this case. In one tab I'll have the campaign open and in the other I'll open the file manager.

First thing I'm going to do is to go to HTML source of this campaign template and find the table which contains the products. The table code looks like this:

newsletter-table.jpg


From that table I'm going to copy the content of one of the table cells. The code looks like this:

<a href="#"><img src="/CatalystImages/Campaigns2/sales3/images/tv.jpg" width="150" height="99" style="border: 0px;"></a>
<p style="font-family: Arial, sans-serif;font-size: 14px;margin: 10px 0px;">Smart LED TV</p>
<p style="font-family: Arial, sans-serif;font-size: 18px;font-weight: bold;color: #c33e10;margin: 10px 0px">Only $453,<sup style="font-size: 12px;">00</sup></p>
<a href="#"><img src="/CatalystImages/Campaigns2/sales3/images/buy-now.png" width="120" height="30" style="border: 0px;"></a>

I'll then go to the tab where I have the file manager open and create a new folder called "custom-layouts" and create a new file called "newsletter-product-list.tpl" inside that folder. I'm using the "tpl" extension because I don't want that file to be indexed by search engines, like the other pages. This is what that looks like:

filemanager.jpg

Now I'm going to paste the code I copied from the newsletter template inside this file and tackle it line by line, raplacing the static content with product tags.

So, the first line:

<img src="/CatalystImages/Campaigns2/sales3/images/tv.jpg" width="150" height="99" style="border: 0px;">

will be replaced by:

<img alt="" src="{tag_smallimage_path}" width="150" height="99" style="border: 0px;" />

The second line:

<p style="font-family: Arial, sans-serif;font-size: 14px;margin: 10px 0px;">Smart LED TV</p>

Will be replaced by:

<p style="font-family: Arial, sans-serif;font-size: 14px;margin: 10px 0px;">{tag_name_nolink}</p>

Third line:

<p style="font-family: Arial, sans-serif;font-size: 18px;font-weight: bold;color: #c33e10;margin: 10px 0px">Only $453,<sup style="font-size: 12px;">00</sup></p>

Is replaced by:

<p style="font-family: Arial, sans-serif;font-size: 18px;font-weight: bold;color: #c33e10;margin: 10px 0px">Only {tag_saleprice}</p>

And the fourth line:

<a href="#"><img src="/CatalystImages/Campaigns2/sales3/images/buy-now.png" width="120" height="30" style="border: 0px;"></a>

Is replaced by:

<div><a href="http://mysite.com/{tag_itemurl_nolink}"><img alt="" src="/CatalystImages/Campaigns2/sales3/images/buy-now.png" width="120" height="30" style="border: 0px;" /></a></div>


I now publish my layout and go back to the campaign HTML source.

I'll now replace that code between the table cells with the individual product module. I'll highlight the above code and click on Modules inside TOOLBOX on the right, then select eCommerce > Products > Specific Product. In the first dropdown I select the catalogue and then I select the product from the second dropdown. I'll then click Insert and the content of the table cell will be replaced by the product module.

The product module will look like this:

{module_product,30791,5006304}

I now have to add the "template" parameter to it in order for it to use the newly created layout. The module will look like this:

{module_product,30791,5006304 template="/custom-layouts/newsletter-product-list.tpl"}

Now I simply click Save Draft and then go to step 6 Preview and Send to see what the campaign will look like.

You will find that the placeholder product details were replaced by the actual product details. I am now ready to send this campaign.

Happy coding!

TOPICS
Documentation

Views

4.1K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
no replies

Have something to add?

Join the conversation