Creating a personalized product block in an email

You can use dynamic product blocks to show personalized product recommendations to your contacts. This allows you to adapt the content of your emails to the lifecycle of each user, keeping content fresh and relevant to improve the conversion rate.

In this article, you’ll 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 suggest having a look at Email editor.

 

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

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

Bloque_Productos_Personalizados_Email_-_1.png

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

Bloque_Productos_Personalizados_Email_-_2.png

 

STEP 2. Personalize your product block

 

You can preview any change you make as you create and personalize your product block. If need be, follow the instructions of STEP 3  to validate your changes before continuing with the point below.

 

2.1. Basic configuration

(This section will show the identifying details and general style of the product block).

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

Bloque_Productos_Personalizados_Email_-_3.png

4. (Optional) For Name, choose a title to identify your block.

 

If you’re using more than one dynamic product block, we recommend choosing a different name for each one. This will make it easier to assign variables in the workflow that will use the website content.

Bloque_Productos_Personalizados_Email_-_4.png

 

2.2. Template settings

(This section defines the content of the product block).

5. In Template, choose one of the three default options.

  

Templates include spaces designated to display the essential information about a product, such as its name, image or a button to visit its sheet in the ecommerce site.

Their principal defining characteristics are:
Basic product: includes a space for the product description.
Product with brand: includes a space to show the product brand and another for its price.
Product with price: includes a space to show the product description and another for its price.

Bloque_Productos_Personalizados_Email_-_5.png

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

  

The template editor allows you to change the style as well as add elements to the component. For example, you can change the text font, size or color or add images.

Bloque_Productos_Personalizados_Email_-_6.png

7. (Otcional) Click   (Edit HTML code) to personalize your component using code, if required for your design.

Bloque_Productos_Personalizados_Email_-_7.png

 

2.3. (Optional) Creating new dynamic variables

(This section will define new variables to be used in the product block, if you want to add additional data).

  

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

8. In the editor, click the place in the content where you want to add the variable.

9. Click the Variables button.

Bloque_Productos_Personalizados_Email_-_8.png

10. In Variable identifier, type a name to distinguish this variable.

 

The variable identifier cannot include spaces, only letters, numbers and the hyphen (-) or underscore (_) symbols.

Bloque_Productos_Personalizados_Email_-_9.png

 

In our example, the variable has been named “description”.

11. Click  Accept.

  

When creating the variable, the editor will add double keys to distinguish it.

Bloque_Productos_Personalizados_Email_-_10.png

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

  

To delete a variable, select it in the editor along with the surrounding keys and press delete on your keyboard.

 

2.4. Structure settings

(This section will define the number of products to be displayed).

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

  

The quantity of visible products will depend on the rows and columns that you set and may be different if the contact visits your site from a computer ("Rows in desktop mode" and "Columns in desktop mode") or from a mobile device ("Rows in mobile mode" and "Columns in mobile mode").

 

One row and three columns are selected in our example, so three products will be shown when the contact views the email on a computer
If the user reads the email on a mobile, the block will also show three items but each one on a different row.

Bloque_Productos_Personalizados_Email_-_11.png

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

 

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

 

STEP 3. Preview the design of your personalized product block

 

Bear in mind that the new variables you have created as well as those included in the template are not yet linked to any product data, so they’ll be shown as placeholder text.

You can assign data to variables in a workflow to enable the contact to view the content.

15. Click  Preview.

Bloque_Productos_Personalizados_Email_-_12.png

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

  

The default preview view is for a computer.

Bloque_Productos_Personalizados_Email_-_13.png

17. Click  Mobile view and check that the design shown on a mobile device is right for your strategy.

Bloque_Productos_Personalizados_Email_-_15.png

18. (Optional) Click  (Send preview email) to check the layout in your email manager. To do this, fill in the sending parameters and click  Send preview email. Preview mode will then close.

Bloque_Productos_Personalizados_Email_-_17.png

19. (Optional) In your email manager, check the preview email you’ve sent.

  

The aim of the preview email is to check the layout. As it is not sent from a workflow, this email lacks context about the contact and their browsing, so the variables of the content block won’t be linked to products and special links won’t work.

20. Click  Close preview, if you haven’t sent a preview email.

21. (Optional) Make the necessary edits, repeating the previous steps and points that apply to ensure that the design is appropriate for your strategy.

22. In the editor, click  Save.

 

 

 Success!
Your personalized product block for email is now ready.


Keep learning!

To make the most of your Connectif account, we recommend reading these articles next:

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