Theme app blocks & embeds
Ayra’s storefront is delivered as one theme app extension: an app embed that loads the shared core bundle, and a set of app blocks that merchants place from the theme editor in any section that accepts app blocks (product, collection, cart, page, header and footer sections on Online Store 2.0 themes). Blocks render server-side Liquid for the first paint and hydrate from the core bundle only when they need customer state. Nothing is written to theme files; uninstalling removes every block.
The app embed: Ayra core
Section titled “The app embed: Ayra core”| Name in theme editor | Ayra (App embeds) |
| What it does | Loads the core bundle (≤ 15 KB gzipped) with defer, identifies the logged-in customer, exposes wallet state to blocks, emits DOM events, registers the web pixel |
| Settings | Position of the floating wallet launcher (off, bottom-left, bottom-right); accent colour override (defaults to the theme’s) |
| Required for | Any block that shows customer state; the account hub works without it |
Blocks
Section titled “Blocks”Status: live blocks ship with the modules in private beta; planned blocks arrive with their module.
| Block | Module | Status | Renders | Settings | Can be placed in |
|---|---|---|---|---|---|
| Points on this product | Loyalty | Live | “Earn N points” for the current variant, tier multiplier applied | Label text, show for guests (yes/no), icon | Product section |
| Wallet summary | Loyalty | Live | Balance, tier badge and link to the hub; a sign-in prompt for guests | Compact/full layout, show tier, show store credit | Header, cart, footer, page |
| How to earn | Loyalty | Live | The earn rules as a list, from the ayra_earn_rule metaobjects | Which rules to show, heading | Page, product |
| Tier ladder | Loyalty | Live | Tiers with thresholds and perks, the customer’s progress when signed in | Show perks, heading | Page, account page |
| Referral card | Referrals | Live | The customer’s link and code with share buttons; a sign-in prompt for guests | Heading, share channels, reward copy | Page, cart, order status (via account extension) |
| Lifecycle banner | Segmentation | Live | A message per lifecycle stage (welcome back, thank you, etc.) | One text per stage, show for guests | Header, page |
| Review list | Reviews | Planned | Reviews with media, filters and pagination | Per page, sort, show media, show verified only | Product section |
| Star rating | Reviews | Planned | Average and count from ayra.review_summary | Show count, size | Product, collection card |
| Review form | Reviews | Planned | Submit a review with photos | Require purchase, media upload | Product, page |
| Q&A | Reviews | Planned | Questions and answers with an ask form | Per page, show unanswered | Product section |
| Wishlist button | Wishlist | Planned | Add/remove for the current variant with the count | Icon style, show count | Product, collection card |
| Wishlist page | Wishlist | Planned | The customer’s list with price-drop markers | Columns, show price drops | Page |
| Back in stock button | Back in Stock | Planned | Register for a restock alert on sold-out variants | Channels offered, copy | Product section |
| Pre-order button | Pre-Order | Planned | Replaces add to cart for pre-order variants with ship date | Copy, show limit | Product section |
| Subscribe widget | Subscriptions | Planned | Selling plan picker with the save offers | Plan display, default plan | Product section |
Placement guidance
Section titled “Placement guidance”- Product page: Points on this product under the price, Star rating next to the title, Review list below the description. One block of each type per page.
- Collection cards: Star rating and Wishlist button are the only blocks designed for card density; both are planned.
- Header: Wallet summary in compact layout. It replaces the floating launcher if you prefer no floating element; turn the launcher off in the embed settings.
- Cart: Wallet summary (full) so the balance is visible before checkout, and the Referral card on empty carts.
- Account: The account hub is a customer account extension and does not use theme blocks; see Customer account extensions.
Styling
Section titled “Styling”Blocks inherit the theme’s fonts and colours through CSS custom properties and expose a short list of their own (--ayra-accent, --ayra-radius, --ayra-surface). Override them in the theme’s CSS on the block’s wrapper class (.ayra-block), not by editing the block. Every block has a data-ayra-block="<name>" attribute for targeting.
Related
Section titled “Related”- Storefront bundle & performance: what the embed loads and when.
- Metafields & metaobjects: for Liquid-only rendering without blocks.
- Per module: Loyalty storefront & account blocks
Something missing or wrong on this page? Ask us and we will fix the docs.