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. Click anywhere on the page to drop a round Add to cart button there, or drag to draw one at the size you want. In the sidebar on the right, pick what it should be — Add to cart, Hotspot, Video, Image, Iframe or Link — and link it to a product, a video, an image, a web address or a page.
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 can be changed at any time from the picker at the top of the sidebar, and switching type keeps the element's position and size.

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, click each product to drop an Add to cart button on it. 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 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, inside your plan's size limit.

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, Products & cart, 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.
• Products & cart — which details a shopper sees when they tap a product, whether they can build a cart at all, and your checkout wording, discount code, order note and minimum order value. See What shoppers see when they tap a product.
• Wording — every word the viewer says, in your wording or another language, and which of your Translate & Adapt languages product details arrive in.
• Advanced — picture quality, and putting everything back the way it shipped.

What shoppers see when they tap a product

Switch each detail in the product popup on or off (tags start off), set your checkout button, discount, note and minimum.

A tap on a product in the flipbook opens it in a popup over the page: photos, name, price, description, and every variant with a quantity control. Flipbook settings › Products & cart decides what that popup shows and what happens at checkout, for every catalog in your shop.

Which details the popup shows

One switch each for photo thumbnails, vendor, product name, product type, price, compare-at price, description, tags, SKU, the stock badge, and the View on store link at the foot. All of them are on except Tags: tags are usually notes to yourself — SS24, clearance, do-not-discount — rather than anything a shopper was meant to read, so they stay off until you switch them on.

Two of the switches reach further than the line they name. With the product name off, the popup's own heading does the naming — that is the label on the button or hotspot the reader tapped. With price off, money disappears from the cart as well as the popup.

Cart and checkout

• Let readers build a cart — off makes the catalog a lookbook: products still open and still link to your store, and nothing can be added from the page. Your wholesale links go with it, because an order form is filled from the same cart.
• Checkout button — your own wording, up to 40 characters. Left empty it says Checkout.
• Open checkout in a new tab — on, so the reader keeps their place in the catalog. Off sends them to your store in the tab they are in.
• Discount code — handed to your store along with the cart, so checkout opens with it already applied. It has to be a code that exists in your Shopify discounts; anything else is ignored there.
• Note on the order — travels with the cart and lands on the order, so you can tell which catalog sold it. Most themes show it on the cart page too, so write something a shopper may read.
• Minimum order value — below it the checkout button waits and the cart says how much more is needed. 0 means no minimum, and the figure is in your store's own currency.
• Continue browsing — the button in the cart that closes it and goes back to the book.

None of this changes who takes the money. The cart is handed to your own store, which prices it, applies your discounts and taxes, and checks the buyer out. Your wholesale order forms hold Send order back on the same minimum — see Wholesale line sheets and order forms.

The language product details arrive in

Names, descriptions, options and product types come from Shopify exactly as your store holds them. If you have translated them with Shopify’s Translate & Adapt, then Flipbook settings › Wording › Product details arrive in chooses which language a reader gets:

• Always your default language — how it ships. Nothing is asked for in another language.
• Match the reader’s browser — each reader gets the published language closest to the one their browser asks for, and your default language when none of them match. Safe to leave on a store with one language.
• Always one language — pick one, and every reader gets it.

Only languages your store publishes are offered: a translation still in progress in Translate & Adapt is not one to show a shopper. Anything you have not translated arrives in your default language rather than blank, so there is nothing here to keep in step.

Order forms are never translated. An order is your own record, so its line titles stay in your store’s language whatever the buyer was reading.

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, hotspots, videos, images, iframes 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. Click the page to drop a round Add to cart button there, or drag to draw one at the size you want. A selected element has eight handles for resizing.
3. At the top of the sidebar on the right, pick what it should be: Add to cart, Hotspot, Video, Image, Iframe or Link. The rest of the sidebar changes to match.
4. Set it up there — the product, video, image, address or page it points at, and how it looks.
5. Press Save, then Preview to open the real flipbook in a new tab.

Add to cart, Hotspot and Link draw a button, and a new one starts as a round icon-only button. In the sidebar, Style switches it to Solid, Outline, Soft or Invisible, and you set its shape (Rounded, Pill, Square or Circle), colour, icon and — for the styles that draw text — a label 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. Click the first contents line to drop a button there and drag its handles over the line, then at the top of the sidebar change its type to Link.
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 2000 pages, and as large as your plan allows: 10 MB on Free and Basic, 50 MB on Pro, 150 MB on Unlimited.

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 order forms

Share a catalog as an order form: buyers send an order and you get a draft order in Shopify to invoice.

Every catalog you upload has two links, and the difference is what happens when a buyer taps a button.

The order form is the wholesale one. A trade buyer ordering twelve of three sizes expects an invoice and agreed terms, not a card form, so what arrives in Shopify is a draft order: you price it, send the invoice and confirm it like any other trade order.

Setting one up

1. Upload the trade PDF as its own catalog and place your buttons on it, exactly as for any catalog. A hotspot map belongs to one catalog, so a retail book and a trade book cannot share one.
2. On Catalogs, press Wholesale link and send it to your buyers. It looks like https://catalogzine.com/order/cat_…, while the retail one is /book/cat_…. The same catalog serves both — you do not upload it twice.
3. The first order tells you whether the app still needs permission — see below.
4. Orders arrive on the Orders page and by email.

Prices

The prices on the order are your store's own, read from Shopify when the order arrives — never whatever the buyer's browser had on screen. The Catalog price you can set on a cart button is applied on top, as a discount on that line, and only when it is lower than the store price. So a line sheet can show trade pricing while Shopify stays the source of truth.

For proper B2B pricing across a whole catalogue, set it in Shopify — a B2B catalog or a market price list — and treat the flipbook as the presentation layer over it.

Showing a trade price on the page

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. A new button starts as Icon only, and that field is shown only once Style is Solid, Outline or Soft.

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.

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.

Where orders go

Orders from a catalog order form are listed in the app, emailed to you and the buyer, and sent to Shopify as draft orders.

Orders sent through a catalog's order form arrive in three places at once: the Orders page in the app, your inbox, and Shopify's Draft orders.

The Orders page

Every order is listed newest first with its number, the buyer, how many items and the total. View opens the whole order — buyer, address, note and every line. The status says where it got to:

Emails

Each order emails you and sends the buyer a confirmation with the same details. By default yours goes to your store's email; set a different address under Notifications on the Orders page — a sales inbox, for instance. Replying to your copy reaches the buyer, and replying to theirs reaches you.

Deleting

Delete removes the order from this page only. A draft order already in Shopify stays in Shopify — that is your record of it, and the app never deletes anything from your store.

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

Free, Basic, Pro and Unlimited: what each one holds, what it costs, and the ceilings every plan shares.

There are four plans. What changes between them is how many catalogs you may have at once, how large each PDF may be, and whether the flipbook carries a small Made with CatalogZine mark. Nothing else is gated: hotspots, the cart and the order form, the theme blocks, the launcher, the settings and the Orders page are all on every plan, including Free.

Prices are in US dollars, and a yearly plan is half the monthly rate — twelve months for the price of six. You change plan on the Plans page in the app, which opens Shopify's own plan picker; you can also reach it in your Shopify admin under Settings › Apps and sales channels › CatalogZine. Shopify takes the payment, charges the difference for the rest of the month and puts it on your Shopify invoice — we never take a card here. Cancelling puts the shop back on Free.

The mark on a Free flipbook

On the Free plan the flipbook carries a small Made with CatalogZine link at the top of the page — at the bottom instead if you have moved the toolbar to the top, so it is never sitting on a button. It is the only thing any plan adds to your pages: your PDF, your buttons and your wording are untouched.

There is no setting for it, in Flipbook settings or anywhere else, and nothing in your theme can hide it. Any paid plan removes it — from every catalog you already have as well as new ones, and from links you have already shared.

The limits below are technical ceilings and are the same on every plan, Free included.

The PDF itself never goes into Shopify Files, for the same 20 MB reason — catalogs routinely exceed it — so the PDF 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.