Theme integration — agencies & developers

This page is for agencies and developers wiring FlexiBlocks into custom themes. Merchants can usually enable the global app embed alone — see Storefront.

---

Online Store 2.0 and vintage themes

FlexiBlocks works with Online Store 2.0 themes and many vintage themes via the global theme app embed. Templates should output saved HTML body fields where customers expect content:

Resource	Typical Liquid
Article	Article body / content
Page	{{ page.content }}
Product	{{ product.description }} (or theme section)
Collection	{{ collection.description }}
Metaobject	Mapped multi_line_text_field value (raw HTML, not metafield_tag JSON)

---

Content root class

Add class ecom-gutenberg-content on the element that wraps saved HTML — ideally the same element that contains the Liquid output above. Splitting an outer wrapper and inner rte container can create double hydration roots; prefer one element with the class.

The embed always includes .ecom-gutenberg-content. Merchants can add extra CSS selectors under Settings → General → Storefront content selectors (Editor presets section).

---

Commerce blocks

Commerce blocks (shopify/product-card, shopify/product-cards, shopify/buy-button, shopify/collection-grid, shopify/collection-button) rely on the embed for live hydration and cart behavior. Test add-to-cart and collection grids on the live theme.

Storefront catalog reads use the app proxy at /apps/ecom-gutenberg/… (signed Shopify proxy requests). See Commerce blocks.

---

OAuth scopes

The app requests content, product (descriptions), and metaobject scopes — see Privacy policy for the full table. It does not request orders, customers, or payment data.

---

Stack

• Shopify Admin API — load/save in the app
• Cloudflare Workers — app hosting + app proxy
• Theme app extension — gutenberg-storefront.js, preset CSS, optional app blocks

For integration questions, email support@k2.digital.