SDK recipes

Short, copy-paste recipes for the things you’ll build with the Storefront SDK. All assume an initialized client:

const stoq = await init({
  shop: 'my-store.myshopify.com',
  storefrontToken: '...', // public Storefront API token
})

Show the right control for a variant

Ask the SDK about a variant and branch on its state:

const state = await stoq.getVariantState(variantId)

if (state.isPreorder) {
  // offer a preorder button
} else if (!state.availableForSale) {
  // out of stock → offer notify-me
} else {
  // in stock → normal add-to-cart
}

Add a notify-me (back-in-stock) form

// Drop the modal in on click…
stoq.openModal(variantId)

// …or render an inline form into your own element:
stoq.openInlineForm(variantId, { target: '#notify-me' })

// Submit a signup yourself:
await stoq.createSignup({ variantId, email: 'shopper@example.com' })

Add a preorder button + cart line

// A ready-made preorder button for a variant:
const button = stoq.preorderButtonFor(variantId)

// Or build your own and add the cart line with the selling plan attached:
const line = await stoq.cartLineFor(variantId, 1)
// → pass `line` to the Storefront Cart API (cartLinesAdd)

React / Hydrogen

Hooks live under the /react entry — see the headless guide for useStoqVariant, useStoqCartLine, useStoqPreorder, the <StoqPreorderButton> / <StoqNotifyMeButton> components, and toCartFormInput (builds the /cart action payload when you add from a callback).

Note

Already have the variant from your own product query? Pass it to skip the lookup: stoq.getVariantState({ id, availableForSale, currentlyNotInStock }).