How to create a digital catalog for your website
Turn a PDF or your store's products into a catalog customers can browse and buy from on your own site. What makes a digital catalog work, two ways to build one, and where to put it.
The same PDF can open as a book with pages that bend and turn, a carousel you flick through, or a column of pages you scroll down. Real3D Flipbook has six view modes, and the right one depends less on taste than on the document and on who reads it. Here is what each mode does and where it fits.
Realistic 3D
The default. Pages are drawn with WebGL: they bend as they turn, catch the light and cast shadows on the page underneath. Flip speed, page shine and page hardness are settings. You can see it on the Realistic 3D page.
Use it for magazines, catalogs, lookbooks, brochures and anything where the feel of a printed piece is part of the point.
Keep in mind that it needs WebGL. Every current browser has it; where it is missing, the viewer switches to CSS 3D on its own.
CSS 3D
A real page turn, done with CSS instead of WebGL. Pages flip in perspective with a shadow along the fold, but they stay flat while they turn. It needs less from the device, so it is the safe choice for older phones and computers and for pages with several flipbooks at once. See the CSS 3D page.
Use it for the same documents as realistic 3D when the audience is on older hardware, or when a lighter page matters more than the paper effect.
2D
The page turn without perspective: the page turns flat, as if you were looking straight down at the book. It is the calmest of the three page-turn modes and the lightest.
Use it for books and documents that should still read like a book, on sites with a flat, minimal design.
Swipe
No page turn at all: pages slide sideways like a carousel. On phones it shows one page at a time and follows the finger, on wider screens it shows spreads. It is the mode that feels most like a reading app on a phone. See the Swipe page.
Use it for anything read mostly on phones, and catalogs where people move quickly between pages.
Scroll
Pages sit in one column and the reader scrolls down, as in a PDF viewer or a long web page. Nobody has to learn how to turn a page, and long documents are easy to skim. See the Scroll page.
Use it for reports, manuals, white papers, menus and price lists: documents people search and skim rather than browse.
Simple
Pages change instantly, with a short fade instead of an animation. The toolbar, zoom, thumbnails and search all work as in the other modes.
Use it for documents that are looked up rather than read through, such as a price list or a timetable, where an animation on every click would slow the reader down.
Quick comparison
| Mode | Page turn | Best on | Fits |
|---|---|---|---|
| Realistic 3D | Bending pages, shadows | Desktop and modern phones | Magazines, catalogs, lookbooks |
| CSS 3D | Flat pages, perspective | Any device, older ones too | The same, lighter |
| 2D | Flat, no perspective | Any device | Books, minimal sites |
| Swipe | Slide sideways | Phones | Mobile readers, quick browsing |
| Scroll | None, vertical column | Any device | Reports, manuals, long documents |
| Simple | Instant, short fade | Any device | Price lists, look-up documents |
Try them on one catalog
Each link opens the same 32-page furniture catalog in a different mode:
Realistic 3D CSS 3D 2D Swipe Scroll Simple
Different modes for phones and desktop
You don’t have to pick one mode for everyone. The flipbook’s mobile settings take a separate view mode for phones, so a catalog can turn its pages in realistic 3D on desktop and switch to swipe on a phone. In the page-turn modes, screens narrower than 768 px also show one page at a time instead of a squeezed spread.
Changing the mode on one page
The view mode is a setting of each flipbook, but the shortcode can override it. This shows flipbook 12 in scroll mode on one page while it keeps its own setting everywhere else:
[real3dflipbook id="12" viewmode="scroll"]The values are webgl (realistic 3D), 3d, 2d, swipe, scroll and simple.
If you can’t decide
Start with realistic 3D on desktop and swipe on phones. That covers most catalogs and magazines. Switch to scroll when the document is something people search rather than leaf through. The homepage has realistic 3D near the top and the other five in tabs, with the same catalog in each, so you can compare them before you choose.
Questions about flipbook view modes
Can phones use a different view mode?
Yes. The flipbook’s mobile settings take their own view mode, so a catalog can turn its pages in realistic 3D on desktop and slide in swipe mode on phones.
What happens in a browser without WebGL?
Realistic 3D needs WebGL. Where it is missing, the viewer switches to CSS 3D on its own, so readers still get a page turn.
Can the same flipbook appear in two view modes?
Yes. The view mode is set per flipbook, and the shortcode’s viewmode parameter overrides it for one embed, as in the links above. Our guide to embedding a flipbook covers the other shortcode options.
How do I create the flipbook in the first place?
Upload the PDF in the plugin and publish. Our step-by-step guide covers it: how to turn a PDF into a flipbook on WordPress.
Comparing plugins? Our guide to the best flipbook plugins for WordPress puts prices and features side by side.
