Storefront embed — FlexiBlocks on your theme
Saved body HTML appears on your storefront through your theme templates. The FlexiBlocks theme app embed loads JavaScript and CSS so block layouts and commerce blocks behave like they do in the editor.
Enable the embed
Section titled “Enable the embed”- Online Store → Themes → Customize
- Open App embeds
- Enable FlexiBlocks
You can also use Settings → Storefront in the app for a theme-editor deep link.
Enable the embed on templates that show FlexiBlocks content — typically article, page, product, collection, and any metaobject templates you use.
What the embed does
Section titled “What the embed does”- Finds saved HTML inside content roots (always includes
.ecom-gutenberg-content, plus optional extra selectors from Settings → General → Storefront content selectors) - Hydrates interactive and layout blocks, including:
- Columns, spacers, responsive layout CSS from save
- YouTube / Vimeo embeds
- Accordion and tabs
- Gallery gap styles
- Commerce blocks (product cards, collection grid, buy button) via storefront JavaScript and the app proxy where needed
- Sets
data-ecom-gutenberg-hydrated="true"on hydrated roots when complete
If the embed is off, static HTML from the last save still renders, but columns may stack, embeds may show as links, and commerce blocks may not update live catalog data.
Collection descriptions
Section titled “Collection descriptions”On collection templates, output {{ collection.description }} (or your theme’s equivalent) inside .ecom-gutenberg-content. The embed also supports collection-template resource hints for responsive CSS. Themes without a description section can use the optional Collection description app block from the FlexiBlocks extension.
Verify on the storefront
Section titled “Verify on the storefront”- Save content that uses columns, a video embed, or a commerce block.
- Hard-refresh the live page (private window helps).
- In devtools, confirm the content root has
data-ecom-gutenberg-hydrated="true"after load.
Troubleshooting
Section titled “Troubleshooting”| Issue | What to try |
|---|---|
| Columns stack | Enable app embed; re-save content |
| No hydration | Put .ecom-gutenberg-content on the same element as body HTML in Liquid |
| Commerce stale | Re-save the page; confirm embed ON and active subscription |
| Stale responsive layout | Re-save in FlexiBlocks to regenerate responsive CSS |
More: Troubleshooting · Commerce blocks · Theme integration.