Embedding FlipBook on shopify store using "FlipBook Display" App Block

In the previous part, we learned all the available methods to Embed or Share Flipbooks in Your Shopify Store. Now we will explore how to embed FlipBook in a Shopify store using "FlipBook Display" app block.



PDFFlipBook adds an App Block to your Store, which you can add to any page. Click on the button below to copy the FlipBook URL (which you will see as step 1) and then click on Insert on Shopify button to continue (which you will see as step 2). After doing this, it will automatically redirect you to your Shopify store, and you will find TNC PDF FlipBook under the Templates Section.



After finding TNC PDF FlipBook in the template section, simply click on it, and you will get another interface, which is the App Block Embedding option. You can understand better by looking at the screenshot below.



You will find all the available settings for embedding here. Let's demonstrate each one properly:


FlipBook URLs (comma-separated): First, you will see the FlipBook URLs field. All you need to do is copy and paste your flipbook URL into this field, which you want to display. You can add multiple flipbooks by adding multiple flipbook links here. Remember, only put commas after each flipbook link, no spaces.

Display Settings: You will see 3 display types here: Embed, Plain Link, and Popup Link. Click on the Embed option to embed.

Use Full Width: Expand your flipbook to fill the entire screen. This setting breaks theme constraints for maximum visual impact and immersive viewing.

Embed Settings: The Embed Settings in the TNC PDF FlipBook Shopify app control how your flipbook appears when embedded on your store pages using an iframe. Here's what each setting does:

  • Iframe Width (100%): Sets the flipbook’s width to fill 100% of the available space in the container, adapting to different screen sizes for a seamless look.
  • Iframe Height (600px): Defines the height of the flipbook on desktop or larger screens, ensuring it displays with enough vertical space for comfortable reading.
  • Responsive Iframe Height (400px): Automatically reduces the flipbook height to 400px on screens narrower than 768px (like phones and tablets) for better mobile responsiveness and user experience.

These settings help ensure your flipbook looks great on all devices by adjusting size dynamically, making it easy to embed and display professionally on any Shopify page.

Enable Fullscreen Link: This setting works when the display type is set to Plain Link. Adds a full-screen button that expands your flipbook to full screen for distraction-free viewing. Perfect for detailed documents and immersive reading on any device.

Open Fullscreen Link in Popup: This setting works when the display type is set to Popup Link. This option opens your flipbook in a pop-up overlay when the full-screen link is clicked. It offers a focused, full-size view without leaving the current page, keeping users engaged and making navigation easy.

Fullscreen Link Position: You can set the location of your link anywhere you want, either in Avobe FlipBook or below the flipbook.

Grid Columns: This option is only applicable when the display type is set to 'Embed'. This setting determines the number of columns used to display flipbooks in a grid layout. You can adjust it to fit your design needs, typically ranging from 1 to 4 columns. Adjust the number of columns for optimal balance between appearance and usability across different devices.



Link Settings: The "Link Settings" in the TNC PDF FlipBook Shopify app allow you to control how links within your flipbook behave and appear. Here’s what you need to know about them:

  • Link Text: You can customize the clickable link text, for example, "View FlipBook."
  • Link Target: Choose if the link opens in the same window or a new window.
  • Link Alignment: Align the link text left, center, or right within its container.
  • Link Text Decoration: Set decoration style such as none, underline, overline, or line-through.
  • Link Color: You can choose a default color for link text.
  • Link Hover Color: You can choose which color the link will change to when you hover over the link.

Custom CSS: This option lets you add your own CSS code to customize the flipbook’s appearance beyond the default settings. You can add custom CSS here to override styles. Example: .flipbook-grid { background-color: #f5f5f5; }


Next: Linking to FlipBook on shopify store using "FlipBook Display" App Block

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.