Sculpt Overview

When our users requested an easy way to build personalized message content without the need for HTML coding knowledge, we went to the drawing board and built a custom tool from the ground up.

We wanted to give the marketer drag and drop functionality for simple layout design, as well as empower the designer with the ability to create completely custom content blocks that the marketer could use to craft their content.

For each custom block, we wanted the ability to reference practically every element of the code by a variable that the marketer could customize using simple forms and controls.

We didn't stop there though! We also needed a way to retain our powerful personalization syntax, so we made sure that blocks would support Smarty functions for displaying dynamic content using real-time data.

Enter Sculpt

Think of Sculpt as a tool within a tool. For the designer it's a custom block and template creator, and for the marketer, a drag and drop message builder.

You can now dream up any type of message content (banners, rich text, product grids, cart items, recommendations, etc.) turn them into blocks, and set the Marketer loose to create unlimited layouts and content variations. And because blocks are truly custom, you can incorporate our powerful Smarty syntax to generate fully personalized content in real time.

The Sculpt builder consists of 3 main elements: templates, blocks, and messages.

Templates

Templates can be thought of as the scaffolding that holds the blocks.  A Sculpt template consists of the HTML shell that blocks are dragged into.  Some elements of the template can be "locked down" and un-editable (such as logos, footers, etc.) while other elements can be defined as "draggable" that allow the marketer to drag in blocks from the block library.

Templates can also be made with pre-loaded editable blocks that allow the marketer to start with pre-defined layouts.  Those pre-loaded blocks can be edited, duplicated or deleted during message creation.

Template settings can also be created allowing you to use variables to reference global template elements that can cascade across multiple blocks. This is useful for link appends, global colors or even pre-header text that may be hidden from view.

Learn how to create Sculpt templates.

Blocks

A block is an HTML content element that can be dragged into a template. Any attribute of the block (image url, headline, text, links, etc.) can be referenced from a variable that the marketer can then control using a form you create. 

For example, you can have a block that consists of a <table> with a nested image.  You could then reference the image path, the image link, and the alt text with variables and create a form that the marketer can use to select an image from the image library, write alt text and add the image link.

You can create a whole library of blocks that the marketer can drag into templates during message creation to build customized messages without writing a line of code.

If the marketer needs another type of content, like a grid of recently browsed products, you can create a new custom block and add it to the library.

Super powerful, very customizable, and awesome, totally awesome (thanks Spicoli)!

Learn how to create Sculpt blocks.

Messages

When you create a new batch or automated message, you have the option to use Sculpt templates to build the message content.

Once a template is chosen, you'll have access to the Sculpt block library where you can drag, drop, edit and delete blocks in the editor.

Sculpt blocks and template settings are edited using forms. These forms are created when the template and blocks are set up.  

Note that the message content you create will be saved with the message and not the underlying Sculpt template and blocks. 

If Sculpt templates or blocks are changed, the message will not be affected.  Likewise, saving a message will not affect the underlying template or blocks.

Learn how to create a Sculpt message.

Form Builder

When building Sculpt Templates and Sculpt Blocks you are able to define which elements of the HTML (image paths, links, text, etc.) will be editable during message creation.

These editable elements are referenced using Smarty variables placed within the HTML and edited by the marketer using custom forms you create. 

When creating these custom forms, the variable keys and data structure are generated automatically based on the names you provide. 

Sculpt forms consists of two main elements:

• Sections - Sections provide a way to organize your form. Sections can contain multiple related fields. When creating blocks, sections can also be set as repeatable.
• Fields - Form fields (text, image selectors, etc.) are used by the marketer during message creation for entering custom content values (text, links, colors, etc).

When creating fields, you will need to select the field type that will be displayed.

The available field types are:

• Checkbox - Displays a checkbox to collect a boolean value (true or false).
• HTML Editor - Displays an HTML editor for collecting raw HTML.
• Image Selector - Displays a text field for an image URL as well as a button to access the image library.
• Text - Displays a single line text input.
• Text Area - Displays a multi line text input.
• Color Picker - Displays a color picker for selecting colors or adding hex values.
• Number - Displays an input that accepts number values.
• Select - Display a dropdown menu.
• Rich Text - Insert a free-form text area with a customizable text editing interface.

Data Output and Variable Keys

As you name your sections and fields, the system will generate the variable keys needed to reference the Smarty variables in your HTML. You can access the data output window to view the data schema in JSON format. Refer to this when adding the Smarty variables in your HTML.

Our Example

Sometimes the best way to learn is to just do it, so we created an example template to get you started. We'll use this as a reference to demonstrate how to build blocks and templates.

Note in the example image below the different blocks we'll be creating as well as the template that contains the HTML shell with the logo and footer.

Our example consists of the HTML shell as well as the content blocks in a single HTML document.  To "Sculptify" our example for use in the Sculpt editor, we'll need to separate the content from the shell and then create a Sculpt template and each of the Sculpt blocks.

Download the Example Template and Blocks

If you'd like to get started right away with our example in your own account, we made it easy to download all the blocks and import them into your account.

In the next article learn about building the Sculpt template.