Documentation

Theme Compatibility

Anticipation Engine works with every Online Store 2.0 theme. Here's how it integrates with your cart page, cart drawer, and cart notifications.

Universal OS 2.0 support

Anticipation Engine is built on Shopify's native theme app extensions system. Any theme that supports Online Store 2.0 — which is every theme in the Shopify Theme Store and the vast majority of custom themes — works with AE out of the box. No code edits, no script tags, no Liquid file modifications.

AE covers every common cart implementation: dedicated cart pages, slide-out cart drawers, and cart notification popups.

Integration methods

Cart page block reveal-button.liquid

For themes with a dedicated cart page (the standard /cart route), AE adds a theme block you can position in Shopify's theme editor. Go to Online Store → Themes → Customize, navigate to your Cart page, and add the Reveal My Price block from the Apps section.

Position it directly above your checkout button for maximum visibility. The block inherits your theme's container width automatically.

Cart drawer & notification embed ae-embed.liquid

For themes that use a slide-out cart drawer or a cart notification popup (AJAX carts), AE uses a MutationObserver to detect when the drawer or notification opens and automatically injects the reveal button. No configuration needed — just enable the app embed in your theme settings.

The embed watches for DOM changes and activates only when a cart drawer or cart notification element appears, so there's zero performance impact on other pages.

Enabling the app embed

  1. Go to Online Store → Themes → Customize in your Shopify admin.
  2. Click App embeds in the left sidebar (the puzzle piece icon at the bottom).
  3. Toggle Anticipation Engine to enabled.
  4. For cart page themes, also add the Reveal My Price block to your Cart page template. Position it above the checkout button.
  5. Hit Save.

Both methods can be active simultaneously. If your theme has both a cart page and a cart drawer or notification, AE will show the reveal button in whichever one the shopper uses. It won't appear twice.

CSS and styling

AE ships with its own encapsulated styles that are designed to look clean on any theme. All AE elements use high-specificity CSS selectors and !important declarations where needed to prevent theme stylesheets from overriding critical display properties.

This is a deliberate architectural choice. Some themes aggressively apply display: none or other overrides to app-injected elements. AE's styling ensures the meter, buttons, and discount display always render correctly regardless of your theme's CSS.

The reveal button and meter are intentionally styled to stand out from your theme rather than blend in — the interactive element needs to catch the shopper's eye at the point of purchase.

Performance

AE loads asynchronously and only activates on the cart page or when a cart drawer or notification opens. It adds zero load time to your product pages, collections, homepage, or any other page on your store.

The cart drawer and notification embed uses a lightweight MutationObserver that watches for a single DOM change. When the cart UI isn't open, the observer's performance cost is negligible — well under 1ms per mutation check.

Troubleshooting

If the reveal button doesn't appear after enabling, check these common causes:

  1. App embed not toggled on. The block alone isn't enough for cart drawer or notification themes — the app embed must also be enabled in App embeds.
  2. Cart page vs. cart drawer mismatch. If your theme uses a cart drawer but you only added the cart page block, the button won't appear in the drawer. Enable the app embed to cover both.
  3. Theme caching. Some themes cache aggressively. Try a hard refresh (Ctrl+Shift+R) or open an incognito window after enabling.
  4. Cooldown active. If you've already played during testing, you may be in a cooldown period. Wait for the cooldown to expire or clear your cookies to reset.

If the issue persists, reach out to anticipationengine@gmail.com with your store URL and we'll take a look.

← The Crash Mechanic Dashboard & Analytics →