Settings

Settings are a core concept of Better, and it's important to understand how they work to make the best possible Template and editing experience for the marketeer.

Both the Template Base and every Component has their own settings, that works in the same way. The Template Base Settings (Global Settings) can be access from everywhere, the Component Settings are scoped to the specific Component.

Settings are how you "open up" your Template, define the inputs that should be available in the Email Editor and for the marketeer. For example, a Text String input for a heading in.

A Setting consists of one or more Inputs.

A Setting can be Repeatable.

Creating a Setting

To create a new Setting, go to a specific Component or the Layout Base in the Template Editor and click Add Setting

A blank Setting will be added to the pane.

Give the setting a Key and a Name. The value you set for Key will be part of the variable name to reference within the code. When you add inputs, you will reference the values in the format of my_setting.my_first_input and my_setting.my_second_input.

The Name is shown in the Email Editor when the marketeer is filling values for the settings and inputs.

We will change the Key to article and Name to Article.

When first created, a Setting has no Inputs. We will add an Input of type Text String.

After the Input has been added, we will change the Key to title and the Name to Title.

We now have a Setting with a Text Input for a title field, which the user can fill in when creating the email. You can change to Preview Mode and see how it will look for the marketeer in the Email Editor:

In your HTML code, you can insert the value of this input field by inserting the Liquid variable {{ article.title }} in your HTML.

Advanced Options for Inputs

In order to help the marketeer when creating emails, we have the option to provide some additional details about the input. Click the Advanced > link to show the additional options:

The following additional options can be set:

• Default Value - The value entered here will be prefilled in the input field when creating a new component. The Default Value is of the same type as the input, i.e. if it's a Text String, you can enter a text value. If it's an Image, you can provide an image.

• Placeholder - The value will show as placeholder inside the input field. If there's a Default Value, the placeholder will only show if the default value is deleted.

• Hint - The value will show underneath the input field, and can be used to provide guidance.

If we switch to Preview Mode, we can see how the options help aid the marketeer:

Repeatable Settings

A Setting can be set as Repetable, which means that for the inputs in this setting, the Marketeer should be able to add an undefined number of items. Each Item will have the Inputs defined in this Setting.

Let's look at an example. We will create a Setting, Buttons, that is repeatable. I.e., the user should be able to add one or more buttons in the Email Editor.

1. Create a setting, and switch the repeatable checkbox to on

2. Create a Text String input

This will be the text to show on the buttons. We give it the key cta.

3. Wrap the code you want to repeat inside a for-loop

The settings key buttons is an array of settings, each containing a text input with the key cta.

{% for button in buttons %}
<div>{{ button.cta }}</div>
{% endfor %}

If you switch to the Preview Mode, you will be able to test how it works in the Email Editor.

Your setting will look something like this:

The next obvious step would be to add another text input, for the link, and insert it into the href attribute of the button. We will leave that exercise up to you!