Creating a custom product block

Michal Michal Krejčí
5. September 2025

A product block is used to display products with descriptions, images, prices, and other information automatically loaded from your website’s data source, typically an online store. Boldem offers a wide range of predefined template blocks for displaying products, which may not suit everyone in terms of format or the arrangement of individual elements.

You can create your own product block, customize it to your liking, and then easily apply it to your smart templates.

Prerequisites

  • A Boldem app account with a fully verified domain and the E-mailing plan.
  • Data source added to Boldem in Settings/Data sources.
  • Smart template where you insert your own product block.

Creating a custom product block

There are two ways to create a custom product block: either select and save one from an existing template, or create a new one in Settings.

Create a custom product block from an existing template

We don’t recommend creating a custom product block from a predefined block included in Boldem’s default menu, because it has limited editability. Ideally, first create the block exactly as you want it to appear to customers, then save it as a product block using the steps below.

  1. In the Boldem app, go to Templates and open the template that contains the template block you want to copy.
  2. Select the block you want to save, hover your mouse over its right margin, and choose the floppy disk icon 💾 from the context menu.
Save template block
  1. A save dialog will appear. Enter a name for the block to identify it and click Save.
  2. Now you need to set the template block as a product block and modify its content so that, instead of static text, the block is populated with content loaded from your data source. Continue with the chapter Editing and setting up your custom product block below.

Creating a custom product block in Settings

  1. In the Boldem app, go to Settings and select Template blocks.
  2. Click New template block, then select Create block for smart templates from the drop-down menu.
  3. Add the desired elements and build your own product block exactly how you want it to look.
  4. Now you need to set the template block as a product block and modify its content so that, instead of static text, the block is populated with content loaded from your data source. Continue with the chapter Editing and setting up your custom product block below.

Edit and configure your custom product block

Before first use, change the block type to Product and update its content so that data are loaded into it dynamically.

  1. Go to Settings and select Template blocks.
  2. Click the name of the product block you saved earlier to open it for editing.
  3. To ensure data from the data source loads correctly into the block, set it as a Product block.
  4. On the Information tab, select Template block type from the drop-down menu, then choose Product template block.
Set block as a product block

Now you need to edit the template block’s content so that, instead of static text, the block is populated with content loaded from your data source (or from a website integrated with a data source, such as Shoptet or Upgates).

Boldem uses the Scriban scripting language for working with variables, allowing you to extend expressions with commands like truncating long text, reformatting numbers, and similar operations. Details about Scriban and how to use it can be found in the official documentation.

To replace individual content elements in the product block, use expressions (variables) from the data model ProductFeedItemModel:

{
  "productFeedItemId": 601126,
  "dataSourceId": 72,
  "itemExternalId": "653901",
  "itemGroupId": null,
  "name": "Kitchen ",
  "description": "",
  "url": "",
  "imgUrl": "",
  "category": "3D Visualization",
  "price": 46999,
  "oldPrice": null,
  "manufacturer": "Furniture",
  "availability": null,
  "delivery": null,
  "created": "2023-04-01T04:14:28.347Z",
  "updated": "2023-04-01T04:14:28.347Z",
  "priceSaleText": null,
  "customFields": {},
  "currency": null,
  "accessoryIds": null
}

In our example custom product block, we’ll replace the individual elements as follows:

╔═════════════════╦═════════════════════════╦═══════════════════════════════════════════════════╗
║Replaced element ║ Expression (variable)   ║ Example usage                                     ║
╚═════════════════╩═════════════════════════╩═══════════════════════════════════════════════════╝
│Product name     │ {{product.name}}        │                                                   │
├─────────────────┼─────────────────────────┼───────────────────────────────────────────────────┤
│Product description│ {{product.description}} │ {{product.description | string.truncate 250 '…'}} │
├─────────────────┼─────────────────────────┼───────────────────────────────────────────────────┤
│Alternative      │ {{product.name}}        │                                                   │
│text             │                         │                                                   │
├─────────────────┼─────────────────────────┼───────────────────────────────────────────────────┤
│Product price    │ {{product.price}} Kč    │ {{product.price | math.format 'N0'}} Kč           │
├─────────────────┼─────────────────────────┼───────────────────────────────────────────────────┤
│Original product │ {{product.oldPrice}} Kč │ {{product.oldPrice | math.format 'N0'}} Kč        │
│price            │                         │                                                   │
├─────────────────┼─────────────────────────┼───────────────────────────────────────────────────┤
│Image URL        │ {{product.imgUrl}}      │                                                   │
│                 │                         │                                                   │
├─────────────────┼─────────────────────────┼───────────────────────────────────────────────────┤
│Image link       │ {{product.url}}         │                                                   │
└─────────────────┴─────────────────────────┴───────────────────────────────────────────────────┘

Click into each spot where you want to replace the product name, product description, product price, and other elements you use in your block, and insert the expression (variable) from the table above instead of the specific value. Examples:

Edit image
Replace image with expressions (variables)
example of replacing a URL with a variable
Replace the button link with an expression (variable) that will be replaced by a link to the product.
example of replacing text with variables
Replace product name, description, and price with individual expressions (variables).

Another example is showing prices with and without a discount code. In the example below, the number format is changed to omit decimal places.

Example showing prices with and without a promo code

After you complete the replacement process, save the template block.

Using a custom product block

You now need to insert the custom product block you created into the template where you want its content displayed.

  1. Go to the Templates section and click the template where you want to insert your custom product block.
  2. Click the ᎒᎒᎒ icon to view content blocks.
  3. In the left menu, select the Saved tab.
  4. In the list of blocks you should see your custom product block. Drag it onto the canvas on the right where you want it to appear.
  5. Click the empty area of the inserted block and select the Product selection tab in the left menu.
  6. Select a product from the available products to display its content in your block.
  7. If your block has multiple product slots, repeat the selection by choosing another product.

Advanced formatting for custom product blocks.

Besides standard formatting elements like font size and type, highlighting, and the like, Boldem also lets you automatically match the height of individual blocks, adapt blocks for mobile viewing, or apply custom CSS styles. Details on each option are listed below.

Align heights of custom product blocks

As an example, let’s use a product block that displays products in three columns, where we want the content to be aligned to the same height. We’ll set this alignment in the target template where the custom block is inserted. Example of a custom product block in the settings:

three-column product block

Once we insert this block into the template and import products, their content will appear similar to our example, since product names and descriptions tend to be different lengths:

Products in the block are misaligned

To align individual product descriptions and titles along with the buttons, click an empty spot in the row to open the Edit custom row dialog, then on the Product selection tab click Align custom fields.

Align custom fields

The result will be automatically aligned elements:

Aligned elements in the template block

Automatic alignment will work correctly only if each custom field has the same number of elements — i.e., in our case always 1 title, 1 description, and 1 button.

Adapting product blocks for mobile view

If you apply the Align columns function to a custom product block, as described in the previous chapter, gaps will be added in the custom fields. These gaps may not look ideal in mobile view, since on mobile devices custom fields typically stack vertically. In that case, you can assign CSS classes to individual blocks that apply only to smaller screens to adjust the mobile display.

How to add a class at the block level:

  1. Click the block you want.
  2. Select Block Style.
  3. Enter a CSS class in the Custom CSS class field.

Recommended default classes for displaying product blocks on mobile devices are:

  • product-image – CSS class for images,
  • product-title – CSS class for titles,
  • product-description – CSS class for product descriptions,
  • product-button – CSS class for buttons.

Blocks with these classes automatically adjust in mobile view and remove the spacing used in desktop view to align individual blocks.

You can change the spacing between elements in the template settings:

  1. Click the ⚙️ icon, select the Settings tab -> Global product style.
  2. Enter the value in pixels in the Default offset of product block elements on mobile field. For example, to create a 16-pixel gap, enter 16.

Using custom CSS

In addition to the predefined CSS styles, you can apply a custom CSS style to blocks:

  1. Click the block you want.
  2. Select Block Style.
  3. In the Custom CSS class field, enter the name of a custom CSS class, e.g. my-custom-class.
  4. Click the ⚙️ icon, select the Settings tab -> Custom styles.
  5. Enter a custom CSS style at the end of the list, for example:

If you want the style to apply only to mobile devices, use this code:

@media only screen and (max-width:510px) {
.my-custom-class {
background-color: aquamarine;
}}

To apply the style to all devices, use this code:

.my-own-class {
background-color: aquamarine;
}

Limitations and Recommendations

We recommend thoroughly testing the final template, as not every email app displays content the same way. Known limitations include:

  • Outlook: When viewed in Outlook, text may break at hyphens and the line-height setting may be ignored, which can disrupt block alignment.
  • Offset in email apps: Some email apps don’t treat offsets (so-called margins and padding) the same way, which can also disrupt alignment. If you decide to use offsets for blocks, we recommend using them as little as possible or thoroughly testing the result in your customers’ most common email apps.
  • We recommend setting the offset only at the custom field level, not at the block level.
Custom Field Offsets

Related articles