Este artigo está atualmente disponível em inglês e espanhol. Você pode usar esta documentação enquanto ela não estiver disponível em seu idioma.
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.
2. Add a "Products" component by dragging the block from the Components tab to the editor.
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.
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.
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.
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.
7. (Optional) Click on HTML to customize your component with code, if necessary for your design.
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.
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.
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.
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.
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).
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.
17. Click on Mobile view and check that the design on mobile devices is suitable for your strategy.
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.
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:
- Creating a custom product block in web content, to create and customize a dynamic content block in web content.
- Displaying personalized products in content, to link the data collected in a workflow with the variables of web content.
- Displaying discount percentage only when there is a discount in an email, to personalize the behavior of dynamic content based on whether the product has a discount.
- Abandoned cart + recommendations, to send an email to contacts with the products from their abandoned cart and related products.