Commerce blocks — products & collections on pages

FlexiBlocks includes Shopify commerce blocks you can insert into blog posts, pages, product descriptions, collection descriptions, and reusable library entries.

Install on Shopify

Blocks in the editor

Block	Purpose
Product card	Single product highlight
Product cards	Hand-picked products in a grid
Buy button	Add-to-cart for a variant
Collection grid	Products from a collection
Collection button	Link or CTA to a collection (often paired with a grid)

While editing, the app loads catalog data through the Admin API so pickers and previews stay accurate.

Product card or collection grid in the FlexiBlocks editor — A product card or collection grid in the editor, with the picker open.

On the live storefront

Commerce blocks need the FlexiBlocks theme app embed enabled. On page load, storefront JavaScript hydrates saved HTML — for example refreshing product cards and wiring buy-button forms to /cart/add.

With embed ON	With embed OFF
Live product data and interactive cart where supported	Saved static HTML fallback from the last save — layout may look simplified

After you change products, collections, or prices in Shopify Admin, re-save the page (or reusable library entry that contains commerce blocks) if you rely on stored HTML snapshots. Shoppers still get fresh catalog data on page load when hydration runs.

Reusable blocks tip

To show the same product row on many pages, build commerce blocks once in a reusable library entry, insert the reference on each page, and update the library entry when the layout changes. See Reusable blocks.

Theme notes

Wrap saved HTML in .ecom-gutenberg-content on the same element as the body output when possible.
Collection templates: enable the app embed on the collection template so collection descriptions hydrate; some themes use a dedicated section or the optional Collection description app block.
Test add to cart on your live theme after placing buy-button blocks.

Agencies: Theme integration · Storefront: Storefront embed.