How does the Product Block Work?
You can now quickly and easily add products to an email using the Product Block. The Composer Product Block allows you to style the appearance of a product by setting the the title, image, price, and button properties and select the specific products that will appear with this styling.
The Product Block can be added to any Composer email created in the Saved Messages, Journey Hub, or Conductor. Product Blocks can also be added to a Composer template. Adding a Product Block to a Composer template makes manually merchandising products a snap.
Adding the Block to an Email
To begin, drag the Product Block element onto your Composer canvas.
💡 Product Blocks can be added to Composer when designing a template or a new email. At this time Product Blocks cannot be added to Saved or Dynamic Content.
Selecting Products
First, you can determine the number and specific products that will appear in the email. Below you can see a preview of the this process.
Click on the product block on the canvas to open the Properties panel.
In the Configuration section, click Add Product to add additional products to the canvas.
To delete products, open the product card and click Delete in the bottom right corner
To select a specific product:
Open the product card and click Select Product
Paste a Product SKU into the box and click Submit, note the following:
All fields except for the Product Description are pulled in from the product file.
All fields can be edited.
Click Save at the bottom of the card
Repeat step 4 for all products
Notes about Selecting Products:
💡 Use the Product Summary to locate the specific SKUs
💡 If a yellow border around the image indicates a non-secure image. You can update the image path by clicking Image Source and confirming an https is included in the link
💡 If the URL that appears in the image source is not complete please contact [email protected]
💡 The information added to the email will reflect the data currently available about the product at the time it was added. This data will not update dynamically.
💡 If using the Sale Price styling (see below), remove the sale price value (if present) from item cards where items are not currently on sale. If a value is populated in the field it will display.
Styling the Product Design
Next, you can style the elements of your design, including Image, Title, Pricing, and a Button link.
Click on the product block on the canvas to open the Properties panel.
In the item design section, click the checkbox next to each element to enable or disable the element in your product design.
Open the Image drop-down by clicking on the name. You can adjust the following:
Image Width: Use the slider or type a width in the box. Max width is determined by the Block Design.
Border: Select a border style, color, and width, if desired
Open the Title drop-down. You can adjust the following:
Font Family: Select from Composer's built-in fonts or your own custom fonts
Font Size: Select a font size. Default font size is 16px
Letter Spacing: Select a type of letter spacing
Styling: Select from Bold, Italics, and Underline styling
Font Color: Use Composer's color picker or a custom hex value
Open the Pricing drop-down. You can adjust the following:
Sale Price: Enable or disable the toggle to show or hide sale price. You can then adjust:
Strikethrough: Leave the checkbox checked to show a strikethrough of regular price when an item is on sale. This option is hidden when sale price is disabled.
Sale Price Color: Use Composer's color picker or a custom hex value to select a color for the sale price. This option is hidden when sale price is disabled.
Font Family: Select from Composer's built-in fonts or your own custom fonts
Font Size: Select a font size. Default font size is 16px
Letter Spacing: Select a type of letter spacing
Styling: Select from Bold, Italics, and Underline styling
Regular Price Font Color: Use Composer's color picker or a custom hex value
Open the Button/Link drop-down, if desired. You can adjust the following:
Style: Select the appearance of your CTA by selecting button or text
Link Text: Specify what the link will say
Font Family: Select from Composer's built-in fonts or your own custom fonts
Font Size: Select a font size. Default font size is 16px
Letter Spacing: Select a type of letter spacing
Styling: Select from Bold, Italics, and Underline styling
Font Color: Use Composer's color picker or a custom hex value
Button Specific Properties: These are only available when the button style is selected
Button Color: Use Composer's color picker or a custom hex value
Size: Select from Small, Medium, or Large
Shape: Select from square, rounded corners, or round
Styling the Block Design
The block design allows you to customize the layout of the products on desktop and mobile.
In the Block Design section, select Block Layout
In the pop-up, select your Desktop Layout
Then, select your Mobile Layout. These layouts are based on the desktop layout you have selected
In the properties panel, select the alignment from left, center, or right
Then, select your vertical alignment from top, center, or bottom
💡 You may need to adjust some item properties if you select a different desktop layout to reflect the changes in the maximum width of the column
Managing Your Product Block
The product details, such as price, reflect the information in Listrak's system at the time they were added to your message creative. As a result, you may need to adjust the item details from time to time prior to send.
To adjust the details, open the message creative
Click on the Product Block that has been added to the canvas
Open the item card of the element that requires an adjustment
Make the changes
Click Save on the item card
Repeat steps 3-5 as needed
Apply Design to your message
Save or schedule the message