Creating a personalized product block in an email

Dynamic product blocks are used to display personalized product recommendations to your contacts. This allows the content of your emails to adapt to each user's behavior and lifecycle, staying updated and relevant, which improves conversions.

In this article, you will learn how to create a personalized product block in an email.

  

Implementation time: 15 minutes.
Difficulty: Low
When to use it: When you need to show personalized products in your emails.

  

Before reading this article, we recommend checking out the Email Editor.

 

STEP 1. Create an email design with a dynamic product block

1. Go to "Content > Emails" and click on  Create new email.

Create a personalized product block in an email - 1-min.png

2. Add a "Products" component by dragging the block from the Components tab to the editor.

Create a personalized product block in an email - 2-min.png

 

STEP 2. Customize your product block

 

You can preview any changes during the creation and customization process of a product block. Whenever you find it necessary, follow the instructions in STEP 3  to validate your changes before continuing to the next point.

 

2.1. Basic Configuration

(In this section, the identifying data and general style of the product block will be indicated).

3. Click on  (Edit element) in the contextual menu that appears when you hover over the inserted block.

Create a personalized product block in an email - 3-min.png

4. (Optional) In Product block name, set a title to identify the block.

 

If you use more than one Products block, we recommend setting a name for each one. This will make it easier to assign variables in the workflow where the web content is used.

Create a personalized product block in an email - 4-min.png

 

2.2. Template Configuration

(In this section, the content of the product block will be defined).

5. In Templates, choose from the three default options.

  

The templates include designated spaces to display essential product information: its name, image, or a button to go to its page in the eCommerce, among other product data.

The main features that distinguish them are:
Basic product (type 1): includes a reserved space for the product description.
Product with brand (type 2): includes a reserved space to show the product brand and another for its price.
Product with price (type 3): includes a reserved space for the product description and another for its price.

Create a personalized product block in an email - 5-min.png

6. Use the editor to customize the styles of the selected template.

  

The template editor allows you to style and add elements to the component. You can modify, for example, the typography, size, or colors of the texts or add images.

Create a personalized product block in an email - 6-min.png

7. (Optional) Click on HTML to customize your component with code, if necessary for your design. 

Create a personalized product block in an email - 7-min.png

 

2.3. (Optional) Creation of new dynamic variables

(In this section, new variables to be used in the product block will be defined, in case you want to add additional data).

  

When the email design is included in a workflow, the link between the flow data and the email variables will be established through a "Send email" node. If you want to learn more about this type of node, click here.

8. In the editor, click on the content area where you want to add the variable.

9. Click on the Variables button.

Create a personalized product block in an email - 8-min.png

10. In Variable identifier, type a name for your variable.

 

The variable identifier cannot include spaces and can only contain letters, numbers, hyphens (-), and underscores (_). It also cannot contain accents, as they are not allowed.

Create a personalized product block in an email - 9-min.png

 

In our example, the variable is named "description".

11. Click on  Accept.

  

When creating the variable, the editor adds the double braces that distinguish it.

Create a personalized product block in an email - 10-min.png

12. Repeat steps 8 to 11 for each variable you want to add.

  

To delete a variable, select it in the editor, including the surrounding braces, and press the delete key on your keyboard.

 

2.4. Structure Configuration

(In this section, the number of products to be displayed will be defined).

13. In Structure, define the number of products you want to display in the content.

  

The number of visible products will depend on the rows and columns you set and may vary if the contact visits from a computer ("Desktop rows" and "Desktop columns") or a mobile device ("Mobile rows" and "Mobile columns").

 

In our example, 1 row and 3 columns were selected for the desktop, so 3 products will be displayed when the contact views the email from a computer. 
If the user reads the email from a mobile device, the block will also display 3 items but each in a different row.

Create a personalized product block in an email - 11-min.png

14. (Optional) Uncheck the "Show incomplete rows" box so that products are only displayed when there are enough to show in all columns of a row.

 

In our example, if we uncheck the "Show incomplete rows" box, the content will only be displayed if data for at least 3 products is received.

 

STEP 3. Preview the design of your personalized product block

 

Keep in mind that both the new variables you have created and those included in the template are not yet linked to any product data, so they will be previewed as placeholder text.

The assignment of data to variables, which allows the contact to view the content, is done from a workflow.

15. Click on  (Preview).

Create a personalized product block in an email - 12-min.png

16. Click on  (Desktop view) and check that the design on the computer is suitable for your strategy.

  

The default view of the previewer corresponds to the desktop view.

Create a personalized product block in an email - 13-min.png

17. Click on  Mobile view and check that the design on mobile devices is suitable for your strategy.

Create a personalized product block in an email - 14-min.png

18. (Optional) Click on  (Send preview email) to evaluate the layout in your email client. To do this, fill in the sending parameters and click on the Send test button.

Create a personalized product block in an email - 15-min.png

19. (Optional) In your email client, check the preview email you have sent.

  

The preview email is intended to verify the layout. Since it is not sent from a workflow, this email lacks the context of the contact and navigation, so the content block variables will not be linked to products, and special links will not work.

20. Click on Cancel if you haven't sent a preview email.

21. (Optional) Make the necessary modifications, repeating the steps and points above as needed, so the design is appropriate for your strategy.

22. In the editor, click on   Save.

 

 

 Success!
Your personalized product block in an email is now ready.


Keep learning!

To make the most of your Connectif account, we recommend continuing with the following articles:

Was this article helpful?
1 out of 1 found this helpful