How to Embed a Flipbook in Your Shopify Store

Static product images only tell part of the story. If you run a Shopify store and want to showcase product catalogs, lookbooks, size guides, or brand magazines in a more engaging format, embedding an interactive flipbook is one of the most effective ways to do it. Visitors can flip through pages just like a real book — right inside your store, without leaving the page.

This guide walks you through embedding a FlipLink flipbook in Shopify, from generating the embed code to placing it on product pages and custom landing pages.

Why Use Flipbooks on Shopify

Shopify gives you powerful tools for selling products, but its native content options are limited when it comes to multi-page visual content. Here's where flipbooks fill the gap:

• Product Catalogs — Let customers browse your full catalog with page-flip animations instead of scrolling through static grids
• Lookbooks — Fashion, furniture, and lifestyle brands can present seasonal collections as immersive digital lookbooks
• Size Guides — Replace clunky PDF downloads with an embedded, interactive size chart customers can flip through on the product page
• Brand Magazines — Share brand stories, behind-the-scenes content, or editorial features directly in your store
• Wholesale Price Lists — Give B2B buyers an elegant way to browse pricing without a separate portal

Flipbooks keep visitors engaged longer, reduce bounce rates, and present your products in a format that feels premium.

Step 1: Create Your Flipbook

Before you can embed anything, you need a flipbook. If you haven't created one yet:

1. Sign up at go.fliplink.me
2. Upload your PDF — a product catalog, lookbook, or any multi-page document
3. FlipLink automatically converts it into an interactive flipbook with realistic 3D page-flip animations
4. Customize the appearance, add CTA buttons linking to your Shopify products, and configure sharing settings

Once your flipbook is published, you're ready to grab the embed code.

Step 2: Get the Embed Code

FlipLink provides a standard iframe embed code for every published flipbook:

1. Open your flipbook in the FlipLink dashboard
2. Click the Share button
3. Select the Embed tab
4. Copy the iframe code

The embed code looks something like this:

<iframe
  src="https://go.fliplink.me/view/your-flipbook-id"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
></iframe>

You can adjust the height value depending on your Shopify theme layout. For most themes, a height between 500 and 700 pixels works well.

For a deeper dive into iframe embedding options, check out our guide on how to embed a flipbook with iframe.

Step 3: Embed on a Shopify Product Page

Adding a flipbook to a specific product page is a great way to replace or supplement a static size guide or product spec sheet.

Using the Shopify Theme Editor

1. Go to Online Store → Themes in your Shopify admin
2. Click Customize on your active theme
3. Navigate to the product page template
4. Add a new section — choose Custom Liquid (or Custom HTML depending on your theme)
5. Paste the iframe embed code into the code field
6. Position the section where you want the flipbook to appear (below the product description is a common choice)
7. Click Save

Using Metafields for Dynamic Embedding

If you want different flipbooks on different product pages, use Shopify metafields:

1. Create a product metafield called flipbook_url (type: URL)
2. For each product, paste the flipbook embed URL into the metafield
3. In your Custom Liquid section, use:

{% if product.metafields.custom.flipbook_url %}
<div class="flipbook-embed">
  <iframe
    src="{{ product.metafields.custom.flipbook_url }}"
    width="100%"
    height="600"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>
{% endif %}

This approach keeps your theme clean and lets you manage flipbooks per product without editing theme code each time.

Step 4: Embed on a Custom Shopify Page

For standalone pages like a catalog landing page or a brand magazine section:

1. Go to Online Store → Pages in Shopify admin
2. Create a new page or edit an existing one
3. In the page editor, click the Show HTML button (the <> icon)
4. Paste the iframe embed code directly into the HTML
5. Switch back to the visual editor to confirm it looks correct
6. Save the page

You can also use the theme editor to add a Custom Liquid section to any page template, giving you more control over placement and styling.

Step 5: Make It Responsive

Shopify themes vary widely, and you want your flipbook to look great on both desktop and mobile. Wrap the iframe in a responsive container:

<div style="position: relative; width: 100%; padding-bottom: 75%; height: 0; overflow: hidden;">
  <iframe
    src="https://go.fliplink.me/view/your-flipbook-id"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

The padding-bottom: 75% creates a 4:3 aspect ratio. Adjust this value to match your flipbook's page dimensions:

• 4:3 ratio (landscape): padding-bottom: 75%
• 16:9 ratio (wide): padding-bottom: 56.25%
• 3:4 ratio (portrait): padding-bottom: 133%

This ensures the flipbook scales properly across all screen sizes without awkward scrollbars or cut-off content.

Step 6: Add CTA Buttons Linking to Products

One of the most powerful features for Shopify stores is adding CTA buttons inside your flipbook that link directly to product pages. This turns your catalog from a passive viewing experience into an active shopping tool.

In the FlipLink editor:

1. Open your flipbook for editing
2. Select a page where you want to add a call-to-action
3. Add a CTA button with the text like "Shop Now" or "View Product"
4. Set the link to your Shopify product URL (e.g., https://yourstore.myshopify.com/products/product-handle)
5. Repeat for each product featured in the catalog

When customers browse your embedded flipbook and see something they like, one click takes them straight to the product page to add it to their cart. This dramatically shortens the path from discovery to purchase.

Step 7: Set Up Domain Whitelisting

If you want to restrict where your flipbook can be embedded — for example, only on your Shopify store and nowhere else — use domain whitelisting.

1. In your FlipLink dashboard, open the flipbook settings
2. Navigate to the domain whitelisting section
3. Add your Shopify domain (e.g., yourstore.com and yourstore.myshopify.com)
4. Save the settings

This prevents competitors or unauthorized sites from embedding your flipbook content. It's especially important for wholesale catalogs or exclusive lookbooks that you don't want publicly accessible outside your store.

Tips for Shopify Flipbook Success

Optimize your PDF before uploading. Compress images in your source PDF to keep file sizes manageable. Lighter flipbooks load faster, which matters for mobile shoppers on slower connections.

Use descriptive page titles. FlipLink's table of contents pulls from your PDF structure. Well-organized chapters help customers jump to specific product categories quickly.

Test across devices. Preview your embedded flipbook on desktop, tablet, and mobile before publishing. Shopify's responsive themes handle most cases, but verify the responsive wrapper works with your specific theme.

Track engagement. FlipLink analytics show you which pages get the most views and how long visitors spend on each spread. Use this data to understand which products or sections resonate with your audience and adjust your catalog layout accordingly.

Keep content fresh. Update your flipbook when you add new products or run seasonal promotions. The embed code stays the same — just update the flipbook in your FlipLink dashboard and the changes appear instantly on your Shopify store. No need to touch your theme code again.

Link flipbooks from email campaigns. Beyond embedding in your store, share direct links to your flipbook catalogs in marketing emails and social media posts. FlipLink's sharing and distribution options make it easy to drive traffic from multiple channels back to your Shopify store.

For more on embedding PDFs and flipbooks on websites in general, see our guide on how to embed a PDF on a website. If you're building a product catalog from scratch, check out how to create a digital product catalog.

Start Embedding Flipbooks in Your Shopify Store

Embedding a flipbook in Shopify takes just a few minutes and transforms how customers interact with your product content. Whether it's a seasonal lookbook, a comprehensive product catalog, or a simple size guide, interactive flipbooks create a shopping experience that static images and PDFs simply cannot match.

Create your free flipbook and embed it in your Shopify store today. Check out our pricing to see how FlipLink fits your business.