Guide to snippets
Use snippets to quickly insert repeated code such as containers, columns, and buttons. Snippets can be integral to a successful design system and save marketers and developers hours. They make it easy to reuse code instead of creating portions of the email from scratch whenever needed.
Here we’ll outline how you can create a snippet in Parcel and some use cases you can deploy using snippets that will optimize how you build your emails.
To set the context, how often do you change the design and styling of a CTA button that you use in your emails? The most common answer to this question is probably “rarely.” Although you probably customize the copy and potentially the URL used in these buttons, their styling most likely maintains consistency email after email.
Instead of coding out a button every time you need to use it within an email, you can create a snippet of this code and then reference it whenever you need it in all your emails moving forward.
Let’s say you design a CTA button that ends up being 10 lines of code, and informally you refer to it as “blue-cta”. This is a perfect use case for a snippet, and after creating one, you could easily reference this in your emails by automatically inserting these 10 lines every time you type “blue-cta” in your email HTML.
Voila! In short, a snippet is a modular block of code that can be referenced and subsequently expanded whenever you want within Parcel.
- Create a snippet by navigating to the top left of your navigation and clicking the + icon beside “Snippets”.
- Specify the snippet's name and how you would like to trigger it.
- And then input the code you would like to reference easily.
When you are ready to insert your snippet into your email, just type out the trigger name you specified, and the code will auto-expand into the HTML.
Snippets have a variety of use cases:
A button is a perfect use case for a snippet. The design and code remain the same while giving you the ability to change the copy and URL on an individual basis.
Although some CTA’s may remain the same, and those would be great examples of when you may want to use a component instead of a snippet, brands that frequently change the destination of their links would benefit in their buttons being referenced as a snippet.
Scroll above to learn how to create and reference a snippet in your emails.
If you frequently use columns in your email designs, creating a snippet of the columns framework allows you to transfer the code into your email and customize the content of each column on a one-off basis.
For developers that want to create emails using <div> but still want to optimize for Outlook, ghost tables are a perfect example of where you’d want to save a snippet.
For advanced emails, you might want to use a ghost table when you are sick and tired of fighting with Outlook. Ghost tables are a perfect way to write a conditional comment that Outlook reads and cater to the modern world of email clients.
If you consistently have <div> blocks in your email that include border width styling, padding, and all that jazz for clients other than Outlook, you need to create tables that keep Outlook in mind. Saving your styled ghost tables as snippets are another excellent use case that can save you time as an email creator.