store-check-in-tab

name	store-check-in-tab
description	Build Store Check-In embedded tabs that behave like kiosk-native surfaces through the Store Check-In bridge. Use when creating or updating custom tab UIs, quiz-like flows, carousels, or collection-style product experiences that need catalog data, product navigation, cart actions, or shared analytics.
compatibility	Requires JavaScript-only assets. If the tab calls Shopify directly with its own credentials, pin Shopify Storefront API usage to the latest version.
metadata	{"owner":"kiosk-store-checkin","storefront-api-version":"2026-04"}

Store Check-In Tab

Use this skill when a custom Store Check-In tab should behave like a first-class kiosk surface.

Workflow

1. Read the bridge contract before writing any tab code.
2. Start from the reference assets in assets/.
3. Keep authored runtime logic in .js files.
4. Prefer Store Check-In-owned bridge commands for catalog, product, cart, and analytics work.
5. Only call Shopify directly when the tab owns its own credentials. If you do, pin Storefront API usage to 2026-04.

Deliverables

• An HTML shell that loads the tab UI and a local .js file.
• A .js implementation that waits for kiosk.host.ready, requests data through the Store Check-In bridge, and renders an interactive surface.
• Bridge usage for:
  • kiosk.catalog.getProducts
  • kiosk.catalog.getProduct
  • kiosk.navigation.openProduct
  • kiosk.cart.addLines
  • kiosk.cart.open
  • kiosk.analytics.track
  • kiosk.activity
• Optional quiz-specific analytics via kiosk.quiz.completed.

Reference assets

• HTML shell: assets/reference-carousel.html
• JS implementation: assets/reference-carousel.js