You can style product attributes in various ways through the advanced styling mode. You can switch to the advanced styling mode under Visual settings:
You can find below some examples of the advanced styling mode:
Example #1 - Display price and discounted price
{{name}} $style:bold
{{price}} $style:bold
{{list_price}} $style:bold,strike $color:#ff0000
The above outputs the following
Example #2 - Display price and discounted price side-by-side
{{name}} $style:bold
{{price}} $style:bold [{{list_price}} $style:bold,strike $color:#ff0000]
The above outputs the following
Example #3 - Display characters not inherent to product attributes (** in this example)
** [{{brand}} $style:bold $color:#ff0000 $style:uppercase] **
{{name}} $style:bold
{{price}} $style:bold
The above outputs the following
Example #4 - Display characters not inherent to product attributes with a specific styling
[** $style:bold $color:#02bd31] [{{brand}} $style:bold $color:#ff0000 $style:uppercase] [** $style:bold $color:#fadd00]
{{name}} $style:bold
{{price}} $style:bold
The above outputs the following
Example #5 - Controlling product names' alignment
As the length of product names can differ from one product to another, we recommend one of the two following options to guarantee consistency and alignment within the email widget.
1. Truncation
If you truncate product names after the first line or second line, three dots are displayed in place of the remaining part of the product title. The following product attribute displayed inside the product description image block is then consistently aligned below the product name.
Example with truncation set after 2nd line
Example without truncation (note the 4th product)
2. Alignment
If you don't want to truncate product names, you can reserve a placeholder of X lines to display for any product name, regardless of its length. The following product attribute is then aligned below the specified placeholder.
Example
The above can be achieved with the advanced styling mode following set-up:
{{name}} $style:bold $lines:3
{{price}} $style:bold
Note: If you set a $lines directive, it's recommended to specify the same number for truncation in case some product names exceed the length of the placeholder. This will ensure it will be truncated accordingly.
In the example above:
The 2nd product of the widget (zoom kobe 5 (pop) - 17 characters) has a very short product name
The 1st (air foamposite one "gone fishing" - 33 characters) and the 3rd (zoom rookie prm "galaxy black pod" - 34 characters) have longer product names
The 4th one has a very long product name (air jordan 1 retro high og bg (gs) "shattered backboard away" - 61 characters) and is truncated.
Here, the discrepancy is controlled through both a $lines placeholder directive and truncation. As a result, product prices are aligned across products.