You wanted to add another button, a product, a bulletpoint or another text - and then seen your design go haywire or force you to insert a new block each time, where the spacing is off so it doesn't really look like it was intended to belong to the original block in the first place...
What would you expect
If you've ever experienced finding yourself in the above scenario, we get you - but again what would you expect from a conventional drag&drop editor, it doesn't understand contexts or design rules the way human does. It can't for instance know, that if you insert two buttons to a Block, that one should be the primary button and one should look like the secondary. Nor does it understand that when you insert a list itinerary, that the even numbers should be colored one way, and the odd another.
There's a long list of examples where we can easily convey it through words and visuals between people, but when it comes to conventional editors, that sense of logic is nowhere to be found - or does it?
"What if you could change the layout, based on the total amount of items in the list?"
- Filip Bisp, CEO & Co-founder, Alpaco
You need a programming language
Much like we've come to expect this from our web designs, we need the same flexibility when it comes to email marketing. You've probably read this before, but it's time we get that same level of flexibility in email marketing as we do in web.
But it requires a programming language - and that's what we've set out to do, and named it "Repeatable".
A simple Repeatable
Let's start it out with the most common thing ever, a bulletlist. How you shape your design of said bulletlist is totally up to you. It doesn't need to be full width at all.
Now we want it to be infinite(because who's to say how many bulletpoints you'll need), we also want it to count the number of iterations for us, and insert that number at the beginning of the bulletpoint so it says "1. Bulletpoint, 2. Bulletpoint ect..." and be mindful that the spacing is always correct between each bulletpoint.
Voilá there you go, a simple and infinite bullet list that does all the nitty gritty design stuff for you, without you having to think about it at all - it just does it right out of the box.
Let's add an odd/even
Why stop at simply making a list, when there's so much many more levels of design we can add to it, like a different color scheme depending on if the item is an odd or even in the list.
Here we're essentially changing the colors of the text, from gray background, blue headline and dark grey text, into blue background, white headline and white text depending on whether the item is odd or even.
Changing design, based on the amount
Now we're getting in to something really powerful here! Let's change the task and look at it from a different perspective; a product list. What if you could change the layout, based on the total amount of items in the list?
In this example, where we have a Product Block, that changed the layout of the products, depending on if there's one, two, three, four, or any number of products in the list.
Why does it matter
It's a step up from the conventional editors out there, as it can execute on design rules that are fairly simple to say, but complex to enforce across different content creators over time. With our "Repeatable" logic and templating language we believe we're bridging the gap between these two to bring you a flexible, simple yet incredibly powerful feature to ensure your brand is always on point - regardless of who's making the newsletter that day.
I bet you, we can always find one application for Repeatable in any templates.
How does it work
From a user perspective, it's fairly simple, all Repeatable features will have "+" button at the end of a section as shown in the examples above. Click it and see it hand you another item for you to insert content into.
From a Developers point of view, it's contains a few more steps, like converting your input group into a "Repeatable" and wrapping the code you want repeated with the provided liquid markup. But I promise you it can be as easy as those two steps.
That's the general concept of it. For more in-depth we refer to our documentation.
We're very happy to provide this feature for you, and although it can seem a bit unnecessary or complex at times, it really is a hero in disguise with an immense opportunity of complexity if you wanted it to. Enjoy clicking that Repeatable🦙
