HTML Snippets

HTML Snippets are reusable blocks of HTML content that you can embed anywhere in your storefront's CMS content. Instead of duplicating the same HTML across multiple pages, you create a snippet once and reference it by name using the {{snippetName}} template syntax. When the storefront renders the page, it automatically replaces the template tag with the snippet's HTML content.

This is useful for content that appears in multiple places, such as promotional banners, contact information blocks, legal disclaimers, or shared navigation elements. Update the snippet in one place and the change is reflected everywhere it is used.

View HTML Snippets

1. From your Unified Admin, go to Content > HTML Snippets.
2. The list displays all HTML snippets for the current storefront in an AG Grid table.
3. Use the search bar to filter snippets by name or content.
4. Click Add HTML Snippet to create a new snippet.
5. Use the overflow menu (three-dot icon) for additional actions:
   • Export downloads all snippets as an Excel (XLSX) file.
   • Import uploads an Excel file to create or update snippets in bulk.

List Columns

Add/Edit a Snippet

1. Click Add HTML Snippet from the list page, or click Edit from the Action column on an existing snippet.
2. The editor page opens with a Name field and a content editor.
3. Enter or update the snippet content, then click Save.

Snippet Fields

Editor Tabs

Design View — A Froala WYSIWYG editor for visually composing the snippet content. Supports rich text formatting, images, links, and all standard Froala toolbar features.

Code View — A Monaco code editor (VS Code engine) with HTML syntax highlighting, minimap, and auto-formatting for editing the raw HTML directly.

Fullscreen — Click the fullscreen icon tab to expand the editor to fill the entire screen. Click it again to exit fullscreen mode.

Delete a Snippet

1. Click Delete from the Action column on the snippet you want to remove.
2. Confirm the deletion in the confirmation dialog.

Deleting a snippet permanently removes it from the database. Any CMS content that references the deleted snippet via {{snippetName}} will display the raw template tag instead of rendered content.

Import and Export

Export

1. From the HTML Snippets list, click the overflow menu (three-dot icon) and select Export.
2. An Excel (XLSX) file downloads containing all snippets with columns: Id, Name, and Snippet.

Import

1. From the HTML Snippets list, click the overflow menu and select Import.
2. Upload an Excel file in the same format as the export.
3. Rows with an existing Id update the matching snippet's name and content. Rows with a new or zero Id create new snippets.

Import and export are useful for migrating snippets between storefronts or making bulk edits in a spreadsheet.

Using Snippets in CMS Content

Once you create a snippet, it becomes available in all CMS content editors across the platform. When editing content in the Page, Blog, Product, or Category CMS editors, a Snippets dropdown button (gear icon) appears in the Froala toolbar.

1. Position your cursor where you want the snippet to appear.
2. Click the Snippets dropdown in the toolbar.
3. Select the snippet name from the list.
4. The editor inserts {{snippetName}} at the cursor position.

When the storefront renders the page, it replaces each {{snippetName}} tag with the snippet's full HTML content. If a snippet name is not found, the original template tag is displayed as-is.

Snippets can also contain page link placeholders (<%=pagelink(id)%>) which are resolved to the correct SEO URLs on the storefront.

Associations

Print Store

Related Pages

• Page Content — embed snippets in CMS pages using the template syntax
• Blog Content — embed snippets in blog posts and blog category pages
• Product Content — embed snippets in product descriptions on detail pages
• Category Content — embed snippets in category page content