HTML Website CreatorFollow the 'Getting Started' procedure below for page templates that are used only once in your 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, go directly to 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.
Now, let's see how to add a flipbook to your 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 your home page. 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 of the content of your flipbook
Link: paste in a URL link you copied 'PDF Files' submenu of the App. 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.
Buttons with missing label or link data won't be displayed.
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.
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 elements of your online store: products, collections, pages, and blog posts.
It's easy: use the application's submenus and select the one that corresponds to the type of element to which 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.
Can't find the PDF you need? Use the 'Add File' area. 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.
There's no need to save your work - 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.
Working With Templates: Button/Link Placement
Access the Theme Edition of your online store to add Flipbooks to your store. You can add them 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 a template, click '⊕ Add section' or '⊕ Add block' to access a sub-menu of available blocks. Click on the 'Apps' tab to add a 'PDF Flipbook' block. Each 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:
a label: enter an explicit label that represents of the content of your flipbook
a 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 clincking on the button.
Buttons with missing label or link data won't be displayed.
TIP: Depending on which meta fields are filled in (or not), you can get a differentiated display of your pages with the same template.
Save your work before going any further.
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.
HTML Website Creator