Tutorial: How to Locate & Edit the Cart Snapshot in the Visual Builder

What Is the Cart Snapshot?

The Cart Snapshot is the Visual Builder element that powers slide-out carts, mini-carts, and drawer-style cart experiences in your UltraCart StoreFront. It lives under Off-Page Elements in the Hierarchy panel; meaning it exists outside the standard page flow and is triggered by user actions (such as clicking the cart icon or adding an item).

• Slide-out / drawer cart

• Mini-cart overlays

• Add-to-cart upsell panels

• Trigger-based cart previews

• Responsive mobile cart views

• Custom cart icon behaviors

Before You Begin

• You must be logged into your UltraCart admin account atsecure.ultracart.com

• You need StoreFronts access permissions on your user account

• Your active theme must support the Cart Snapshot (see Accuracy Note #3 below)

• Themes known to support Cart Snapshot include:Woodland,Fashion, and similar REST Checkout API–enabled themes

Access the Visual Builder & Edit the Cart Snapshot

1

Log In to UltraCart

Navigate to your UltraCart admin and sign in:

2

Open the StoreFronts Section

In the main left-hand navigation menu, click StoreFronts.

3

Select Your Active StoreFront

Locate your storefront in the list and click its name or host to select it.

4

Enter the Visual Builder

There are two confirmed paths into the Visual Builder:

• Standard path: Click Browse Your Store (found under General Settings for your StoreFront). This opens a preview of your live store. Then click the Edit button that appears in the top-left corner of the preview. This method is required to edit within the checkout/cart flow.

• Shortcut: If available for your theme, click the pencil/Edit icon directly from the StoreFronts list to jump into the Visual Builder.

💡

Tip — Editing the Cart FlowTo specifically work with the Cart Snapshot in context, use the Browse Your Store path. Add an item to your cart within the preview to reach the cart/checkout state, then click Edit. This ensures the Off-Page Elements tree is fully populated.

5

Locate the Right-Side Builder Panel

Once inside the Visual Builder, your builder controls appear as a panel on the right side of the screen. This is where you access Hierarchy, Settings, and other tools.

6

Open the Hierarchy Panel

Click the Hierarchy icon (the stacked-pages icon) in the right panel, or press the keyboard shortcut:

H — opens/closes the Hierarchy panel

The Hierarchy panel displays the full nested tree of all page and off-page elements in your theme.

7

Find the Cart Snapshot Element

In the Hierarchy panel, expand the element tree and look for:

You can also use the Hierarchy search box and type "Cart Snapshot" to locate it directly.

⚠️

Theme-Dependent FeatureThe Cart Snapshot element is not present in all themes. It requires a theme that implements the REST Checkout API — confirmed examples include the Woodland and Fashion themes. If you do not see "Cart Snapshot" in your Hierarchy, your theme may not support it. Contact UltraCart support with a screenshot of your open Hierarchy panel and your theme name.

8

Select the Cart Snapshot Element

Click the Cart Snapshot entry in the Hierarchy panel to select it. The left and bottom panels will update to show its settings, including styles, triggers, content, and responsive width controls.

9

Make Your Edits

With the Cart Snapshot selected, you can customize it using the inspector panels:

• Layout & Colors: Adjust via drag-and-drop or the element inspector

• Triggers: Configure what opens the cart (e.g., cart icon click, add-to-cart event)

• Upsells: Add upsell or cross-sell elements inside the snapshot drawer

• Responsive Controls: Fine-tune behavior for mobile, tablet, and desktop breakpoints

ℹ️

Note — Trigger NamesExact trigger option names (e.g., "Open on Add to Cart") may vary by theme version. Refer to the label text shown in your own inspector for the authoritative names.

10

Save and Publish

Click Save (top-right of the Visual Builder), then click Publish to push your changes to the live storefront.

💡

TipTest your changes immediately after publishing by opening your storefront in a new browser tab, adding a product to your cart, and verifying the Cart Snapshot opens and displays correctly.

Expected Result

After saving and publishing, clicking your cart icon (or the configured trigger action) will open your customized Cart Snapshot drawer with all the updates you made in the Hierarchy. Test by adding an item to your cart on the live storefront.

Next Steps

1. 1Add a product to your cart on the live storefront to test that the Cart Snapshot opens correctly.

2. 2Experiment with responsive width controls to optimize the cart drawer for mobile visitors.

3. 3Consider adding upsell elements inside the Cart Snapshot to increase average order value.

4. 4If the Cart Snapshot is missing from your Hierarchy, contact UltraCart support with a screenshot of your Hierarchy panel and your current theme name — they can confirm if your theme supports the feature or recommend an upgrade path.

Accuracy Notes

The following items were cross-checked against UltraCart's official documentation and Confluence support pages during the production of this tutorial.

✓ Verified

Login URL & admin navigation path. Confirmed: https://secure.ultracart.com → Main Menu → StoreFronts is the correct path per UltraCart documentation.

✓ Verified

Hierarchy panel access & the H keyboard shortcut. Confirmed in UltraCart's Visual Builder slider tutorial: the Hierarchy panel is opened via the stacked-pages icon or the H hotkey, and the panel opens on the far right side of the screen.

⚠ Caveat Added

Cart Snapshot is theme-dependent. The original support reply did not mention this critical limitation. Per UltraCart's StoreFront FAQ: "some themes… use the REST Checkout API to make additional functionality, like the cart snapshot, available." Confirmed themes include Woodland and Fashion. Not all themes include the Cart Snapshot element — this tutorial now prominently notes this restriction.

✎ Clarified

Step 4 — Two entry paths into the Visual Builder. The original support reply framed "Click Edit (or the pencil icon)" as the primary path, with "Browse Your Store" only as a tip. Documentation confirms the standard path is Browse Your Store → Edit button (top-left of preview), especially required for editing cart/checkout flow elements. Both paths are now clearly described in Step 4 of this tutorial.

✓ Verified

Off-Page Elements category. Confirmed in official UltraCart Visual Builder documentation: Off-Page Elements are described as components including "modals, side panels, alert dialogs, and upsell features" that are triggered by user actions — consistent with the Cart Snapshot's purpose and location in the hierarchy.

⚠ Caveat Added

Specific trigger option names. The support reply listed trigger names such as "Open on Add to Cart" and "On Cart Icon Click." These are plausible but could not be independently verified from public documentation, as exact label names vary by theme version. This tutorial notes that users should reference the labels shown in their own inspector.

✓ Verified

Save and Publish flow. Consistent with standard Visual Builder behavior documented across multiple UltraCart guides — changes must be saved and then published to go live.

📖

Official Referencehttps://www.ultracart.com/ways-to-sell/storefronts/visual-builder.html