Theme developers

Style the widgets, paste one-line tags, listen to events and call the API.

New to the words we use? See Glossary.

Start here

• Developer overviewWhat a theme developer can change in the AndOr storefront widgets, and where the widgets get their data.
• App embed and blocksThe AndOr app embed, the nine app blocks, the templates each block allows, block ids and the theme editor links the app hands out.
• One-line tagsSeven one-line tags that put an AndOr widget anywhere in your theme, filled in by the app embed.

Build

• Product card recipesPasted Liquid recipes that show AndOr badges, sale prices and hints on product cards, where apps cannot add a block.
• Developer examplesShort Liquid examples that read the AndOr metafields, to start your own theme code from.
• Dawn recipesWhere blocks, tags and card recipes go on Dawn, and CSS that matches it.
• Horizon recipesProduct cards from blocks, the sale price tag and CSS that matches Horizon.
• Custom themesHow to run AndOr widgets on a theme that is not Dawn or Horizon, including Ajax redraws, cart events and the reload fallback.
• Measure your own widgetBuilt your own upsell widget?

Style

• Styling tokensThe --andor-* CSS custom properties that restyle every AndOr widget, how they chain, and which value wins.
• Style presetsThe five AndOr style presets, the tokens each one sets, and how to override a preset in CSS.

Reference

• Data attributes and statesThe data attributes and state classes every AndOr widget shares, with links to each widget's own.
• EventsEvery event the AndOr widgets dispatch and listen for, with payload types, pixel events and listening examples.
• JavaScript APIThe four public AndOr objects on window, refresh() after Ajax swaps and the gift chooser open() call.
• Cart updatesHow AndOr upsell adds and gift removals reach the cart and redraw it on Dawn, Horizon and custom themes.

Behavior

• Discount combinationsWhat the AndOr goal bar and volume table show when a product sale meets a spend or quantity discount, with worked numbers.
• PerformanceHow AndOr keeps storefront pages light, when its scripts load, and what works without JavaScript.
• AccessibilityThe roles, labels, keyboard support and live regions built into each AndOr widget, and what to keep when you restyle.