CMS integration
Shopify Storyblok integration
Editing with preview. The store stays the store.
For teams that want to build landing pages themselves and see how the page looks while doing it, without development work for every campaign.
When the combination is worth it
The most common trigger for Storyblok is not the content model but the way of working: editors want to assemble pages and see what they are creating while they do it. The visual editor with live preview is the actual reason for the decision, not the interface underneath it.
For Shopify that means a clear split: Storyblok supplies blocks and pages, Shopify supplies catalog, prices and checkout. Products are referenced in the editor, not described. As long as that boundary holds, the combination is stable and noticeably faster for marketing than the store back end.
Which objects run in which direction
Content flows into the frontend, product data comes from Shopify. Transactional objects are left untouched.
| Object | Direction | Leading system | Note |
|---|---|---|---|
| Content | → Shopify | Storyblok | Pages and reusable blocks, per language and market. |
| Media | → Shopify | Storyblok | Images and videos from the media library of the CMS. |
| Products | Shopify → | Shopify | Only as a reference: in the editor a Shopify product is selected. |
| Prices | no sync | — | Prices stay entirely in Shopify. |
| Inventory | no sync | — | Inventory is not a content topic. |
| Orders | no sync | — | Orders bypass the CMS. |
Which integration pattern holds up
Content blocks in the Shopify theme
Shopify stays the storefront, and individual page types pull their content from Storyblok. The quickest route when only landing pages and campaigns are affected and product pages stay as they are.
A storefront of your own with preview
The storefront is built separately, Storyblok supplies content including live preview, Shopify supplies catalog and checkout. This is where the visual editor shows its full strength, with a frontend of your own as the price.
Publishing instead of live requests
Write content into Shopify at approval time instead of loading it on every view. That keeps load times stable and makes the storefront independent of the availability of the CMS.
Common pitfalls
Preview without a real frontend
The live preview is only as good as the components behind it. If Storyblok blocks and Shopify sections look different, editors see something other than the customer does, and trust in the tool disappears quickly.
Blocks without limits
A kit without rules produces pages that can do everything and say nothing. A few clearly defined blocks with fixed variants keep design and load time under control, and they can be extended later.
SEO fields without an owner
If nobody decides whether title and description come from the CMS or from Shopify, you end up with empty or duplicate entries. That ownership belongs in the model, not in a verbal agreement.
FAQ
Frequently asked questions
Do I have to give up my theme for Storyblok?
No. Selected page types can draw their content from Storyblok while the rest of the store stays unchanged. A separate storefront only becomes necessary once the full live preview is required across every page, not just on landing pages and campaigns.
How are products used in content?
Through a product picker in the editor that points to a Shopify product. Price, availability and product texts come from Shopify at runtime. That way exactly one source for product data remains in place, and nothing has to be copied into the content by hand.
Does the page stay fast?
If content is transferred to Shopify on approval or held in a cache, yes. A live request on every page view, by contrast, costs measurable time and makes the storefront dependent on a second system being reachable at that moment.
How many blocks do we need?
Fewer than you think. Five to ten well defined blocks with fixed variants cover most campaign pages. Every additional block increases the maintenance effort and the risk that pages start drifting apart from each other. A small set can still be extended later.
What about multiple languages?
Storyblok can hold content per language, and Shopify translates product data. What matters is a clean mapping from CMS language to Shopify market, including hreflang. Without it, the campaign page follows a different language logic than the rest of the store.
Keep reading
Related integrations
Next step
Not sure which pattern carries your setup?
A 30-minute intro call. We look at your systems, ask which data belongs where and give you a clear assessment before anything gets built.
Free and non-binding · 30 min.