- Kaptai Rasta Matha, Chittagong 4221
- Mon – Fri: 8:00AM – 6:00PM
- AmzadHossen420360@gmail.com
Why This Issue Happens:
In the Horizon new update theme (and some other Shopify free themes), when you add an app block, it is automatically wrapped inside a Section container.
This Section applies automatic CSS and admin UI styles, which may conflict with the app’s layout. As a result, app content such as FlipBooks or iframe-based apps may appear squeezed, misaligned, or broken.
This is a theme-level layout behavior, not an app bug.
How to Fix the Issue (Solution)
Please follow these steps carefully:
1. Go to Online Store → Themes → Edit code
2. Open the Sections folder
3. Find the file named apps.liquid
– If the file exists, open it and paste the provided code into it
– If the file does not exist, create a new file named apps.liquid and paste the code into it
4. Save the file
5. Go back to Theme Customization
6. Add the app block again
After completing these steps, everything should display correctly.
Summary :
– This issue is related to the Horizon / Shopify free theme layout behavior
– It is not an app bug
– Dawn, Shopify premium themes, and ThemeForest themes work without any issues
– Following the steps above will resolve the problem
If you still face issues after following this guide, please share updated screenshots and we will be happy to assist further.
<div class="{% if section.settings.include_margins %}page-width{% endif %}">
{% for block in section.blocks %}
{% render block %}
{% endfor %}
</div>
{% schema %}
{
"name": "Apps",
"tag": "section",
"class": "section",
"settings": [
{
"type": "checkbox",
"id": "include_margins",
"default": true,
"label": "Include page margins"
}
],
"blocks": [
{ "type": "@app" }
],
"presets": [
{ "name": "Apps" }
]
}
{% endschema %}
Prerequisites
• A Shopify store
• A theme that supports Online Store 2.0
• A PDF file uploaded to Shopify Files
Get your PDF URL
1. Go to Shopify Admin → Settings → Files
2. Upload your PDF file
3. Copy the file URL
Add the app block to a page
1. Shopify Admin → Online Store → Themes
2. Click Customize
3. Open the page where you want the flipbook (Home, Product, or Custom page)
4. Click Add section or Add block
5. Select Friends2a PDF FlipBook
6. Position the block and click Save
Configure FlipBook settings
• PDF URL: Paste the Shopify file URL
• Container Width: Adjust to fit your theme (e.g., 80–100%)
• Container Height (Desktop): 700–900 px recommended
• Mobile Container Height: 350–500 px
• Content Zoom Level: Increase for better readability
• Auto Slide Duration: Set 0 to disable auto-play
• Background Color: Match your store design
• Direction: Left to Right or Right to Left
• Enable PDF Download Button: Optional
Mobile settings
• Adjust mobile viewport width for best experience
• Test swipe and navigation buttons
Verify & publish
1. Preview desktop and mobile views
2. Test page navigation and zoom
3. Test download button (if enabled)
4. Save and publish your changes
If you need Support, please message us on WhatsApp. We will give you a response just in one minute. Or mail to us, Amzadhossen420360@gmail.com Or Contact Our Support Website : https://friends2a-technology.com/fhopify/contact-us/
Friends2a PDF FlipBook lets you display PDFs as interactive flipbooks directly on your Shopify store. Upload your PDF, paste the file URL, and instantly show a smooth page-flip viewer—no coding required. Customize width, height, zoom level, and mobile layout for a perfect fit. Ideal for catalogs, brochures, manuals, or documents, it keeps visitors engaged and lets them view content without leaving your site.
