Help centre

How to create a flipbook from a PDF

Upload a PDF on the Catalogs page, place your buttons in the editor, then share or embed the link.

CatalogZine turns a PDF into a page-flip book at a public link. Everything starts on the Catalogs page in your Shopify admin.

1. Name the PDF file before you upload it. The catalog takes its name from the filename, and that same name is used for the storefront page if you press Embed later. A catalog cannot be renamed in the app, so changing it means uploading the file again under a better name.
2. Open CatalogZine and go to Catalogs.
3. Press Upload PDF at the top of the page, or drag the file onto the drop zone under Add a catalog.
4. Wait for the upload progress to finish. The hotspot editor opens fullscreen on its own.
5. Pick what you want to place in the toolbar palette: Add to cart, Product hotspot, YouTube video, Image or Link. The palette is icons only — hover one to read its name. Then click the page to drop one, or drag to draw it at the size you want.
6. Press Save. Preview saves first, then opens the real flipbook in a new tab.

Close the editor and you are back on the catalog list. Copy link gives you the share URL, which looks like https://catalogzine.com/book/cat_6l1b1vwawte27zeaiykvdcom. Embed puts the book on your online store — see How to add a flipbook to a store page.

An element's type is fixed once it is placed. To change a button into a video, remove it and draw a new one.

How to create a flipbook from images

The app reads PDFs only. Combine your images into one PDF on macOS or Windows, then upload that.

CatalogZine reads PDFs. There is no image upload. Combine your JPEGs or PNGs into a single PDF first, then upload that file — macOS and Windows both do this without extra software.

If the catalog is really a list of products you sell, having it generated from your Shopify products is less work than assembling images by hand.

Whichever route you take, rename the files so they sort in reading order first: 01.jpg, 02.jpg, 03.jpg and so on. The order they are sorted in is the order they are combined in.

macOS

1. Select all the images in Finder.
2. Right-click, then choose Quick Actions › Create PDF.
3. Rename the PDF that appears next to them — that name becomes the catalog name.

Preview works too: open the images, select every thumbnail in the sidebar, then File › Print and choose Save as PDF from the PDF menu at the bottom left.

Windows

1. Select the images in File Explorer, right-click, then choose Print.
2. Set Printer to Microsoft Print to PDF.
3. Choose Full page photo from the layout list on the right — that is one picture per page. Untick Fit picture to frame if you would rather not have the edges cropped, then press Print and save the file.

One image per page, please — a picture of a two-page spread is read as a single page and lands next to the wrong neighbour when the book opens in double-page mode. Portrait images at around 150 dpi are plenty for screen. A PDF built from pictures carries no text, so the reader's search finds nothing printed inside them. Then upload the PDF as in How to create a flipbook from a PDF.

Don’t have a PDF catalog yet? Two ways to make one

Have Catalog Maker build one from your Shopify products, or lay it out yourself in Canva, Slides or InDesign.

CatalogZine starts from a PDF you supply — it does not build one. There are two practical ways to get one, and the first is far quicker when the catalog is made of products you already sell.

1. Build it from your Shopify products

How to create a catalog from products or a collection walks the whole round trip, from a collection to a flipbook with working Add to cart buttons.

2. Lay it out yourself

Canva, Google Slides, Adobe InDesign and Affinity Publisher all export PDFs. Canva and Google Slides are the quickest if you have never laid out a page before; both have multi-page templates you can drop product photos into. Set the document to portrait, keep one catalog page per document page, and export at the end — the settings that matter are in How to generate a PDF catalog.

Pictures you already have work too. Product shots, a supplier's line sheet, or scans of a printed catalog can be combined into a PDF on your own computer in a couple of minutes: see How to create a flipbook from images.

However you get there, the layout is yours. CatalogZine adds nothing to your pages — no cover, no contents, no ordering or contact page. If you want those, put them in the PDF. A working contents page is possible once it is uploaded: draw a Link element over each entry, set Links to to Another page in this catalog, and choose the page it jumps to.

How to add a flipbook to a store page

Press Embed to have the app make the page, or add the Catalog flipbook block to a page you already have.

There are two routes. Use Embed if the book needs a page of its own; use the theme block if it belongs on a page you already have.

Let the app make the page

On Catalogs, press Embed in the catalog's row. The app creates a published page on your online store with the book in it, and the dialog gives you View page and Edit in Shopify. Pressing Embed again later reuses that same page — it never makes a second one — so any copy you have written around the book is safe.

Put it on a page you already have

1. In CatalogZine, press Copy link in the catalog's row. The block takes that whole share link, or just the ID at the end of it — cat_6l1b1vwawte27zeaiykvdcom.
2. Go to Online Store › Themes › Customize.
3. Choose the page from the template menu at the top of the editor.
4. Press Add block, open Apps, and pick Catalog flipbook. Some themes list it under Add section › Apps instead.
5. Paste the link, or the ID, into Catalog ID or link.
6. Set Heading, Shape on desktop, Maximum width, Space above and below, Corner radius and Background to taste, then Save.

Leave Load only when scrolled into view on unless the catalog is the first thing on the page. On a phone, and in a narrow column, the book is always portrait so a single page fills it, whatever shape you picked.

How to add a flipbook to a product or collection page

Add the Catalog flipbook app block to your product or collection template, or use Custom Liquid as a fallback.

Product and collection pages take the same theme block as any other page. You add it to the template, so it appears on every product or every collection that uses that template.

1. In CatalogZine, press Copy link on the catalog. The block takes the share link, or the cat_ ID at the end of it.
2. Go to Online Store › Themes › Customize.
3. From the template menu at the top, choose Products › Default product, or Collections › Default collection.
4. Press Add block in the section where you want the book, open Apps, and pick Catalog flipbook.
5. Paste the link, or the ID, into Catalog ID or link, then drag the block up or down to position it.
6. Press Save.

If only some products should show it, make a second product template — from the template menu in the theme editor, or in Online Store › Themes › Edit code — add the block to that one, and assign it to those products in the product's Theme template setting.

If you would rather not give the book space on the page, turn on the Catalog launcher app embed under App embeds in the theme editor and paste the same link or ID into its Catalog ID or link box — nothing renders until that box holds a catalog. It adds a floating button that opens the book in a lightbox. You can turn Show the floating button off and open the lightbox from your own button instead by adding data-catalogzine-open to it.

How to create a catalog from products or a collection

CatalogZine does not build the PDF — Catalog Maker does. Here is the round trip from a collection to a shoppable flipbook.

CatalogZine does not generate a catalog from your products; it starts from a PDF. The app that does generate one is Catalog Maker by EasyCatalog, by the same team — and the two together take you from a collection to a flipbook customers can buy from.

The round trip

1. In Catalog Maker, choose the collection or the products you want, and export the catalog as a PDF.
2. Upload that PDF on the Catalogs page here, as in How to create a flipbook from a PDF.
3. In the editor, place an Add to cart element over each product. In the sidebar, search by product title, pick the product from the results, and if it has more than one variant choose the right one from the Variant list.
4. Press Save, then Copy link to share it or Embed to put it on your store.

Linking is the fast part. The search reads your live catalogue, so a title you half-remember is enough — it lists the first 15 matches, so a narrow word beats a broad one — and the price comes across with the product. Add to cart takes a shopper straight to checkout with that variant in the bag, in a new tab; use Product hotspot instead when they should land on the product page and choose for themselves.

If you would rather lay it out by hand

Export your product list from the Shopify admin — Products, filter to the collection you want, then Export as CSV — and work from that in Canva, Google Slides, InDesign or Affinity Publisher, pulling images from Content › Files. How to generate a PDF catalog has the export settings that matter.

How to generate a PDF catalog

Have Catalog Maker generate it, or export your own: single pages, portrait, 150 dpi, under 150 MB.

There are two answers, depending on where the catalog comes from.

Have it generated from your products

Or export one from a design tool

If you laid the catalog out yourself, a handful of export settings decide whether the flipbook reads well.

Where the export lives

• Canva — Share › Download › PDF Standard. Leave Flatten PDF off: it turns your text into a picture, and the flipbook's search reads the text in the PDF.
• Google Slides — File › Download › PDF document (.pdf). There is no portrait preset, so set the size first in File › Page setup › Custom, taller than it is wide.
• InDesign — File › Export › Adobe PDF, with Pages selected rather than Spreads.
• Affinity Publisher — File › Export › PDF, with Area set to All Pages rather than All Spreads.

If the file is too big

On macOS, open it in Preview and use File › Export with the Reduce File Size Quartz filter. In Acrobat, use Compress a PDF, or File › Save as Other › Reduced Size PDF in older versions. Smallpdf and similar web tools do the same job in a browser. Check a page of small type afterwards — heavy compression softens text before it softens photographs.

How to customize the flipbook viewer

One settings page controls every catalog in your shop: background, toolbar buttons, page turn and wording.

Open Flipbook settings in the CatalogZine navigation. There is one settings document per shop, so what you change here applies to every catalog you have uploaded and every one you upload later. There is no per-catalog styling.

1. Pick a tab: Appearance, The book, Toolbar, Reading, Sharing, Wording or Advanced. The number beside a tab counts the settings on it that differ from the shipped default.
2. Change a setting and watch the preview beside the form.
3. Press Save in the bar that appears at the top. Discard puts everything back.

What each tab holds:

• Appearance — what sits behind the book, which is either transparent or a solid colour; a background image, which covers that colour if you add one; your logo and the address it links to; the viewer height; and the space around the pages.
• The book — book style, one page or two, reading direction, the 3D page turn, cover and shadow, and page turn speed (700ms by default).
• Toolbar — every reader button gets one of three places: On the toolbar, In the More menu or Hidden. Download the PDF and Print start Hidden; Search, Contents, Thumbnails, zoom, full screen and the page number start on the toolbar. You can also move the toolbar above the book or hide it, and set the page-turn sound.
• Reading — what clicking a page, the arrow keys and the mouse wheel do, the zoom step, and whether the catalog turns its own pages.
• Sharing — the share button, and which networks it offers.
• Wording — every word the viewer says, in your wording or another language.
• Advanced — picture quality, and putting everything back the way it shipped.

How to turn off the page flip sound

It is already off. Where the setting lives, and the sound button readers get in the More menu.

It is already off. Page turns are silent on a new shop, and stay silent until someone changes the setting.

The setting is in Flipbook settings › Toolbar tab, at the bottom, called Page-turn sound. It has three values:

• Silent, with a sound button in the More menu — the default. No audio, and a reader who wants it can switch it on for themselves.
• Silent, with no sound button — no audio and no button at all.
• Page-turn sound on, with a button to mute it — audio from the first turn, and a button to stop it.

The reader's own control is in the toolbar's More menu. Pressing it changes what that one reader hears for that visit; it does not change your setting and nobody else is affected.

How to add links, videos, and hotspots to flipbook pages

Place add-to-cart buttons, product hotspots, videos, images and links on any page in the hotspot editor.

Everything tappable is placed in the hotspot editor. On Catalogs, click a catalog's name or its Edit button; the editor fills the admin window.

1. Pick the page in the thumbnail rail on the left, or use Previous and Next under the page.
2. In the palette at the top, pick what to place. The five icons are, on hover: Add to cart, Product hotspot, YouTube video, Image and Link. The choice stays until you change it, so placing several of the same thing is quick.
3. Click the page to drop one, or drag to draw it at the size you want. A selected element has eight handles for resizing.
4. Set it up in the sidebar on the right.
5. Press Save, then Preview to open the real flipbook in a new tab.

Add to cart, Product hotspot and Link draw a button. In the sidebar you set its style (Solid, Outline, Soft, Icon only or Invisible), shape (Rounded, Pill, Square or Circle), colour, icon and text up to 40 characters. Invisible paints nothing: a transparent tap target to put over a button already printed in your artwork. Every element can also carry an animation — pulse, ping, glow, bounce, wiggle or fade — playing always or only on hover. Readers who have asked their device for reduced motion see none of it.

Keyboard: Cmd/Ctrl+D duplicates the selected element, Escape clears the selection, + - 0 and Ctrl/Cmd+wheel zoom. The editor opens at 50% and goes to 400%.

Catalog extra pages: welcome, about, ordering, contents

Welcome and ordering pages go in your own PDF. Here is how to make a contents page clickable.

CatalogZine does not add pages to a catalog. A welcome page, an about page, ordering information and a contents page are pages you put in the PDF yourself, in whatever you used to make it, before you upload. The flipbook shows the file you gave it and nothing else.

What the app adds is the clicking. Turn a printed contents page into a working one like this:

1. Open the catalog on Catalogs and go to the contents page.
2. Pick Link in the palette and drag a box over the first contents line.
3. In the sidebar, set Links to to Another page in this catalog and choose the page from the list.
4. Set the button style to Invisible. It paints nothing, so your printed line shows through and only the tap target is added.
5. Press Cmd/Ctrl+D to duplicate it for the next line, drag the copy into place, and change the page it points at.
6. Save, then Preview.

The same link type works anywhere: a "see page 12" note in the middle of a spread, or a back-to-contents button on every page.

Manage uploaded files in app storage

Your PDF lives in CatalogZine's storage; images you place on pages live in your own Shopify Files.

Two stores, in two places, and they behave differently.

The PDF

The file you upload lives in CatalogZine's own storage. It is not in your Shopify Files and there is nothing to manage for it in the Shopify admin. Delete on the Catalogs row removes the catalog, the PDF and its cover image together. That is the only way to remove it, and it cannot be undone — the share link starts returning "not found" straight away. A PDF may be up to 150 MB and 2000 pages.

Images you place on pages

An Image element is served from your own Shopify Files. When you add one you either upload it — which puts it into your Files — or pick one already there. So:

• Manage them in the Shopify admin under Content › Files, alongside everything else your shop uses.
• They stay in your Files after you delete the catalog. Removing them is your call, not ours.

The storefront page

If you pressed Embed, deleting the catalog also hides the Online Store page that was created for it. The page is hidden, not deleted, because you may have written your own copy around the book. Find it under Online Store › Pages in the Shopify admin to publish it again or delete it for good.

Lightbox mode and flipbook galleries

Open a catalog in a lightbox from a floating button or your own markup, and show several catalogs on one page.

The lightbox opens a catalog over the page the shopper is already on. It comes from the Catalog launcher app embed, which is off until you turn it on.

1. In the Shopify admin, go to Online Store › Themes › Customize.
2. Open App embeds at the bottom of the left panel and turn Catalog launcher on.
3. Paste the catalog into Catalog ID or link. The share link works as it is: press Copy link on the catalog's row under Catalogs and paste the whole thing — the block takes the ID off the end. The bare ID sits in the Embed dialog, in the Catalog ID box, and looks like cat_6l1b1vwawte27zeaiykvdcom; pressing Embed also creates a page on your store, so Copy link is the quieter route.
4. Set Button label, Position, Distance from the edge, Button colour, Label colour and Show on.
5. Save.

Any element in your theme carrying data-catalogzine-open opens the same lightbox. Turn Show the floating button off if you want only your own buttons.

<button type="button" data-catalogzine-open>View the catalog</button>

Your theme's own JavaScript can call window.CatalogZine.open('cat_...') and window.CatalogZine.close().

Showing several catalogs

There is no gallery feature — nothing builds a page that lists your catalogs. Two ways to do it yourself:

• Add one Catalog flipbook block per catalog to the same page, in Customize › Add block › Apps, each with its own catalog ID.
• Put a row of your own buttons in a Custom Liquid section, each naming a different catalog.

<button type="button" data-catalogzine-open="cat_6l1b1vwawte27zeaiykvdcom">Autumn</button>
<button type="button" data-catalogzine-open="cat_9k2c4rtynwd18qfebzmulpav">Winter</button>

How to open all PDF links as flipbooks

The app does not rewrite links. Swap the PDF href for the share link, or open it in the lightbox.

CatalogZine does not rewrite links on your storefront. A link to a .pdf file stays a link to a PDF file; nothing scans your theme and converts it. Change the links yourself instead. There are two destinations.

• The share link. Press Copy link on the catalog's row under Catalogs and use that as the link's address. The flipbook opens as a page of its own.
• The lightbox. Add data-catalogzine-open to the link and the book opens over the page the shopper is on. This needs the Catalog launcher app embed turned on — see Lightbox mode and flipbook galleries.

<a href="https://catalogzine.com/book/cat_6l1b1vwawte27zeaiykvdcom">Our catalog</a>

<a href="/pages/catalog" data-catalogzine-open>Our catalog</a>

If a page has too many PDF links to edit by hand, the snippet below points them all at one catalog. It is your own code in your own theme, not part of the app — paste it into a Custom Liquid section on that page and test it.

<script>
  document.querySelectorAll('a[href$=".pdf"]').forEach(function (a) {
    a.dataset.catalogzineOpen = 'cat_6l1b1vwawte27zeaiykvdcom';
  });
</script>

Show different flipbooks based on purchase status

The app has no gating. Tag the customer, then choose which embed to show with Liquid in a Custom Liquid section.

CatalogZine has no customer gating. It does not know who is looking at a flipbook, and nothing in the app is restricted by customer, tag or order history. You do this in your theme, around the embed code, with Liquid.

The recipe is: tag the buyer, then show one catalog or the other depending on that tag.

1. Tag the buyer. In the Shopify admin go to Customers, open the customer and add the tag wholesale. To do it automatically, use Shopify Flow with a trigger on order creation.
2. In CatalogZine open Catalogs and press Embed on each catalog — the button reads Embed again once that catalog has a page — then press Copy embed code. Keep both snippets to hand.
3. Go to Online Store › Themes › Customize, open the page you want the book on, then Add section › Custom Liquid.
4. Paste the Liquid below, with each embed code in the branch it belongs to, and save.

{% if customer and customer.tags contains 'wholesale' %}
  <!-- embed code for the wholesale catalog -->
{% else %}
  <!-- embed code for the retail catalog -->
{% endif %}

Use {% if customer %} on its own to show a book to signed-in customers only. Drop the {% else %} branch and everyone else sees nothing.

Wholesale line sheets and pricing

One catalog per price list, prices as labels on buttons, and where the real wholesale pricing has to live.

A line sheet is a catalog like any other: upload the trade PDF as its own catalog and give it its own hotspots. A hotspot map belongs to one catalog, so a retail book and a trade book cannot share one. CatalogZine does not build a line sheet for you — it starts from a PDF. Catalog Maker does build them, and Line Sheets is on its free tier.

Showing a trade price

There are two places a number can appear. The first is your own artwork, printed in the PDF. The second is the button: select a cart, product or link element and set Appearance › Text, up to 40 characters — for example Add — £18.00 trade. That field is shown only while Style is Solid, Outline or Soft; Icon only and Invisible draw no text at all. A cart element also has a Catalog price field under the linked product, described in the editor as shown instead of the store price.

Price grids and order forms

Line sheets usually print a grid of sizes and prices in the artwork. Set Style to Invisible on those elements: an invisible button paints nothing, so you can drop a transparent tap target over each row without covering the printing underneath. The editor marks them with a faint dashed outline so you can still find them; customers see nothing.

There is no order form and no quantity field. Each button adds one unit and the buyer changes quantities in the cart.

To keep the trade book away from retail shoppers, put it on a page gated by a customer tag — see Show different flipbooks based on purchase status.

Open the flipbook lightbox from custom links and buttons

Add data-catalogzine-open to a link, button or image and it opens the catalog in a lightbox.

The Catalog launcher app embed can open a book in a lightbox from any link or button you control, not only from its own floating button.

1. Go to Online Store › Themes › Customize › App embeds and turn on Catalog launcher.
2. Paste your catalog ID into Catalog ID or link. CatalogZine › Catalogs › Embed shows it, and the whole share link works too.
3. Turn Show the floating button off if you want only your own triggers. Save.

Now add data-catalogzine-open to the element. Anywhere you can write HTML works: a Custom Liquid section, the HTML view of the page editor, a theme snippet.

<a href="/pages/catalogue" data-catalogzine-open>See the catalogue</a>

<button type="button" data-catalogzine-open>Open the catalogue</button>

<a href="/pages/catalogue" data-catalogzine-open>
  <img src="…" alt="Autumn catalogue cover">
</a>

Keep the href real. The click is cancelled only when the launcher is on the page with a valid catalog ID, so before the script has run — or if the app embed is off — the link still goes somewhere.

To open a different book from a particular trigger, put its ID in the attribute:

<button type="button" data-catalogzine-open="cat_6l1b1vwawte27zeaiykvdcom">
  Trade line sheet
</button>

For the JavaScript API, and for triggers in markup that loads later, see How to open a flipbook from any element on your storefront.

How to open a flipbook from any element on your storefront

How the trigger works: one delegated listener, the attribute rules, the JavaScript API, and JavaScript-off behaviour.

The launcher binds one click listener to the document and, on every click, looks for the nearest ancestor carrying data-catalogzine-open. It never scans your markup at load time, so a trigger works even if it did not exist when the page loaded — inside a quick view, a cart drawer, a section that renders later, or markup another app injects. The copy-paste recipes are in Open the flipbook lightbox from custom links and buttons.

What the attribute accepts

• No value: opens the catalog set in the Catalog launcher app embed.
• A value must look like a catalog ID — cat_ followed by letters, digits, - or _. Anything else is ignored and the element behaves normally, so a link with a mistyped ID just follows its href.
• Several triggers on one page can each name a different catalog. The lightbox swaps the book when the ID changes.
• Only the ID travels. The address is built from the app embed's own settings, so a trigger cannot aim the lightbox at another site.
• Hovering a trigger opens the connection to catalogzine.com early, so the first click has less to wait for.

From your own JavaScript

CatalogZine.open('cat_6l1b1vwawte27zeaiykvdcom');
CatalogZine.open();   // the catalog set in the app embed
CatalogZine.close();

Esc closes the lightbox, so does a click on the dimmed area, and focus returns to the element that opened it. The book loads on the first open and is kept afterwards, so reopening it is instant. If it has not appeared after twelve seconds, a link to open it in a new tab is shown.

Direct link, app block, embed code — which to use?

Five ways to show the same book — share link, Shopify page, theme block, embed code, launcher — and when each fits.

All of these show the same book, with the same hotspots and the same flipbook settings. What differs is where it appears and who has to set it up.

The two theme blocks need the catalog ID. It is in the app under Catalogs > Embed, in the dialog above the embed code: cat_ followed by 24 characters. Both blocks also accept a whole share link and take the ID out of it — so if you do not want the store page that Embed creates, press Copy link instead and paste the link into the block.

With the launcher enabled you can also open the book from your own markup: any element carrying data-catalogzine-open opens the lightbox, and a catalog ID as its value opens a different book. The floating button can be switched off while the rest keeps working. Your own triggers work only on the pages the launcher itself renders on, so keep Show on wide enough to cover them.

Plan differences and limits

There are no paid plans and nothing is gated; these are the technical limits instead.

There are no paid plans. Nothing in CatalogZine is gated: every feature is available on every install, there is no cap on how many catalogs you upload, and no catalog carries a watermark. The limits below are technical ceilings, identical on every shop.

The PDF itself never goes into Shopify Files, for the same 20 MB reason — catalogs routinely exceed it — so the 150 MB ceiling is ours and the 20 MB one applies only to images you place on a page.

Why the storefront doesn’t match the preview

The handful of reasons the book on your store can look different from the one you saw in the app.

It is the same book and the same file in both places. When the storefront looks different, it is nearly always one of these.

• The settings are not saved yet. The live preview on Flipbook settings shows the values you are typing; the storefront shows the values you have saved. Press Save in the bar at the top. Open full size, at the top of that page, always shows the saved settings, so it is the honest check.
• The hotspots are not saved yet. Preview in the hotspot editor holds a blank tab until the save lands, so that tab is correct — but a storefront page you already had open still shows what it loaded. Reload it.
• Reduced motion is switched on. The viewer turns off every animation for a visitor whose system asks to reduce motion. The editor keeps animating on purpose, so a button that pulses while you place it is deliberately still for that visitor — including you, on your own machine, if you have the setting on.
• The theme is deciding the width. Maximum width on the app block is a ceiling, not a width: a narrow section or a theme with its own page width will make the book smaller than you set. Put the block in a full-width section if you need the space.
• The browser is showing an old copy. Storefront pages are cached hard. Reload the page, or open it in a private window, before assuming a change did not land.
• The page is not published. Embed publishes the page it creates and republishes one that was hidden, but deleting a catalog hides its page, and anyone with admin access can unpublish it. Check Online Store > Pages in the Shopify admin.
• A phone is showing two pages side by side. The viewer opens a single page only when its box is narrower than 768px and taller than about 1.1 times its width. The app block and the copied embed code both switch to a tall 5:7 box on a narrow screen; a hand-written iframe with a short fixed height does not, and gets a spread at postage-stamp size.
• The iframe has no height at all. Then it is not a difference, it is broken — see Troubleshooting.

Troubleshooting

Symptom, cause and fix for the things that actually go wrong.