Customize your own HTML Block

Overview

Custom HTML allows you to create fully customizable content blocks within your cart drawer using HTML.

Unlike other Snap Cart Drawer features, Custom HTML does not provide predefined layouts or content. Instead, it gives you complete flexibility to create and display custom elements that best suit your store's needs.

You can use Custom HTML to display:

Promotional banners.
Custom announcements.
Store policies.
Images and icons.
Additional information for customers.
Third-party widgets that support HTML embeds.
Any other custom content supported by HTML.

One or multiple Custom HTML blocks can be added to a cart drawer and positioned anywhere within its layout.

Create a Custom HTML Block

To create a new Custom HTML block:

Click Add Custom HTML.
Enter a name for your block.
Add your HTML code to the Custom HTML editor.
Save your changes.

Multiple Custom HTML blocks can be added to the same cart drawer when needed.

Note: Custom HTML blocks are independent components and can be enabled, disabled, reordered, or removed individually.

Custom HTML blocks can't be put in the Header section.

You can remove an HTML block by pressing the trashcan button.

Configure Your Content

Block Name

The block name is used to help identify your Custom HTML block within the Cart Editor.

Giving each block a descriptive name can make it easier to manage multiple Custom HTML components.

Examples:

Free Shipping Banner
Holiday Promotion
Store Policies
Payment Information

HTML Content

Enter the HTML code you would like to display within the cart drawer.

Custom HTML supports a wide range of use cases, including:

Text content.
Images.
Buttons.
Promotional sections.
Embedded HTML elements.

Tip: Keep your HTML content optimized for both desktop and mobile storefronts to provide the best customer experience.

Position Your Custom HTML Block

Custom HTML blocks can be placed anywhere within the cart drawer layout.

You can:

Move the block to the Header section.
Display it alongside cart items.
Position it near the checkout section.
Place multiple Custom HTML blocks throughout the cart drawer.

This flexibility allows you to design highly customized cart experiences that align with your store's conversion goals.

Examples

Display a promotional banner above Upsell Products.

Add shipping information before the Checkout button.

Highlight limited-time offers near the Reward Progress Bar.

Display custom payment or security information alongside Trust Badges.

Customer Experience

Custom HTML provides merchants with complete control over the content displayed within their cart drawer.

Depending on your implementation, customers may see:

Promotional content.
Additional purchasing information.
Custom call-to-action sections.
Store-specific announcements.
Enhanced checkout experiences.

Because Custom HTML is fully customizable, the customer experience will vary based on the HTML content you choose to display.

Help & Support

Have questions or running into issues? Reach out to us at [email protected] or via the live chat in the app — we're happy to help!