Skip to content

Shopify Liquid

Theme sections fed by a small proxy Worker, t.js in the theme, and the limits of this setup.

DocsGet started

Docs menuShopify Liquid

Liquid cannot call an API while a page renders, and a secret key must never sit in a theme. The Shopify set therefore has two parts, and it is honest about its limits.

  • A proxy Worker (proxy/): holds the key and returns published content as compact JSON, cached at the edge for a minute, with CORS only for your shop.
  • Theme files (sections/, snippets/, assets/): sections that read that JSON in the browser, and the t.js snippet.

Setup in three steps

  1. Proxy. npm install, then npm run dev with proxy/.dev.vars (filled in the downloaded set). To publish: npx wrangler secret put MANIFOLIO_PROJECT, npx wrangler secret put MANIFOLIO_KEY, set SHOP_ORIGINS, npm run deploy.
  2. Theme. Copy sections/manifolio-entries.liquid, sections/manifolio-entry.liquid, snippets/manifolio-tjs.liquid and assets/manifolio.js into your theme. Add the “Manifolio entries” section in the theme editor and paste the Worker URL.
  3. Analytics. In layout/theme.liquid, before </head>:
liquid
{% render 'manifolio-tjs', key: 'mf_pk_live_your_site_key' %}

The publishable key must list your storefront domain.

Limits

  • Entries render in the browser: search engines that do not run JavaScript will not see them. For SEO-critical content, sync it into Shopify metaobjects.
  • No visual editor: themes cannot load drafts from Manifolio.
  • A Shopify app proxy or theme app extension would remove the separate Worker; it is not part of this set.