Skip to content
Contact sales
  • There are no suggestions because the search field is empty.

How to embed a flipbook on your Shopify store (and send orders to Shopify via Zapier)

Put your catalog on your Shopify store and route orders in automatically

Table of contents

Overview

Two ways to connect Flipsnack to Shopify. Zapier sends shopping list orders into Shopify automatically, and you can embed the flipbook itself on a store page.

Every trigger and action pairing is listed on the Flipsnack and Shopify page on Zapier.

Requirements

  • Business plan for the Zapier automation. Embedding works on any plan.
  • A published flipbook with a shopping list
  • Admin access to your Shopify store

Send orders to Shopify via Zapier

Connecting Flipsnack to Zapier is the same for every automation, so follow our Zapier setup guide and pick the New Shopping List Order event.

Then set up the Shopify half:

1. Choose Shopify as the Action app, then Create Draft Order.

2. Log in and authorize Zapier.

3. Map the order fields to the matching Shopify fields.

4. Click Test step, then Publish.

Tip: Start with Create Draft Order so you can fix any product or SKU mismatch before the order is final. Switch to Create Order once a few come through cleanly.

Embed the flipbook on your store

Get your embed code

Open your published flipbook, click Share, then the Embed tab, then Copy code. You get one iframe:

<iframe src="https://d3ms8mre5rhtvu.cloudfront.net?hash=YOUR-FLIPBOOK-HASH" 

width="100%" 
height="480" 
seamless="seamless" 
scrolling="no" 
frameBorder="0" 
allowFullScreen 
allow="autoplay; 
clipboard-read; 
clipboard-write">

</iframe>

Tip: The width is already set to 100%, so the flipbook stretches to fill whatever container it sits in. The height is a fixed pixel value, so that is the one number to change if the flipbook looks too short or too tall. Bump height="480" up to height="700" for a taller spread, and preview on a phone before you publish.

Method 1: Page editor (any theme)

Recommended. Works on every theme and survives theme updates.

1. Go to Content, then Pages, and open your page.

2. Click Show HTML in the toolbar, the angle brackets icon.

3. Paste the embed code and click Save.

4. Click View page. The flipbook only renders live, never inside the editor.

Method 2: Custom liquid (Online Store 2.0 themes)

Use this to place the flipbook as a section you can drag around.

Note: Custom liquid is just Shopify's box for pasting HTML. You will not write any Liquid.

1. Go to Online Store, then Themes, then Customize.

2. Click Add section and choose Custom liquid. Use Add block instead to place it inside an existing section.

3. Paste the embed code and click Save.

Note: No Custom liquid in the list? Look for Custom HTML or Custom code, since names vary by theme. Otherwise use Method 1. Never paste into theme.liquid, which controls every page on your store.

Troubleshooting

Orders are not reaching Shopify: check the flipbook products exist in your Shopify catalog, or use Create Draft Order and match them manually.

Flipbook does not appear: confirm it is published as public or unlisted, and check the live page rather than the editor.

Flipbook is too short or tall: change the height value in the iframe.

Embed code vanished after saving: Shopify's visual editor can strip markup. Paste last, save, and do not reopen the visual view.

Frequently asked questions

Will this create duplicate orders? No, one submission means one order.

Do I need the Shopify Buy Button app? No, this is a separate embed.

Can I embed on a product page? Yes, Show HTML is in the product description editor too.

Next steps

Need help setting up this integration?

Our team is here to help. Connect with our team experts via the in-app chat (#hs-chat-open) for personalized assistance!