Questo articolo è attualmente disponibile in inglese e spagnolo. Puoi fare riferimento a questa documentazione mentre arriva nella tua lingua.
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.
2. Add a "Dynamic content" component by dragging the block from the Components tab to the editor.
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.
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.
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.
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.
7. (Otcional) Click (Edit HTML code) to personalize your component using code, if required for your design.
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.
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.
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.
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.
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.
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.
17. Click Mobile view and check that the design shown on a mobile device is right for your strategy.
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.
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:
- Create a personalized product block in email or web content, to create a dynamic product block in website content using variables.
- Show personalized products in content, to link the data gathered in a workflow with the variables of a piece of website content.
- Show discount percentage only when there’s a discount in an email, to personalize the behavior of dynamic content according to whether the product has a discount.
- Send Abandoned Cart Email via Workflow, to send an email to contacts including the products in their abandoned cart plus related products.