- 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 %}
Friends2a Google Calendar lets you embed your Google Calendar directly into your Shopify store. This document explains how to set up and configure the calendar for a clean, responsive display.
Prerequisites
– A published Google Calendar or Appointment Schedule
– A Shopify store with an Online Store 2.0 compatible theme
Get Google Calendar Embed URL
1. Open Google Calendar
2. Go to Settings
3. Select Settings for my calendars
4. Choose the calendar you want to embed
5. Scroll to Integrate calendar
6. Copy the Embed URL from the iframe src (not the full iframe code)
Example:
https://calendar.google.com/calendar/embed?src=XXXXXXXX
Add App Block to Page
1. Go to Shopify Admin
2. Navigate to Online Store → Customize
3. Select a page (Home, Contact, Booking, or custom page)
4. Click Add section/block
5. Choose Friends2a Google Calendar
6. Position the block on the page
7. Click Save
Configure Calendar Settings
⦁ Google Calendar URL: Paste the iframe src embed URL
⦁ Calendar Max Width: 1000–1400 px
⦁ Calendar Height (Desktop): 1100–1300 px
⦁ Calendar Height (Mobile): 1500–1800 px
⦁ Background Color: Optional
⦁ Border Radius & Padding: Optional
Verify & Adjust
1. Preview the page on desktop and mobile
2. Increase height if inner scrollbars appear
3. Adjust max width if layout feels narrow or wide
4. Test date navigation and appointment visibility
Completion
Your Google Calendar is now embedded inline on your Shopify store. Customers can view availability and schedules without leaving your site.
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/
Embed Google Calendar on your store instantly
Show availability with Google Calendar embed
Add Google Calendar to your store, no code
Simple Google Calendar embed for Shopify
