- 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 %}
Step 1: Install the App
1. Go to the Shopify App Store and click ‘Install app’.
2. Approve the installation in your Shopify admin.
3. After installation, the app will be available under Apps → Friends2a WhatsApp Live Chat.
Step 2: Open the Theme Editor
1. In Shopify Admin, go to Online Store → Themes → Customize.
2. The Theme Editor will open for your active Shopify theme.
Step 3: Add the WhatsApp Live Chat Block
1. Inside the Theme Editor sidebar, click ‘Add section’.
2. Select the Apps tab and choose ‘Friends2a WhatsApp Live Chat’.
3. A new WhatsApp Chat block will appear in your theme, usually at the bottom corner of your storefront.
Step 4: Configure Chat Settings
1. Click on the WhatsApp Live Chat block to open customization settings.
2. Enter your business WhatsApp number (with country code, e.g. +1234567890).
3. Set a default message that customers will see when starting a chat.
4. Choose button position (Bottom Left, Center, or Right).
5. Customize button text, colors, and popup appearance.
6. You can also enable or disable the popup chat window before WhatsApp opens.
Step 5: Save & Preview
1. Once you’ve completed customization, click the ‘Save’ button at the top right.
2. Preview your store – the WhatsApp chat icon will appear as configured.
3. Customers can now directly chat with you using WhatsApp by clicking the button.
Additional Notes
✅ The app is 100% responsive and works on all devices.
✅ You can modify text, colors, or button placement anytime via the theme editor.
✅ No embedded code is needed – the app automatically integrates via theme blocks.
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/
One-tap WhatsApp chat with your business number
Custom greeting, colors, and button text
Choose button position: bottom left/center/right
Optional pre-chat popup for quick prompts
100% responsive; works across all themes
