Theme reference

Tanqory themes are React applications built on @tanqory/theme-kit — sections are React components registered with defineSection, pages are JSON templates, and storefront data arrives through typed APIs instead of a proprietary template language.

That changes how the two classic theme-reference categories map onto Tanqory:

Classic concept	In a Tanqory theme
Objects (template globals like product, cart, shop)	Typed data from the Objects API — useData(), useCart(), and friends
Filters (pipe transforms like money, date, image_url)	Plain helper functions — formatMoney(), formatDate(), imageUrl() …
Tags / control flow (if, for, paginate)	Ordinary JavaScript/JSX — condition ? … : …, .map(), cursor pagination
{% schema %}	The attributes object passed to defineSection (drives the editor settings panel)

Getting data in a section

import { defineSection, useData, useCart, useSettings, useT, formatMoney } from '@tanqory/theme-kit'

function FeaturedProduct({ attributes }: SectionProps) {
  const data = useData()
  const cart = useCart()
  const t = useT()
  const [product, setProduct] = useState<Product | null>(null)

  useEffect(() => {
    data.productByHandle(attributes.product).then(setProduct)
  }, [attributes.product])

  if (!product) return null
  return (
    <div>
      <h2>{product.title}</h2>
      <span>{formatMoney(product.price)}</span>
      <button onClick={() => cart.add(product.variantId, 1)}>{t('add_to_cart')}</button>
    </div>
  )
}

export default defineSection({
  name: 'featured-product',
  title: 'Featured product',
  attributes: {
    product: { type: 'product', label: 'Product' },
  },
  component: FeaturedProduct,
})

The hooks

Hook	Returns
useData()	The full DataApi — every storefront object
useCart()	Live cart state + mutations (add, updateQuantity, remove, applyDiscountCodes, …)
useSettings()	Global theme settings values (from defineSettings)
useT()	Translation function t(key) for the theme's locale files
useResourceContext() / useBound()	Resolve dynamic-source bindings ({ '@source': 'product.metafields.custom.subtitle' })

Continue to:

• Objects — every data object a theme can read
• Helpers (filters) — formatting utilities and their classic-filter equivalents