- 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 published Google Form.
⦁ A Shopify theme that supports Online Store 2.0.
Get the correct Google Form URL
1. Open your form → click Send.
2. Select the < > Embed tab.
3. Copy the URL inside the iframe src (not the whole code).
Example: https://docs.google.com/forms/d/e/XXXXXXXX/viewform?embedded=true
Add the app block to a page
1. Shopify Admin → Online Store → Customize.
2. Choose the page (Contact, custom, product, etc.).
3. Add section/block → Friends2a Google Forms.
4. Position the block and Save.
Configure the block
⦁ Google Form URL: Paste the iframe src URL.
⦁ Form Max Width: Fit your theme (e.g., 900–1200 px).
⦁ Form Height (Desktop): Start ~1500–1700 px to remove inner scroll.
⦁ Form Height (Mobile): Start ~1700–2000 px.
⦁ Background Color: Optional, match page.
⦁ Hide Footer Text/Links: Toggle on for a clean look (if available).
Verify & fine‑tune
1. Preview on desktop and mobile.
2. If inner scrollbar appears, increase the related height.
3. Adjust Max Width if the form feels too narrow/wide.
4. Test a full submission and confirm success screen.
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 Google Forms lets you embed any Google Form on your store in seconds. Paste your Google Form URL and the form appears inline—no coding needed. Control the iframe height separately for desktop and mobile to keep the view scroll-free. Set a max width for perfect fit with your theme. Optionally hide the extra Google footer text/links for a cleaner look. Fast, responsive, and easy to place on any page so customers can submit responses without leaving your site.
Paste Google Form URL to embed instantly.
Separate iframe height for mobile & desktop.
Set max width to match your theme.
Hide Google footer text/links for clean UI.
Responsive, scroll-free, no-code setup.
