After you’ve added a layout to the canvas for a dynamic product block, the next step is to configure the applicable areas for each layout type.
This article is a comprehensive overview of the configurations that are available within each of the different layout types, and not a review of every configuration available within each layout.
You can read more about the available layouts and how to apply a product rule to blocks here.
Block Name: Enter a name for the dynamic product block. This is only visible within Bluecore, and is used to assign product rules to the block.
Image Position: Select a position to display the image. For example, if including a hero image, should the hero image display left or right. Bluecore recommends using a two column layout on mobile.
Feature Product Image/Small Product Image: Depending on the layout, you may want to feature a specific product image, with the other product images appearing smaller. Configure the image sizes and scale by image width or constrain by a specified dimension for the applicable product images.
TIP: If your images are different sizes, products may become misaligned using scale by image width. Bluecore recommends using the constrain to set dimensions for a more unified look. Click here to learn more in our VTE FAQ.
Border: Select to include a border around the image or the image and the attributes. Add a border color and thickness.
Product URL Type: Select the product attribute or a custom URL. Using a product URL type allows you to choose a different attribute to use, such as a link to the product category page.
Image Source: Use the default image source or a custom source. The default image source is pulled directly from data that’s being passed to Bluecore, and the custom image source must be uploaded through the media library or entered with a URL here.
Add other attributes: Add any additional product attributes here to be configured below that will display in the dynamic product block.
Padding: Add padding to the product block as a whole (top and bottom in pixels).
Background Color: Click the field to use the color picker or enter a hex color code for the entire dynamic product block.
PRODUCT ATTRIBUTES
The following four product attributes can be configured for each layout type. Select the checkbox to include the attribute in the design. Drag and drop each of the attributes to reorder how they appear in the email.
TIP: In the below attributes, there’s an option available to wrap with link only when using the single column and hero with content layouts. Uncheck this box to reduce email clipping, specifically with Gmail.
Brand: Display the brand name of the product in the dynamic block. Available configurations: font color, size, line height, letter spacing, font decoration, text transform, truncation, container size, and padding.
TIP: Please be sure the container size height is at least 2x the line height for both desktop and mobile to prevent product blocks from breaking.
Name: Display the name of the product in the dynamic block. Available configurations: font color, font size, line height, letter spacing, font decoration, text transform, container size, and padding.
TIP: Please be sure the container size height is at least 2x the line height for both desktop and mobile to prevent product blocks from breaking.
Price: Display the price of the product in the dynamic block. Available configurations: currency formatting, show original price, label before/after, font color, font size, line height, letter spacing, font decoration, text transform, alignment, container size, and padding.
Custom Currency formatting: Select a specific locale currency to display within the email. Select the custom currency setting to fully customize how a currency is displayed.
Format as Rupees: Large numbers in rupees are formatted differently. For example, 100 thousand (100.000) would be formatted as 1.00.000 in this format.
Label before: Include text to place before the price of the product.
Label after: Include text to place after the price of the product.
Rating: Display a visual or numerical representation of customer satisfaction with the product being displayed. Select a threshold to display the rating (for example, if the product is rated three stars or above), to display stars with the rating number, text settings for the numerical value, alignment, padding, and sizing and color of the stars. This attribute is available for all dynamic product widgets except for the banner and the single column widget.
NOTE: If star ratings are not rendering in your email proofs, but you've incorporated this widget into your template and have star ratings on your site, please contact your FDE to troubleshoot.
Call-to-Action: Display a call-to-action button in the dynamic block, directing customers specifically to the product being displayed. Available configurations: use button editor/image, button text, text color, font size, line height, letter spacing, font decoration, text transform, border, and padding.
Be sure to configure all of the above options for any additional attributes that may be added.
After you’ve configured and styled the dynamic product block, the next step is to add a product rule to the block.