Before you start

Things you need to know:

You should understand the different kinds of SmartBlock layouts available.
Learn more in Introduction to SmartBlock layouts.

Create and edit layouts

You can either create new account-level layouts which you can access when creating SmartBlocks, or you can edit the layout of a particular SmartBlock, or group of SmartBlocks.

Account-level layouts

To access your account-level layouts:

Go to Content > Layouts.
Account-level layouts are identified by a person icon in the top right.
To filter the Layouts page to show only your account-level layouts:
1. Expand the Filters drop-down menu.
2. Select the Account Layouts Only switch.

When you create a new SmartBlock, your account-level layouts for the relevant Placement, Context and Tactic appear in the Layout selection step.

Learn more in the section Other settings.

Create a new account-level layout

Go to Content > Layouts.
Select CREATE LAYOUT.
Either:
1. Select Blank Layout
  To design from scratch.
2. Select the template you want to work from.
  Make amendments to the design of an existing layout.
Enter a name for your new layout.
Select SAVE.

Edit an existing account-level layout

Go to Content > Layouts.
Select the layout you want, then select EDIT.

SmartBlock-level layouts

To edit a SmartBlock-level layout:

Go to Content > SmartBlocks.
Select the SmartBlock you want to edit the layout for, then select EDIT.
Select the Edit Layout (</>) icon.

The Edit Layout option is only available for SmartBlocks created using the current SmartBlock editing interface. It is not supported for legacy (pre-2023) SmartBlocks which used the older user interface.

If the layout a Shared Layout, then when you select Edit Layout you are editing the layout that is shared by all SmartBlocks set to use it. A warning message is displayed at the top of the screen to let you know that editing this layout impacts all SmartBlocks using the layout.

If the layout is not shared, you are only editing the layout code for that single SmartBlock.

Learn more in the section Other settings.

Edit a layout

The Editing Layout page has two main sections:

The left panel lets you change the configurable fields, and the sections they are in. These are the fields shown in the SmartBlock editing interface. You can also set the defaults of the fields here.
The right panel either gives the HTML source code for editing, or shows a preview of the SmartBlock, depending on which tab you have selected.

Sections and fields

A section is a panel that can be opened or collapsed. It groups together several fields that are logically connected.

For example, if we expand the Headline section, you see several fields which control different aspects of how the headline is displayed:

These fields mean that when a user is editing the SmartBlock, they can change things like the font, alignment and text contents of the SmartBlock heading, without having to alter any code.

To add a new section, select ADD SECTION.

Add new fields to a layout

Field types

There are a number of field types available, some basic, such as text fields, and some more specialist fields:

Field Type	Description
Color/Multiple Color	Creates a color picker. The Multiple option allows for elements where both a foreground and background color is required, or in special cases where more than two colors may be used. Both field types can support transparency.
Font	Creates a dropdown of available fonts that can be selected from.
Columns	Creates a selectable number of columns. For example, this is useful to control the number of products shown per row in a recommendation SmartBlock.
Image URL	Creates a field to allow the entry of an image URL and an upload button to upload images to be used in the SmartBlock.
Select	Creates a dropdown with options and values. The values available in the layout can be entered in the field settings, under Options, when the field is created or amended.
Font Size	Creates both a number field and a units dropdown to allow sizes to be specified. Could be used for other size values, not just font size.
URL Field	Creates a text entry field, similar to a text field, and can have Jinja enabled.
Location Image	Creates a dropdown of which location field to use as the image. Used when the SmartBlock is linked to a Location Set. Learn more in Geotargeting.
Location Extra Data	Creates a dropdown of which location field to use as the extra data. Used when the SmartBlock is linked to a Location Set.
Custom Signal	Creates a dropdown list all of the custom signal triggers in the account. Used with Data Capture SmartBlocks, to link to a trigger.
Padding	See Font Size.
Date Time	Creates a date/time picker.
Timezone	Creates a dropdown of time zones.
Group	Creates a toggle field and allows sub-fields to be added. These are controlled by the group toggle, enabling or disabling them all in the UI based on the state of the group field. This impacts the ID of the sub-fields you add in, so any item in the group is prepended with the group name.

Within the HTML code, the status of fields can be checked by looking at the active flag, for example:

{% if fields.border.active %}
style="border-style: solid;"
{% endif %}

This would pass and show the extra content if the active flag of the border toggle was true, i.e. active.

Create a new field

Expand the section you want to place the field in.
You can use the Add section option if you need to create a new section.
Select NEW FIELD, and then select the field type you want to create.

When you have created a new field, you can reference it in the layout HTML code, in an appropriate position, using a Jinja2 merge; something like:

{{ fields.fieldName }}

Fortunately, you don’t need to remember the code.

To add the merge code to the HTML:

Select the HTML field.
Right-click where you want the reference to be placed in the HTML panel.
A menu appears that contains a list of all of the fields. Select the field you want to add.

Example: Add a new piece of text to the layout

To do this:

Select ADD SECTION.
Inside your new section, select NEW FIELD, and then select Text Field.
Enter a name for the new field.
Select the Settings icon for the new field, and copy the ID that’s been generated.
Add the HTML for the new text box in the right hand panel, including the field ID. For example:
{{ mergeField( fields.priorityAnnouncement.text) }}
Select VALIDATE OUTPUT, then, in the pop-over window, select SAVE.

Field options

To access options for a field, select the settings icon.

Name
The user facing name, shown when editing the SmartBlock
MAKE ID
Creates an ID based on the name you entered, and whether the field is in a group.
Learn more in the section Group fields.
Description
This text appears in the tooltip shown when a user selects the ? icon for the field.
First
Determines whether the field should appear on a new row or on a row alongside the previous field. Fields that have the First toggle set to On start a new row.
Sort Order
The order the fields should show in.
Merge Jinja
Only available on some field types
If enabled, allows Jinja 2 within the field to be merged when the SmartBlock is displayed to the consumer. For example, you could include the following to merge in their points value:
{{ person.loyalty.points }}
Allow Negative Numbers
Only available on some field types
When enabled, allows a numerical field to accept and display negative values.

Group fields

Within a section, fields can also be grouped together, to toggle on and off a group of fields all at one. For example, Border settings might be grouped, so if the Border is turned off, the other border settings are grayed out and made inaccessible as well.

To add a group:

Select NEW FIELD.
Select Group Field from the drop-down menu. This adds a group toggle.
Select the settings icon for the new group field and give the group a name, for example, Border.

You can then select NEW SUB-FIELD to add fields to the group.

Fields within a group automatically have the group ID inside its own ID, for example, a Color field within the Border group has an ID of border.borderColor.

Other settings

The Other Settings tab only appears in system default and account-level layouts, as the settings on this tab relate to creating a new SmartBlock.

Available settings:

Placement setting
This controls which placements the layout should be shown for when a user creates a new SmartBlock.
- Email
- Web
- Email and Web.
Often you might need to create a different layout for web and email, because they function very differently.
Learn more in the section Web vs email layouts.

Blocked Contexts and Blocked Tactics
These settings stop the layout being shown if a particular context (more detailed placement) or tactic is chosen when a user is creating a new SmartBlock. For example, you might not want a recommendation referencing the Product on the page to be used on a Homepage placement context, as this wouldn’t work.

Creation mode
If Shared Layout is enabled, any changes to the layout change all SmartBlocks which have been created using this layout. When editing the layout, a warning message is displayed and gives the number of SmartBlocks affected. If disabled, any SmartBlock created using the layout has a copy of the layout, so individual SmartBlocks won’t be impacted by layout changes.

Merge Parameters
Here you can add merge parameters that you want to allow in the Slot query string. For example, to pass through the parameter myref, add the myref parameter here, then manually edit the Slot URL query string to add, for example, ?myref=abcd and merge this value into the layout using {{merges.myref}}.

When you have made all the changes you want to a layout, select VALIDATE OUTPUT, and then select a save option:

SAVE AS
Save a new layout with the changes you made.

SAVE
Save your changes to the existing layout.

SAVE AND PREVIEW
Save your changes to the existing layout, and update and open the Preview panel.

Get started with SmartBlocks

Introduction to SmartBlock layouts

Pinterest SmartBlocks

Cart and SmartBlock layout merges

Add custom fonts to SmartBlocks