Building Smart Containers

A smart container is an email element, eg. a product card, that consists of basic blocks (image, text, button) with data that is automatically transferred from your site. 

To set up the smart container, you need to specify:

1) email element selectors into which you need to substitute data from the site (internal settings)

2) site element selectors from which you need to substitute data in the email (external settings).

After setting up, you can simply insert a link to the product card into the container, and the system will insert the relevant data into the product card elements.

Example of Building Smart Container

1. Create an email or open an existing one.

2. Drop product card from Advanced modules or your saved modules into the email body. The structure can contain any number of containers, you need to set up only one. Then you can just copy it.

3. Fill the card with content from your site in the following order:

• Image
• Product Name
• Price
• Button

4. Click on the Container label at the top of the card and select the Data -> Smart  -> Configuration tab.

5. Proceed to set up internal matching rules.

Internal Matching Rules

Click on + to add the necessary parameters to the container.

Select from the dropdown list: 

• image, 
• name, 
• price.

Image

1. Open the email code by clicking on the code editor to see which selector has the image in the block.

The default selector is img:

2. Add a class to the code for convenience:

3. Go to the image settings and insert the selector into the appropriate field:

4. Each image also has an attribute (src or html). Write it down in the appropriate field:

Configure other elements similarly.

Name

1. Copy the name selector in the email code and enter it to CSS selector field.

You don’t need to set the attribute for Name and other text fields.

2. Specify 2 selectors with title and alt attributes:

Price

1. Copy the selector in the template code and paste it into the CSS selector of element 1 field:

URL

Paste URL selector (by default it is a) and its attribute (by default it is href):

***

Check the result on the Appearance tab — you should see name, price and image parameters from your container:

Setting up selectors in the email is now complete. Let's move on to collecting data from the site.

External Matching Rules

1. Open the product page from which you want to transfer data.

2. Open the page code (F12 for Google Chromе). Select the desired element and copy its selector and attribute.

Image

Go to your smart container -> image settings -> External tab and enter the image selector and attribute in the corresponding fields.

Name

Add the selector to get name and alternative image name:

Price

Paste price selector, in our case, it is span.a-offscreen

Write it in the block:

You can add one more selector to get the currency from the site, or specify it in the email code.

Check the result

To check the correctness of the settings, copy your smart container into the adjacent 2 containers. To check that they work, paste links to other product cards:

Useful Tips

1. Set up at least one smart container with blocks for all the data you might need. You could easily remove unnecessary blocks (for the old price, for example) when preparing a campaign.
2. If you want to copy the structure to another email, use the JSON editor.

Copy all the code from this section and then paste it into the structure code in another email.

3. Save differently designed containers to your library and use them in any template.

4. You can make any card from one configured container: with three blocks in a row, four blocks in a column, etc. So you don’t need to create a a whole card from scratch, just copy and paste the contents of the smart block.

5. You can also set up smart containers for text blocks, for example, blog articles.