Theme app extension overview

The cart drawer is delivered through a Shopify Theme App Extension.

How it works

Once the Oxify: Cart Upsell & Gift app embed is on in your theme, its script loads on your storefront pages and sets up the drawer (hidden until it is opened). It recognizes your theme's add-to-cart buttons and cart icon by CSS selector and intercepts their clicks:

• Add to cart — it cancels the button's normal action (such as submitting the form or going to the cart page), adds the product through Shopify's cart, and opens the Oxify cart drawer. The drawer opens after add-to-cart when Open cart drawer on add to cart is on, which it is by default.
• Cart icon — it opens the Oxify drawer instead of the cart page or your theme's own cart.

It also removes your theme's built-in cart drawer when it recognizes it (and keeps checking, since some themes rebuild it), and it refreshes the drawer when another app changes the cart. If your theme's buttons aren't recognized, add custom selectors under Home → Cart Drawer → Settings → Show Advance Settings (see Custom theme selectors).

What it includes

• App embeds — turned on under App embeds in the theme editor:
  • Oxify: Cart Upsell & Gift — the cart drawer, plus the Sticky Add to Cart Bar, the Floating Cart Button and the data that Product List widgets need.
  • Oxify: Product Upsell — product-page offers (Frequently Bought Together, Cross-sell, Product Add-ons).
• App blocks — optional, added to a section in the theme editor: Oxify: Bought Together, Oxify: Cross-sell and Oxify: Product Add-ons (to place a product-page offer where you want it), and Oxify: Product List (to show a Product List Widget; paste its Widget ID).

Why theme app extensions

• No theme code edits — Turn on one app embed, no Liquid changes. Oxify can read your theme (for example, to check that the embed is on) but has no permission to edit your theme files. Two optional features need a small change in your theme's code, which you make yourself: the add-on price updater and collection-based volume discounts.
• Not stored in your theme — The drawer's code comes from the Oxify app rather than your theme's files, so when you switch themes you turn the embed back on instead of re-installing anything.
• Reversible — Turn the embed off and the drawer stops loading, so your theme's own cart behaves as before.

Per-theme

The extension is enabled per theme, so you can run it on production while your dev theme stays untouched (or vice versa). Oxify's own screens (the Active badge on Home, the inactive banner in the Cart Editor) only check your published theme.

Compatibility

The extension needs a theme that supports Shopify theme app extensions. Because it finds your theme's buttons and cart icon by CSS selector, themes with unusual markup may need custom selectors.