PS PrestaShop Beginner

PDF Catalog for PrestaShop — Complete Guide

Installing, configuring and using the PDF Catalog module: embedding in your pages through a shortcode, showcase page, pro viewer (two-page, thumbnails, fullscreen) and SEO. PrestaShop 8 and 9.

Updated Module version 1.2.0

Overview

DFPDFCatalog publishes your PDF catalogs directly on your PrestaShop 8 or 9 store. The module works in two complementary ways. It first creates its own front-office pages: a showcase page listing all your catalogs as clickable banners (/catalogues-pdf) and a viewer page per catalog (/catalogue-pdf/{id}-{slug}). It then lets you embed any catalog into any page of your store, through a shortcode, a Smarty widget or an iframe.

In both cases the PDF is displayed in a built-in, professional grade reader: magazine two-page mode, clickable thumbnails, fullscreen, zoom, clickable links and selectable text.

Installation

  1. Download the module ZIP file from your DataFirefly account.
  2. In your PrestaShop back office, go to Modules → Module Manager → Upload a module.
  3. Select the dfpdfcatalog.zip file and confirm.
  4. The module installs automatically: database tables, admin tab and front routes are created with no manual configuration.

After installation, a new PDF Catalogs tab appears in the Catalog menu of the back office.

The same archive installs on PrestaShop 8.0 to 8.2 and on PrestaShop 9.x. There is no separate download depending on your generation.

Upgrading from an earlier version

  1. Upload the new version through Modules → Module Manager → Upload a module (or replace the /modules/dfpdfcatalog/ folder over FTP).
  2. Clear the PrestaShop cache: Advanced Parameters → Performance → Clear cache.

Upgrading preserves your existing catalogs: database tables and uploaded files (banners and PDFs) are left untouched. When moving to 1.2.0, the module automatically registers the hooks required for in-page embedding.

Adding a catalog

  1. Go to Catalog → PDF Catalogs then click Add a catalog.
  2. Fill in the title (translatable per language). It is also used to generate the URL slug and the page meta title.
  3. Fill in the description (translatable). It is shown on the viewer page and used as the meta description.
  4. Upload the banner image. It appears in the showcase grid and acts as the opening poster when the catalog is embedded in a page.
  5. Upload the PDF file.
  6. Set the position (display order in the grid) and the enabled/disabled status.
  7. In multistore, tick the shops the catalog should appear on.
  8. Save: the catalog is immediately visible on /catalogues-pdf.

Once the catalog is saved, reopen it: the form shows an Embed codes block containing the four ready to copy codes for displaying it elsewhere on your store. Click a field to select it.

Embedding a catalog in a page

A showcase page does not fit every use case. For a vertical landing page, a public procurement page or a category that should present its own catalog, you can place the viewer exactly where you want it.

Recommended method: the shortcode

Paste this marker into your page content, exactly where the catalog should appear:

[dfpdfcatalog id="3"]

Replace 3 with the catalog id, shown in the ID column of the Catalog → PDF Catalogs list. The shortcode works in:

  • CMS page content;
  • category descriptions;
  • product descriptions.

In these three contexts the module replaces the marker server side, before the page is sent. For every other context (theme blocks, third party modules, page builders), a JavaScript fallback detects the marker in the page and mounts the viewer in the same spot. There is nothing to configure: the result is identical for the visitor.

Shortcode options

  • id — catalog id. Required.
  • modeclick (default) first shows a poster built from the catalog banner, and only loads the viewer on click. inline displays the viewer directly, loaded as it nears the viewport.
  • height — viewer height in pixels. By default the viewer takes 80% of the screen height.
  • title — label shown on the opening poster. Defaults to the catalog title.
[dfpdfcatalog id="3" mode="inline" height="800"]

Smarty widget in a theme template

To embed a catalog directly into a .tpl file of your theme:

{widget name='dfpdfcatalog' id_catalog=3 mode='inline'}

This syntax only works in templates. CMS page content is not parsed by Smarty, so use the shortcode there.

Iframe, including outside PrestaShop

The module exposes an embed page without the store header and footer, ready to be placed in an iframe:

<iframe src="/catalogue-pdf-embed/3" width="100%" height="800" style="border:0;" loading="lazy"></iframe>

This is the method to use for displaying a catalog on an external site. These embed pages are set to noindex and therefore never compete with your real pages in search results. Note that an iframe height is fixed: on your own store, prefer the shortcode, which adapts to the content.

Several catalogs on the same page

You can place as many catalogs as you need on the same page. Each embed creates an independent viewer, with its own navigation controls, zoom and display mode. Keyboard shortcuts only act on the viewer being used, not on all of them at once.

Loading is optimised for this exact scenario:

  • in click mode, no PDF is downloaded until the visitor opens a catalog;
  • in inline mode, loading starts as the widget nears the viewport;
  • the rendering library and the stylesheet are downloaded once for the whole page, and only if a catalog is actually present.

A page showing eight catalogs in click mode therefore only loads eight banner images up front.

Front-office pages

Showcase page

The /catalogues-pdf page displays all active catalogs of the current shop as a banner grid, sorted by position. Each banner links to the catalog viewer. The page builds its own meta title and meta description, and fits into the native PrestaShop breadcrumb.

Viewer page

Each catalog has its own /catalogue-pdf/{id}-{slug} page. The PDF is displayed in the built-in viewer, with a button back to the showcase and a direct download button. The PDF is served through a PHP controller in inline display, which forces display in the browser. HTTP Range requests are supported, so large catalogs load progressively rather than in one go.

Using the viewer

The viewer is built on PDF.js (Mozilla) and offers the following controls in its toolbar:

  • Thumbnails — shows or hides the page thumbnail sidebar. Thumbnails are clickable and rendered as you scroll (lazy rendering), even for very long catalogs. The active page or pages are highlighted.
  • Two-page — switches between page by page display and magazine two-page mode: cover alone, then pairs 2-3, 4-5, and so on. This mode is enabled by default on screens at least 1024 px wide.
  • Navigation — previous and next buttons, page indicator (for example “Page 4-5 / 24” in two-page mode). The left and right arrow keys work as well.
  • Zoom — zoom in and out in 25% steps, plus a button to fit the width automatically.
  • Fullscreen — switches the viewer to fullscreen through the native browser API. On iOS Safari, a simulated fullscreen mode is used automatically. The Escape key exits.

Hyperlinks inside the PDF stay clickable: external links open in a new tab, and internal links (table of contents, cross references) navigate straight inside the viewer. If the PDF has a text layer, the text is selectable, copyable, and the browser Ctrl+F search works on its content.

Rendering uses the pixel density of the screen (HiDPI): pages stay crisp on Retina and 4K displays.

SEO and URLs

The module declares its routes through the PrestaShop moduleRoutes hook:

  • /catalogues-pdf — showcase page, with dedicated meta title and meta description.
  • /catalogue-pdf/{id}-{slug} — one clean URL per catalog, where the slug is generated automatically from the title. The meta title uses the catalog title and the meta description uses its description.
  • /catalogue-pdf-embed/{id} — embed page meant for iframes, set to noindex.

No CMS page has to be created: routes are registered automatically at installation.

Multilingual and multistore

Titles and descriptions are translated field by field in the edit form (standard PrestaShop language selector). Each language builds its own slug and its own meta. In multistore, the catalog to shop association is managed with checkboxes: each store only displays the catalogs assigned to it. This filtering also applies to direct URL access and to in-page embeds: a catalog not assigned to the current shop is never served there.

Troubleshooting

The shortcode shows as plain text on the page

  • Check that the id matches an existing catalog that is enabled and assigned to the current shop. An unknown id leaves the marker untouched rather than displaying an empty viewer.
  • Check that the catalog actually holds a PDF file.
  • Clear the PrestaShop cache, then reload the page in a private window.
  • If you have just upgraded the module, uninstall and reinstall it to force the embedding hooks to register.

The PDF does not display

  • Check that the PDF file was actually uploaded (reopen the catalog in the back office).
  • Clear the PrestaShop cache then reload the page in a private window.
  • If an error message appears in the viewer, a direct PDF download link is offered as a fallback.

Text is not selectable or Ctrl+F finds nothing

Text selection requires the PDF to contain a text layer. Scanned PDFs or documents exported as pure bitmap do not have one: in that case only graphical display is possible. Run the document through an OCR tool if you need the text.

Links must be genuine link annotations inside the PDF (created by the export tool: InDesign, Word, LibreOffice, and so on). Text that merely looks like a URL, without an annotation, will not be clickable.

Pages appear stretched or blurry

This 1.0.0 issue has been fixed since version 1.0.1 (HiDPI rendering and neutralisation of theme CSS resets). Update the module then clear the PrestaShop cache.

Version history

  • 1.2.0 (2026-08-10) — Embed a catalog in any page through a shortcode, a Smarty widget or an iframe; server side replacement in CMS pages, categories and product pages, with a JavaScript fallback; viewer rewritten as independent instances (several catalogs per page); lazy loading; ready to copy embed codes in the back office; HTTP Range request support.
  • 1.1.0 (2026-08-10) — PrestaShop 9 compatibility; fixed shop association in the edit form; shop filtering applied to direct URL access; real file content validation on uploads.
  • 1.0.4 (2026-05-11) — Fullscreen mode (native API plus iOS Safari fallback); fixed fit-width on the cover in two-page mode; highlighting of active buttons.
  • 1.0.3 (2026-05-11) — Magazine two-page mode (cover alone, then 2-3, 4-5…); automatic activation on wide screens; clean cancellation of renders during fast navigation.
  • 1.0.2 (2026-05-11) — Clickable thumbnail sidebar with lazy rendering; text layer (selection plus Ctrl+F); thumbnail toggle button.
  • 1.0.1 (2026-05-11) — Crisp HiDPI rendering on Retina and 4K; clickable PDF links (annotation layer); fixed vertical page stretching.
  • 1.0.0 (2026-05-08) — Initial release: showcase page, built-in viewer, SEO URLs, multilingual, multistore.
Was this page helpful?

Still stuck? Contact support