Dynamic Product Cards: How They Work in the Pixcraft Editor

Product grids are among the most popular and expressive elements in marketing emails. They quickly showcase an assortment of goods and draw the recipient’s attention. When dynamic content is used to build product cards, it becomes possible to control both their logic and appearance without manually creating dozens of separate elements.

In this article, we’ll discuss what dynamic product cards are, how they work, and how the Pixcraft editor helps with creating dynamic product grids within the Altcraft marketing platform.

The Difference Between Static and Dynamic Product Cards

Static product cards are fixed elements with predefined content. Each card is built manually for a specific product and is suitable when an email needs to display a set list of items. Cases include:

• one-off newsletters with a product catalog relevant at the moment of sending;
  
  
• promo campaigns where the assortment remains unchanged;
  
  
• manually curated selections where a specific group of items must stay fixed.

Dynamic collections, on the other hand, make product grids more flexible. At the moment of sending the email, data is taken from the selected source and inserted into the product grid. This is especially useful for automated messages such as triggers and recurring emails: the selection is formed from the up-to-date feed based on the specific scenario or audience segment.

How Dynamic Product Cards Work in Emails

First, a single card template that defines layout and fields is created. Next, items from the feed are inserted into that template, and the required number of cards is generated, creating the product grid structure. Each card receives its own data about a specific product.

An example of a dynamic grid used for product recommendations. Source: Really Good Emails

Data Source

Dynamic product cards rely on a structured set of product information. Depending on the platform, the data may be uploaded using JSON files, spreadsheets, YML feeds, APIs, webhooks, or data from a CMS/CRM.

Regardless of the format, the file must contain all the essential product information:

• name;
  
  
• image;
  
  
• price;
  
  
• link;
  
  
• brand or category;
  
  
• additional characteristics such as color, size, material, etc.

The card template in the email treats these values as variables and inserts the relevant data into each field.

Layout Specifics

Product grids must display correctly both on mobile devices and in email clients such as the desktop version of Outlook. Mobile clients usually reflow the layout to fit screen width. However, in Outlook, due to its limited CSS support, additional table-based markup inside conditional comments is required.

Below is an example of what the code for a static grid of four items in two columns may look like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" valign="top">
    <div style="display: inline-block; vertical-align: top; width: 300px;">
    product card 1
    </div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td valign="top" style="width: 300px">
<![endif]-->
    <div style="display: inline-block; vertical-align: top; width: 300px;">
    product card 2
    </div>
<!--[if (gte mso 9)|(IE)]>
</td></tr>
<tr><td valign="top" style="width: 300px">
<![endif]-->
    <div style="display: inline-block; vertical-align: top; width: 300px;">
    product card 3
    </div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td valign="top" style="width: 300px">
<![endif]-->    
    <div style="display: inline-block; vertical-align: top; width: 300px;">
    product card 4
    </div>
</td></tr>
</table>    

When working with a dynamic grid, the task is more complex since it becomes necessary to calculate row breaks. For this, the template uses an iteration counter to determine when to finish the current row and start a new one.

A generalized version may look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" valign="top">

    { FOREACH item IN products }

    <div style="display: inline-block; vertical-align: top; width: 300px;">
    product card item
    </div>

    { IF !loop.last }
        { IF loop.index % 2 == 0 }
            <!--[if (gte mso 9)|(IE)]>
            </td>
            <td valign="top" style="width: 300px">
            <![endif]-->
        { ELSE }
            <!--[if (gte mso 9)|(IE)]>
            </td></tr>
            <tr><td valign="top" style="width: 300px">
            <![endif]-->
        { END }
    { END }

 { ENDFOREACH }

</td></tr>
</table>

This process can be described as follows:

• check whether the current card is the last in a row (!loop.last);
  
  
• calculate the remainder when dividing by the number of columns (loop.index % 2 == 0).

The example assumes that the number of products matches the grid size. If that’s not the case, additional checks are required to avoid breaking the grid structure in email clients.

How We Added Dynamic Product Card Support to Altcraft

In 2024, the Pixcraft email editor was integrated into the Altcraft marketing platform, which unifies customer data and communication channels. The platform automates segmentation, personalization, multistep workflows, and synchronization with various data sources.

For convenient work with product catalogs, a dedicated Products primitive was added. Essentially, it’s a ready-made tool for adding dynamic product grids into emails.

Product data comes from Market, a module designed for product management. The assortment of goods is uploaded using YML files (as plain files or archives in .zip or .tar.gz format), either manually or on a schedule. Additionally, Market supports manual creation of product items.

Static cards can also be created manually by placing images, product data, and links. However, these remain fixed and do not receive updates from the feed.

Product Cards Settings

The Products primitive includes two tabs: Design and Data.

The Design tab controls the appearance of both the cards and the grid. Here, you can specify the number of products, configure spacing, background, border-radius, and variable visibility.

To add a new element to the card template, simply drag it from the list. The following predefined elements are available:

• product title;
  
  
• image;
  
  
• price;
  
  
• old price;
  
  
• button with link.

It’s also possible to include standard Primitives in product cards.

When adding or removing elements, all cards update simultaneously. If the structure of a single card changes, the others adjust accordingly — an essential condition for a consistent dynamic grid.

The Data tab configures the data source, selection method, sorting, and filters. This determines which products appear in the grid.

Dynamic cards work with two product sources: Market. Products and Market. SKU. This means that depending on the task, you may use either original products or their specific variations.

Filtering options include:

• manufacturer;
  
  
• categories;
  
  
• price range;
  
  
• products with images only;
  
  
• products with delivery only;
  
  
• products with an old price specified;
  
  
• in-stock items only.

Filtering is also available for custom fields, which may be added to both products and SKUs.

Additionally, selection by product ID is supported, allowing you to display specific catalog items.

Real-Time Preview

The product grid appears exactly as it will look in the actual email, with all current filters and settings applied. Any change to filters, data source, selection method, or appearance immediately updates the grid: the structure adjusts, and new data is inserted.

This provides two benefits:

• You can immediately check the final state of the product grid.
  
  
• The chance of missing an error is reduced — if the filter is too strict or some data is missing, the issue becomes visible right away.

Converting Dynamic Grid to Static Cards

To lock the results of a dynamic selection and convert it into a static set of cards, you only need to click one button. In Pixcraft, this is done via the Convert to static cards option, which:

• removes dynamic logic and detaches the cards from Market;
  
  
• saves the current data of each card and turns the grid into a set of independent elements that can be edited manually.

The visual appearance of the grid remains unchanged: spacing, colors, buttons, and element positions stay intact.

This function makes Products a fast way to fill selections without manually inserting images, links, and prices. All that’s required is to:

• apply filters;
  
  
• check that the selection looks correct;
  
  
• convert to static;
  
  
• edit individual cards if needed.

How to Integrate the Pixcraft Email Editor Into Your Business Processes

If you want to use Pixcraft in your own system, choose the deployment format that fits your organization: embedded integration (white label) or on-premise installation.

Embedding the Editor

Pixcraft can be integrated into various services, including CRM systems and other corporate tools. The editor becomes part of your interface and contains no Pixcraft branding.

You get:

• a block-based email editor with flexible settings;
  
  
• a customizable interface;
  
  
• AMP support and the option to develop custom AMP blocks;
  
  
• a library of ready-made blocks for quick email building.

To learn more about integrating our editor into your platform, please contact the Pixcraft team.

On-Premise Deployment

Pixcraft is also available for a full local installation. All data stays inside your infrastructure with no transfer to third-party services. This option is suitable for banks, government organizations, large retail networks, and other companies with high security requirements.

The on-premise version includes:

• creation and editing of emails, including dynamic product cards and interactive AMP components;
  
  
• data collection and storage, including AMP form responses;
  
  
• AI generation of text, images, and entire emails;
  
  
• work with ready-made blocks and templates.

Contact us, and we will consult you about the local installation of the Pixcraft editor.

Conclusion

Dynamic product cards in Pixcraft streamline the process of building product selections. Flexible settings ensure a predictable workflow: data, structure, and design stay under your control, while the final result remains stable and accurate.

Integrate Pixcraft into your business processes, and get a full-featured email editor suitable for tasks of any scale — from one-time promos to recurring campaigns.