Snippet Manager – Help Center

What is the Snippet Manager?

When you want to add integrations to your storefront from other services like A/B testing, customer reviews, customer support chats, newsletter tools or analytics, these services often give you small pieces of code called HTML snippets.

Our Snippet Manager helps you to:

easily put these third-party code pieces into your store, integrating these other services.
add your own advanced CSS code in <style></style> tags
add your own JavaScript in <script></script> tags.
load your own external resources like CSS files, fonts, or scripts, or use advanced HTML tags like site verification tags in the head of pages.

This guide will show you how to use the Snippet Manager.

Accessing the Snippet Manager

The Snippet Manager can be accessed while editing a Layout Standard or a Page.

If you're currently editing a Layout Standard, click on the Settings & Snippets link in the top bar above the WYSIWYG editing area.

If you're currently editing a page, click on the SEO & Snippets link in the top bar above the WYSIWYG editing area.

Managing snippets

This view provides an overview of your snippets. While here, you can add, edit and delete snippets, as well as quickly enabling and disabling your snippets.

You may also see this message in the snippet manager while on the Categories or Products Layout Standards or on a single Page:

This indicates that the current Layout Standard or Page will include snippets inherited from the Header & Footer Layout Standard. You can click the underlined link to view which snippets are inherited. This behaviour is explained in detail in the scopes section.

Adding a snippet

To add a snippet, click on the + Add button above the snippets list and the snippet details modal will show up.

Editing a snippet

To edit a snippet, click on the pencil icon in the actions column and the snippet details modal will show up.

Deleting a snippet

To delete a snippet click on the bin icon in the actions column and confirm its deletion in the small pop-up.

Snippet details

You can add or edit the snippet code and its placement, as well as some organizational fields in the snippet details view.

Name: This text field is for organizational and editor display purposes only.
Placement: These options define where the snippet is placed in your HTML document.
- Some services require that their snippet is embedded in the head tag to load early to perform some actions (e.g. Analytics, Consent Manager), while some other services require that their script is loaded late, for example to access the DOM structure (e.g. Newsletters, A/B testing)
  If the placement of the snippet isn't important, we recommend placing it at Body Bottom to minimize the impact on your page speed
Activated: This switch is responsible for activating or deactivating the snippet, like this you can have snippets in a draft stage before activating them.
Description: This long text field is for organizational and display purposes only.
Snippet: This code editor is where the HTML code is added.

The Snippet Manager scopes

Depending on your use-case, snippets can be either added to Layout Standards, or only to specific Pages.

If a snippet is added to a Layout Standard, then it will be embedded on every page that inherits from it. On the other hand, if a snippet is added to a specific page, then it will be embedded on that page only.

The following table details which snippets will be embedded on which page type based on where they were added

Page Type	Snippet source
All pages (including all below)	Header & Footer Layout Standard
Product Listing Pages (Category/Brands)	Header & Footer AND Categories Layout Standards
Product Detail Pages	Header & Footer AND Products Layout Standards
Single Pages	Header & Footer Layout Standard AND the page itself

Handlebars

The Styla Snippet manager supports {{handlebars}}, which allows you to insert dynamic data into your code snippets

Find out more about Handlebars here