Recommendations Web Layouts

Layouts provide the design for recommendation blocks that are placed on your site.

You can design and preview layouts in Recommendations Web so you can see what your products will look like before you publish them to your site. Layouts only control the design within the recommendation block. The placement of your recommendation block is managed by code on your site. See Use Div Tags To Place Recommendations Within A Page for more information.

To design a layout:
  1. Go to Commerce > Recommendations.
  2. Click the Recommendations Web icon.
  3. Click the Layouts tab.
  4. Either:
    • Copy a template to use as a design baseline, then edit the template copy.
    • Click New Layout, give the layout a name, and click Create Layout.
  5. In the layout designer, use containers, elements, and layout design settings to create your layout.
    For more information about containers, elements, and settings, see the sections of help for each on this page.
    1. Drag a container or element onto the canvas.
    2. When you add an element, make sure the element uses the product field you want to be displayed in the block.
    3. Use the design settings to visually style your element.
  6. Use the Preview button, located above the canvas, to see what your recommendation block will look like.

    When the preview first opens, it will display based on your site’s default Product ID. You can edit this Product ID on the Settings tab. You can change the Product ID used for the preview by changing the Product ID and clicking Refresh.

    You can also use the HTML, located to the left of the preview button, to see the HTML used to generate the layout on your website. From the HTML Code window, you can copy the content in case you want to view it in some other editor. This can be helpful in identifying class names for use in your website’s CSS.

  7. When you're done, save your changes.

Your account comes with a Bronto Predefined Layout. This is a basic layout that is initially configured as your default layout for your identifier recommendations. You can edit this layout or you can delete it if after you change your default layout to another layout on the Settings tab. We also provide template layouts that address many common recommendation block needs on the Templates tab. You can copy and use any template.

Containers

Containers are used to add rows to your design and can be between one and six columns. To add a container, simply click Containers, then drag a container from the palette onto the canvas.

You can add multiple containers to a single layout, stacking them on top of each other to create a customized layout. You can also apply a Minimum Height in the Container Settings to ensure enough space for the container’s contents to fit without pushing down the other containers. This is useful to ensure product content aligns across multiple products on your site.

Within each container, you can apply dynamic content to determine what to display. This works similarly to the use of Dynamic Content Rules for the Email Message Editor. To make a container dynamic:
  1. Hover over the container and click the Dynamic button from the panel at the top of the container.

    This will open the Edit Dynamic Content Rules settings panel.

  2. Build rules based on a product.

    For example, on a sale or on the value of a specific product field, such as the availability of a product. For each rule, you can use the canvas to design content to be displayed.

Elements

To use elements, simply drag an item from the palette to a container on the canvas. Then use the settings panel and design menu to add your content. Once on the palette, the element's settings panel can be used to provide the content and design for the element. The options available on the Content and Design tabs will vary from element to element.

Each element has a unique ID you can use to target it in the CSS. To find the CSS class ID for an element, open the element in the palette and scroll to the bottom of the Design tab. For example: .element-36789743892.

Element Description Notes

Text

Adds text; this includes the ability to insert dynamic code and tags.

Within a text element, you can add product content directly from your product catalog. Within the element’s toolbar, use the drop down box labeled Insert Field to find and select the product field you wish to display.

If you have the Price and Sales Price fields mapped in your product catalog, you will also see two calculated fields available for Sale Discount Amount and Sale Discount Percentage.

You can create hyperlinks on any of your content by highlighting that content and clicking the icon on the toolbar. Within the Link Settings window, enter the URL, or click the icon and select the Product URL or Relative Product URL.
You can also configure text and numeric product fields with special formatting by highlighting the entire product field name, including the double curly braces before and after the field name, and then clicking on the Pencil icon in the toolbar. From here you can:
  • Trim text fields to a maximum length.
  • Specify thousands and decimal place symbols as well as the number of decimal places.
  • Display numbers as symbols, such as for displaying ratings.

You can also use the various toolbar items to format your content and the Design tab to format the entire element.

Image

Places an image in your layout.

Within an image element, you can specify a specific image and link URL or you can select it from your product catalog. To do so, click the + icon to the right of the text box to find and select the field you wish to use. If you are adding a product URL, you can use a Product URL (Example: www.mysite.com/product-A) for the full path or a Relative Product URL (Example: /product-A) for the relative path.

You can also use the Design tab to format the entire element.

Images should always include a brief description in the Alt Text box so that text is displayed if the image cannot be.

Button

Adds a button.

Within a button element, you can specify the button’s text and a specific link URL or you can select it from your product catalog. To do so, click the + icon to the right of the text to find and select the field you wish to use.

You can also use the Design tab to format the entire element.

Spacer

Allows you to specify the height of a container without adding other content to it.

The Spacer element can be used to increase or decrease the use of white space. The maximum spacer height is 100 (px, em, rem, mm, or vh).

Even though you only add the Spacer element to a single box, an entire container is effected.

Settings

Within the settings tab, use the Layout Design to set up the basic design of the background, including the fixed width of the design. When displayed on your site, the design will maintain this width for individual products, but products will stack responsively. The height of the design will be based on the individual elements used.

You can also enter your Custom CSS for the elements in the design.

Design Options

This table describes the design options for containers, elements, and/or layout design.

Menu Option Description

Alignment

Controls the horizontal spacing of the element within the container.

When you apply an alignment to a container, it is applied to all of the elements in the container. You can only choose one of the alignment settings available in the list.

For more information about alignment, see http://www.w3schools.com/cssref/pr_text_text-align.asp.

Note: When editing a Button element, alignment adjusts the alignment of the text on the button. If you want to align a button in relation to the position of the button in the container, then you should edit the alignment for the container from the Container Design menu or use padding to adjust the position of the button in relation to the container box.

Background Color

Applies the selected color to the container cell the element is in.

You can either select a color by clicking on the color picker, or you can enter the CSS color value if you know the exact color you want to use.

If you set the background color for an element, it will override any other background color settings you may have applied to a container or a layout. Except for buttons. Background color for a button will make the area within the button a specific color. To change the color of the space behind a button use Element Background Color.

For more information about background color see http://www.w3schools.com/cssref/pr_background-color.asp.

Border Color

Changes the color of a border around the element.

You can either select an option from the color picker, enter any generic color (blue, red, purple), or enter the HEX value for a color.

When you set a border color you must also set a border style in order for the border to be displayed.

When you assign a border color to an element, the border is applied to the perimeter of the element, not to the container box the element is in. So if you have more than one element in a container box only the element you applied the border color to will have the border.
Note: Due to some email client's limited ability to support complex borders, this value cannot be used with a border radius.

Border Radius

Adds a rounded border to a button.

If you set a border radius any other border values you set will not be applied due to the limited ability of some email clients to support complex borders. If you decide, after setting a border radius, you'd rather use the other border options, set a border style and the border radius will be overwritten.

Use either a px value or a % to change the shape of the button. If you enter multiple px values, then the button shape will be rounded differently on each corner:

  • One value will round all of the corners equally. For example 2px
  • Two values will round the left and right sides of the button. For example 2% 10%
  • Four values will round each corner in relation to the other corners. For example 2px 10px 4px 20px

For more information about the CSS properties for border radius see http://www.w3schools.com/cssref/css3_pr_border-radius.asp.

Border Style

Adds a border in the specified style around the element.

You can select an option from the menu. The border style shown is what the border will look like. For more information see http://www.w3schools.com/cssref/pr_border-style.asp. If you want to change the color of the border, use the border color design option. If you want to change the width from the default use the border width design option.

When you assign a border style to an element, the border is applied to the perimeter of the element, not to the container box the element is in. So if you have more than one element in a container box only the element you applied the border style to will have one.

Note: Due to some email client's limited ability to support complex borders, this value cannot be used with a border radius.

Border Width

Adjusts the width of the lines in a border.

You should use this element if you want to use a variable border width or want to use a border to create a line between elements on the canvas (instead of a box). To use border width to create a line instead of a border, set the sides of the border you don't want to display to 0px.

Border width overrides any width setting you have applied to the same element or container using the border option. You will only see the border width settings applied to your layout if the element or container also has border settings.

Note: Due to some email client's limited ability to support complex borders, this value cannot be used with a border radius.
Bulleted list Adds bullets to your list items. You can choose from a disc bullet or a circle bullet. For information on numbered lists, see the Numbered list entry.
Column Width

Sets the width of a box in a container.

Set custom column width for a container box by opening a container's settings and selecting either Equal Column Widths or Custom Column Widths from the Layout tab. If you select Custom Column Widths you can further edit each box width by either:
  • Sliding the bar for a container to the left or right
  • Entering a new number in the px box

The total width of a container must equal 640 px. When you adjust one container box, the other container boxes will be adjusted in order to meet the 640 px requirement.

Element Background Color

Sets the color of the container box behind a button.

This can be used to style the background color behind a button if you want only the container column behind a button to be a specific color. To set the color of the entire container a button is in, set the Background Color for the container.

Font Color

Sets the color used for text.

You can either select a color by clicking on the color picker, or you can enter the CSS color value if you know the exact color you want to use.

If you set the font color for an element, it will override any other font color settings you may have applied to a container or the layout. This means, if you make the font color of a Text element yellow, the text will be yellow, even if you have set the font color of the rest of the container to be green.

Font Family

Specifies the type of font used for text.

Fonts have been divided into three categories. In the Font Family list, the first set of fonts that appear are considered supported fonts. These fonts will display as designed in any situation a contact may open an email in.

The second set of fonts, found under the Reduced Support heading, may not be supported in all situations. When you use one of these fonts it's possible a contact opening an email using a specific browser, email client, or mobile device might see a different font than the one you select. Generally, the font you chose will be replaced by another font in the same font family.

The final set of fonts, found under the Limited Support heading, are generally not supported by most email clients or browsers. We do not recommend using these fonts.

For more information about font family see http://www.w3schools.com/cssref/pr_font_font-family.asp.

Font Size

Sets the size of the text.

While you can set the font size to a percentage or a general size (small, medium, etc.) we recommend you set the font size in px. The default font size is 16px.

Font Style

Specifies if the font is italic.

Font style can either be italics or normal text. By default, text is set to normal.

Font Weight

Specifies if the font is bold.

Font weight can be bold or normal text. By default, text is set to normal.
Height

Controls the amount of space that is used for a Spacer.

Setting the height for the Spacer or Text element lets you control the amount of space between elements. Always use a px value for the height.
Line Height

Sets the distance between lines in text.

By default, line height is set to normal but you can select other percentages in order to increase the line height. The higher the line height percentage is set, the greater the space there will be between lines of text in the element.

You cannot apply line height at the container level or to a selection of text within a single element. If you have two Text elements in the same container cell, only the Text element you apply line height to will be effected by the setting.

Letter Spacing

Sets the amount of space between letters. You can set letter spacing using px or em.

By default, letter spacing is set to 0. You have the option of either using a preset letter spacing (0px, 0.25px, 0.5px, 0.75px, 1px, 1.25px, 1.5px, 1.75px and 2px) or specifying your own letter spacing value.

When you set letter spacing to a number larger than 0, it will increase the spread between letters. When you set letter spacing to a number smaller than 0 (Example: "-0.25"), letters will appear closer together.

Numbered list Adds numbers to your list items. You can choose from numbers or Roman numerals. For information on bulleted lists, see the Bulleted list entry.

Padding

Controls the white space around the element.

If you select a padding setting from the list, the padding is applied equally on all sides on the element. You can also type values into the box in order to apply different margin widths to each side of your element. For example, if you type 15px 5px then the top and the bottom of the element will have 15px of white space and the left and right space in the element will have a 5px of white space around it.

Subscript Sets the selected text below the line.

For example, if you type H2O for water, you can put the 2 in a subscript and it will look like this: H2O.

Superscript Sets the selected text above the line.

For example, if you want to add the registered trademark symbol after your product name, you could put the symbol in a superscript and it would look like this: Product®.

Text Alignment

Sets the alignment for text at the layout level.

You can set the text alignment for all text in a layout by going to Settings > Message Design. From here you can choose one of the following for text alignment:
  • left: the text will be aligned to the left edge of the element or container its in
  • center: the text will be centered in the element or container its in
  • right: the text will be aligned to the right edge of the element or container its in
  • justify: stretches the text so that each line has equal width

If you set alignment for text at the container or element level, those settings will override the text alignment set at the layout level.

Text Decoration

Specifies if the font has an underline or strike through.

By default, text decorations is set to normal.

Width

Sets the width of an element.

The width can be set with
  • Percentages: sets the width in relation to the size of the container the element is in. So, if you set a button to have 100% width, it will completely fill the container box.
  • Px: sets the width to a specific size. If that size is larger than the container box, the container box size is automatically adjusted to accommodate the width setting.

Layouts Actions

This table describes what how you can manage layouts after they are built.

Action Description
Copy A Layout

To copy an existing layout, go to the Layouts tab and click the Copy icon to the right of the layout name, then provide the new layout name to use. This feature is helpful if you want to create something very similar for a new layout, with only minor modifications.

Edit A Layout

To edit an existing layout, go to the Layouts tab and either click the layout name or click the Pencil icon to the right of the layout name. If only a Published version exists, this will create a draft version for you to edit. If a Published and Draft version both exist, you will be given a choice to discard the draft which will create a new draft for you to edit, edit the existing draft or view a read-only version of the published version.

Delete A Layout

To delete an existing layout, go to the Layouts tab and click the Delete icon to the right of the layout name. If the layout is currently in use by an identifier, you will see an alert informing you that you are not able to delete the layout until it is removed from use.

Preview A Layout

To preview an existing layout without opening it, go to the Layouts tab and click on the Preview icon to the right of the layout name. A window will open displaying a preview of the layout with the default preview product.

Publish A Layout

To publish an existing layout, go to the Layouts tab and click the Publish icon to the right of the layout name. This will make it available for use on your website, and if a previously published version of this layout exists, it will be replaced with this new version. This option is only available for layouts with a Draft version.

Use A Layout Template

The Templates tab displays a list of all template layouts available. From this tab, you can copy a template by clicking on the Copy icon to the right of the template name. Provide a new layout name and the template is immediately opened for editing as well as copied to the My Layouts tab. You can also preview a template by clicking on the Preview Layout icon to the right of the template name to see what the layout would look like for your default preview product. From that preview, you can also copy the template.

Save or Discard Draft Layouts

Layouts are auto-saved after every change you make so there is no need to proactively hit the Save Changes button, but it is there in case you feel the need to do so. Similarly, if you wish to leave the layout after making changes, you can just navigate away, but pressing the Save & Close button will return you to the Recommendations Web dashboard. If you no longer want the draft, you can click Discard Draft to return to the Recommendations Web dashboard. If there is a published version of the layout, it will remain with no draft. If there is no published version, the layout will be completely deleted.