All Collections
Email Widget
Manuals
How to use Advanced Styling for my Email Widget?
How to use Advanced Styling for my Email Widget?

Learn how to use the advanced styling for email widgets

Lari Lehtonen avatar
Written by Lari Lehtonen
Updated over a week ago

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.

Did this answer your question?