Product card

• Why use this block?
• How to add a product to a product card?
• How to set up mapping?
• Visual Mapping
• Manual Mapping
• How to edit a product card?
• Product Card Image Settings
• Product Card Button Settings
• How to change the font and color of the title, product description, price, and old price
• Product Card Discount Settings

A product card is a block where you can insert a link to your product and fetch information such as the product image, description, price, and link automatically.

Why use this block?

• To quickly add multiple products without saving images, switching between tabs, or copying descriptions manually. This speeds up your workflow.
• To avoid errors in product pricing or links since all information is pulled directly from the product URL.

How to add a product to a product card?

1. Add a section to your email. You can use multiple sections, and the product card will adjust accordingly.

2. In the "Blocks" section, select "Product Card" and drag it into an empty section.

   

3. In the right panel, insert the product link and click Fetch Product Info.

   

4. If your website follows standard structures, all product information will be fetched automatically.

   

How to set up mapping?

Manual mapping allows you to manually select the parameters to be fetched from your website. This is useful if your website is non-standard and the system cannot extract the information automatically.

Visual Mapping

This method maps your website using a loaded page. You can select what should be fetched step by step, with guided prompts to assist you.

Manual Mapping

If your website has additional security, it may not load in visual mapping. In this case, manually navigate to the product page on your website.

• Right-click on the element you want to fetch (such as Title, Price, or Image) and select Inspect to open Developer Tools.
• Hover over the code to find the HTML ID or class. Use the unique ID first; if unavailable, use a unique class.
• Enter the ID or class name without dots or special characters. For example, if the code is <div id="main-image"> , enter main-image.

• Click Map to apply the settings.

  

If done correctly, all product card fields will be reflected in the email.

How to edit a product card?

Selecting fields to display

By default, all product card fields are enabled, including:

• Image
• Product Title
• Description
• Price
• Old Price
• Discount %
• Button

If any of these fields are not found on the page, they will not appear in the product card. You can enable or disable any field by clicking the blue toggle switch on the right.

Product Card Image Settings

You can choose the Aspect Ratio for your product images:

• Click on the product card in the email.
• In the right panel, scroll down to the Image section.

• Click on it and select the desired aspect ratio.

  

Product Card Button Settings

You can customize the button by adjusting:

• Button text
• Button color
• Button size
• Button border and rounding
• Button text color and font

To do this:

• Click on the product card in the email.
• In the right panel, scroll down to the Button section.

• Click on it and modify the desired parameters.

  

How to change the font and color of the title, product description, price, and old price?

For each of these elements, you can customize the font, color, weight, and style (italic/bold) in the corresponding field within the block settings panel.

Product Card Discount Settings

You can change the background, border, font, and color of the discount label in the block settings panel.