How to create Smart Elements & Product Cards

In this article, I show you how to create a product card with a smart element. For this article, let's assume the product card has oen image and three fields.

• name
• price 
• description

Food for thought

Sometimes, a smart element is unable to pull data from a website page that contains dynamically loaded content. 

Creating the structure

The first step is to build a structure to hold the smart element.

1. Place a two-column structure on the canvas. Click the structure to make it the active layer.
2. Go to the side panel and click Data and then Begin.

• Notice the name of the structure changes to Smart-Structure.

3. Place an Image block inside the Smart structure. Add an image

4. Place three Text blocks under the Image block.

   4. Replace the default text in each Text block with Name, Price, and Description.

Your basic structure should look something like this:

Creating dynamic links

The next step is to create dynamic links for the product. Because the links are dynamic, you can copy and reuse the card many times for different products.

Open a website that contains the product you want to display in an email. Copy the product URL. In this example, we go to the Walmart online store and create a product card for a small appliance (home espresso machine).  

1. Go to the tinyEmail canvas.
2. Click the smart structure to make it the active layer.
3. Go to the side panel and make sure the Configuration tab is selected.
4. Paste the product URL into the field.
5. Click the plus (+)  button to add variables. 

In this example, we add three variables:

• Name (p_name)
• Price (p_price)
• Description (b_description)