Custom themes

This page is for themes other than Dawn and Horizon. Those two get some extra cart handling. On other themes, a few small steps keep the widgets in sync with your theme’s own cart and Ajax code.

Placing widgets

• App blocks go in any section that accepts app blocks, on the templates each block allows. See App embed and blocks.
• One-line tags go anywhere your theme code renders. Use them where a section takes no app blocks. See One-line tags.
• Product card recipes go in your card snippet. If your theme names the card’s product something other than card_product or product, edit the recipe’s andor_item line. See Product card recipes.

After an Ajax or Section Rendering swap

The widgets keep no references to elements, so new markup is handled by calling refresh() again. After your theme replaces product markup with Ajax or the Section Rendering API, call:

• window.AndOrDisplay.refresh() to re-price sale price hosts.
• window.AndOrWidgets.refresh() to re-run badge, countdown and offers sale windows.
• window.AndOrEvents.refresh() to fire mount and change events now.

Each one exists only on pages that load its file, so check for it before you call it. See JavaScript API.

Cart events the widgets listen to

Send Shopify’s standard theme events and the widgets redraw by themselves: shopify:cart:lines-update, shopify:cart:view, shopify:section:load and shopify:product:select. See Events for what each one triggers.

The loader also counts these as signs of a cart, and loads the cart scripts when it sees one:

• A submit of a form posting to /cart/add.
• A fetch or XHR to /cart/add, /cart/change, /cart/update or /cart/clear. AndOr only watches for these. It wraps nothing.

Cart drawer

Apps cannot place a block inside a cart drawer. AndOr fills the drawer when the theme says it opened: it listens on document for Shopify’s standard shopify:cart:view event with context set to "dialog". Horizon 4.0+ and Dawn 15.5+ send it. Older themes and many custom themes do not.

To get the goal bar copy (Also show in the cart drawer, or data-drawer on the tag) and the drawer claim rows on your theme:

• Dispatch shopify:cart:view when your drawer opens, with context: "dialog" on the event.
• Dispatch it from the drawer’s cart items element, and let it bubble. The bar is copied to the top of the element that sent the event.
• Send shopify:cart:lines-update after each cart change, so the copy stays in step with the cart.

Shopify documents both events in Standard storefront events. Horizon 4.0+ and Dawn 15.5+ load Shopify’s library that sends them.

If your theme sends neither event, the drawer shows no AndOr widgets. The page’s own widgets still work, and update on the next page load instead of the moment the cart changes.

Upsell adds and the reload fallback

• If your theme has Shopify.actions.updateCart, upsell adds use it, then call Shopify.actions.openCart() so your theme opens its cart.
• If it does not, or the shopper is on /cart, the item is posted to /cart/add.js and the page reloads.
• After a gift removal outside Dawn and Horizon drawers, the page reloads.

If your cart does not redraw after a gift add or removal, the merchant can turn on Reload the page after a gift is added or removed in the offer’s gift settings. See Cart updates.

Debugging

• Turn on Log AndOr display decisions to the browser console in the app embed while you test. Turn it off after.
• Check Widgets not showing for the common reasons a widget stays empty.