Click here if you want to upgrade your block to a carousel so your visitors can slide through items you would like to promote.
A must-have for all kinds of webshops are rows of items to show customers the products or services. With Datatrics, you can recreate these rows and use a recommendation strategy to show the most relevant items in these blocks.
We recommend visiting the belonging articles when you still need to become familiar with words like content collections, positions, templates, elements, or touchpoint builder. If you need help with creating a notification of a product recommendation, you should read this article.
Preparation
To create a product block, you must decide what to show your audience and what this touchpoint should look like. In this article, we will recreate the product block shown above with similar items.
Content collection
First, you need to select a content collection. This is a dynamic set of content based on specific rules. If an item does not match the rules (the item went out of stock) anymore, the item will be discarded from the collection automatically.
Position
Each embedded touchpoint needs a manually created position where to show on a page. You cannot create an embedded position without opening your website. In the linked article, you will find 2 different ways of finding the correct CSS Selector.
Preview defaults
You can set the default item that needs to be previewed in the settings tab in the Templates section. In our example, we use one of our items in the content collection we just created.
Creating the template
Step 1 - (Re)create the item block
The template should look like one of the items in a row on your website to make it identical. Basically, the template looks like a product recommendation. The template will be duplicated several times to make a row of items.
If you do not have any existing product rows available on your website or when are stuck while creating the template, we suggest reading this article that zooms in to adding titles, descriptions and images to the template.
Step 2 - Create a header
Most product blocks have a header to announce a special message, like ‘Recommended for you’ or ‘Last viewed’. As the product template will be duplicated, this needs to be an isolated template. Otherwise, you will show the message multiple times.
The header consists of the message in the font that applies to the website and some padding at the bottom to create some white space.
Step 3 Create a footer (optional)
To “close” a product block, you might want to conclude with something like a divider line. As the product template will be duplicated, this needs to be an isolated template. Otherwise, there will be a divider below each item. Add some padding, so it looks like it is a part of the website.
Creating the touchpoint
When you feel that the templates are set, you still need to place the template in a touchpoint. Therefore you should use the touchpoint builder. We keep this section short as the touchpoint builder is documented.
Step 4 - Add touchpoint
Open the journey or campaign where you want to display this touchpoint and click on ‘Add Touchpoint’ to open the touchpoint builder. Give the touchpoint a name to start.
Step 5 - Assign the template and position
Select the template you created. You need to select multiple blocks. The number of blocks is up to you. In our case, we select 4. Then select the header and footer you created.
Now select the position you created. After selecting the position, choose between ‘Replace existing content’, ‘Place before existing content’, ‘Place after existing content’.
To end this section. You can just select on which occurrence the touchpoint should appear.
Step 6 - Select content collection and recommendation strategy
Use filtered content → Select existing content collection to use the content collection that you already made as preparation and that you want to be displayed in this touchpoint. Then select the recommendation strategy that you want to use. Click here to learn more about these strategies. We use the default Let the algorithm decide. Click on ‘Next’ in the sub menu to proceed.
Step 7 - Select your audience
Now you can just select the audience that should see this touchpoint. This is up to you. In our case, we want to show this touchpoint on the homepage.
Step 8 - Additional settings
Now you can add extra settings to the touchpoint builder.
Testing the touchpoint
Step 9 - Preview and tweak the templates
Now, the basics are set and done. Though, in most cases, you still need to tweak some of the elements because there are usually still some minor differences between the preview and the existing row on the website.
Step 9.1 - Change the gap between items CSS
When using the .datatrics-multiblocks class in CSS, you can change the gap between items to apply the same distance between different products. For example:
.datatrics-multiblocks {
gap: 4.5rem;
}Step 9.2 - Create scalable, mobile-friendly touchpoints
With CSS, you can change the number of product blocks in the .datatrics-multiblocks class. You can use this to your advantage to improve the scalability of your product block.
First, you can use the “grid-template-columns” CSS Property for different screen widths. By default, items are displayed next to each other:
But by using “ grid-template-columns: repeat(2, 1fr);”, a new row will start after each second item:
By using this CSS, you can tweak the scalability of your product block:
@media only screen and (max-width: 725px) {
/* This code only applies to screens that have a smaller width than 725px */
.datatrics-multiblocks {
grid-template-columns: repeat(2, 1fr);
}
/* This code will show 2 items in per row */
.datatrics-multiblocks > div:nth-child(3) {
display: none;
}
.datatrics-multiblocks > div:nth-child(4) {
display: none;
}
/* This code will hide the latter 2 items */
}
@media only screen and (max-width: 480px) {
.datatrics-multiblocks {
grid-template-columns: repeat(1, 1fr);
}
/* This shows 1 item per row at screens that have a smaller width than 480px */
}