Description
This block is the same as the 13 – 1 or 2 Products block, but the options are to display 3 or 6 product tiles. These can also be stacked in mobile, but they will stack singularly if 3 products are selected and in singles or 2s (side by side) in mobile view if 6 are selected.
Notice
To keep the quality of image responsiveness in smaller devices a minimum width of between 480px / 520px will cover all responsive devices when stacking is on.
Images may then look oversized in Edit mode but look okay in Preview mode. Edit the text area before loading the image(s).
Default block view
Desktop
Mobile
Formatting options
Padding
This refers to the space between the block's content and its border. This can be edited in the Details Tab.
Option | Details | Default |
Padding | Top | 10 |
Right | 10 | |
Bottom | 10 | |
Left | 10 |
Hide/Show 6 Products
It allows you to display or hide 6 products.
Option | Details | Default |
Hide/Show | 6 Products | Hide |
Product Single Stacked
It allows you to display or hide products like single-stacked or double stacked views in the mobile view.
Option | Details | Default |
Hide/Show | Product Single Stacked | Hide |
Block Background Color
Used to change the block background color. Only use HEX color values. HTML email only recognizes 6-digit long-hand versions and has patchy support for shorthand versions.
Option | Details | Default |
Background Color | Block Background Color | #ffffff |
Font Weight
Used to independently change the font weight for each text element.
Option | Details | Dropdown | Default |
Font Weight | Product Title | Bold/Normal | Bold |
Price Text | Bold |
Line Height
Used to change the text line height.
As with all text, please be sure the minimum line height value is not less than 4px higher than the font size. For example, if the font size is 18px, the line height should not exceed 22px.
Option | Details | Default |
Line Height | Product Title | 18 |
Price Text | 18 |
CTA
All CTA's have multiple styling options. As with all colors, please use HEX values.
Option | Details | Default |
CTA | Background Color | #e71825 |
Text Color | #ffffff | |
Font weight | Bold | |
Border radius | 6 | |
Border width | 1 | |
Border Color | #e71825 | |
Height | 52 |
Product Image Links
Each product link will need to be applied independently.
Option | Details | Default |
Links | Product 1 Image Link | Blank |
Product 2 Image Link | Blank | |
Product 3 Image Link | Blank | |
Product 4 Image Link | Blank | |
Product 5 Image Link | Blank | |
Product 6 Image Link | Blank |
Product CTA Links
Each CTA link will need to be applied independently.
Option | Details | Default |
Links | Product 1 CTA Link | Blank |
Product 2 CTA Link | Blank | |
Product 3 CTA Link | Blank | |
Product 4 CTA Link | Blank | |
Product 5 CTA Link | Blank | |
Product 6 CTA Link | Blank |
Compatibility
Currently, the CTA button curved border does not render in the devices listed below. Instead, the corners will be square.
GMX Chrome Windows 10
GMX Edge Windows 10
GMX Firefox Windows 10
Web.de Chrome Windows 10
Web.de Edge Windows 10
Web.de Firefox Windows 10