Base
Alpaco is much more than a email builder, HTML or CSS, it's a way to systemize and manage your brand, design rules, data-integrations, languages, all those small details needed for an email template.
A template consist of the following elements:
When creating an email, the user first selects the name and which Template to use for that particular email. All the options, settings, design and Blocks are all contained and confined within that template. The design rules are based on the universal language Liquid and opens up for immense possibilities.
It's within and between the Base and these Blocks, design-rules, data-rules and others are defined.
Template Editor
The Template Editor is divided into 3 panels:
Center panel - this is where HTML, CSS and Liquid rules are inserted and highlighted.
Right panel - this is where all input types are chosen, named, grouped and configured. From here you can insert different inputs like images, text, links and similar values.
Base
The Base is the foundation of the Template. Think of it as the foundation or the wrapper, from which users can insert Blocks into. The Base consist of HTML/CSS and usually contains tags like <html> and <head> but also usually things shared across emails (such as a header with logo or a footer with social links).
The Base will always be found in the Left panel at the top.
Content Placement
Click the Base in the Left panel.
Insert your entire template code into the Center panel.
Scroll down into the template code in the Center panel and locate where, you in a moment, want to insert Blocks. There you must insert the following Liquid tag
{{ blocks }}.In the Right panel, Give the Base a compelling name, and a key, like "template", "foundation" or simply "base".
Global variables
The global tab, found under the Base, is a tab created solely for global rules and styles to be used across Base and Blocks governed from a centralized place.
The tab allows for JSON formatted objects and does not come with any options for inputs. It's a developer-only list of objects to quickly control multiple values across the template.
Referencing your variables any places is done by the following prefix:
{{global.variable-name}}The Global tab is excellent at managing any sort of brand defining settings like fonts, font-size, colors, margins, paddings and others that are repeated throughout your template.
Block position logic
In Base, you have access to the entire sequence of Blocks. This lets you define logic across all positions — for example, detecting if a certain Block comes third, or inserting a design pattern every fourth block. Sometimes, you want a something in the Base appearance or behavior to change depending on the order in which a certain type of Block is listed.
This is where Block Position Logic comes in: a feature that allows to detect the position or sequence of Blocks, and create rules based on that. The core concept here is that you have an array of Blocks. From here we can start creating rules. Here are the variables:
{% for item in base.all_blocks %}
{{ item }}
{% endfor %}Put into practice we can then start to look for the Block name, and check if there ever comes a Block named "Article" as the last block in the array, make a change to the footer, so it neatly blends in with the rest of the design.
{% assign last_block = base.all_blocks | last %}
{% assign is_article_last = last_block == "article" %}
{% if is_article_last %}
Background-color:#3a3b38;
{% endif %}Result
Last updated