Follow the 'Getting Started' procedure below for page templates that are used only once in an online store, or if you want to display the same PDF for pages that depend on the same template.
Examples of such pages: Home, Contact Us, Find Us, About Us, Terms of Service, Privacy Policy, etc.
If you prefer a more flexible behavior and customization to your site's content, then check the chapter 'Going Further'.
To make the rest of the procedure easier, first copy the URL of the PDF file you want to place on the first page to the clipboard.
To do this, go to the 'PDF Files' submenu of the App and locate the PDF document you wish to work with.
Can't find the PDF you need? Use the 'Add File' area. Note that Shopify limits files to 20MB, including PDFs.
Once you've identified the right document, click the 'Link' button in the corresponding row. This will copy the link to the clipboard. We will use it later.
See this video about copying a PDF link to the clipboard:
Now, let's see how to add a flipbook to a homepage.
From the Shopify admin, go to Online Store > Themes. Find the theme that you want to edit, and click 'Customize'. The 'Home Page' template will show up by default. If it's not the case, select it from the Template drop-down menu.
Click the '⊕ Add section' or the '⊕ Add block' to access a sub-menu of available blocks. Click on the 'Apps' tab to add a 'PDF Flipbook' block. Each Flipbook block can hold up to 4 buttons, and multiple blocks can be added to a template.
Place a Flipbook block where you want it on the homepage. Click on the block to display its settings panel, where you can assign some data to each button :
- Label: enter an explicit label that represents the content of your flipbook.
- Link: paste in the PDF link you copied from the 'PDF Files' submenu of the App in the previous step. Alternatively, you can copy a link from Shopify's content manager.
You can preview the flipbook in the theme editor by clicking on the button in the template page preview.
Buttons with missing label or link data won't be displayed when rendering the online store.
There are also tools to customize the buttons or links that launch flipbooks. While editing a PDF Flipbook block, scroll down to the 'Design' section. You'll find numerous settings to fine-tune its appearance and behavior.
Save your work and quit the Theme Editor when you are done.
Check this video on how to add a flipbook to a homepage:
Using custom data (or metafields) in Shopify can be surprising at first.
Metafields allow to display dynamic information on your store. This approach proves to be effective, reliable and powerful, especially for large websites. Most importantly, it preserves the separation between appearance and data in Shopify stores.
Working With PDF Files as Dynamic Data
You can add PDF files as dynamic sources to the following layout categories of your online store:
- products,
- collections,
- pages, and
- blog posts.
It's easy: use one of the application's submenus corresponding to the type of layout where you want to add a PDF flipbook. A corresponding interface shows up, where you can select the desired element.
Detailed information will appear in the "Link" tile on the right. The "Select" button opens a pop-up window where you can choose one of your PDF files.
Use the 'Add File' area if you can't find the PDF you need. Please note: Shopify limits downloadable files to 20MB.
Need more than one PDF per item? Use the 'Add Definition' button to create more dynamic sources.
To reduce dynamic sources, click the Trash icon in the upper-right corner of the window.
There's no need to save your work as actions are recorded on the fly.
Next, we'll see how to display these PDFs on their respective pages in one step using the templates.
See the video below to assign dynamic PDF links:
Working With Templates: Button/Link Placement
Access the Theme Edition of your online store to add Flipbooks to your store. You can add dynamic buttons to the following templates:
- collections,
- products,
- pages, and
- blog posts.
From the Shopify admin, go to Online Store > Themes. Find the theme that you want to edit, and then click 'Customize'. Select the template that you want to edit from the Template drop-down menu.
Once you are in the right template, locate the area where you want to add a Flipbook button. Depending on the location, click on '⊕ Add section' or '⊕ Add block' to access a sub-menu of available blocks to choose from. Select the 'Apps' tab to add a 'PDF Flipbook' block. Each Flipbook block can hold up to 4 buttons, and several blocks can be added to a template.
Place a Flipbook block where you want it in your template. Click on a block to display its settings panel, allowing you to assign some data to each button:
- Label: Enter an explicit label that represents of the content of your flipbook.
- Dynamic link: Click on the database icon next to the link field and choose one of the Flipbook dynamic sources.
You can preview the flipbook in the theme editor by clicking on the button in the template page preview. The buttons you define for your template may or may not appear for a given document, depending on the dynamic link(s) you specified for it.
Buttons with missing label or link data won't be displayed when rendering the online store.
Tip: Depending on which metafield(s) is/are filled in (or not), you get differentiated renderings for your pages using a single template.
Save your work before going any further.
Watch the video on how to add and configure dynamic buttons on a template layout:
Working With Templates: Button/Link Appearance
The Template Editor also includes tools to customize the appearance and behavior of the buttons or links that launch Flipbooks. While editing a PDF Flipbook block, scroll down to the 'Design' section. There you'll find the following settings:
- Look: button or text link
- Arrow display: none, right, left
- Alignment: left, center, right, keep space between, keep space around, display evenly
- Width: automatic, maximum, uniform
- Spacing
- Top and bottom margins
- Height
- Text color
- Text hover color
- Border color
- Edge thickness
- Edge rounding
- Background color
- Background hover color
- Animation effect: none, shutter right, shutter left, shutter out
- Animation speed
Save your changes and quit the Theme Editor when you are done.