Hello, Our Apps Users
We’ve noticed that some users are experiencing issues with Shopify free apps when using the Horizon (new update) theme and a few other Shopify free themes.
However, this issue does not occur with the Shopify Dawn theme, Shopify core premium themes, or ThemeForest themes.
If you are facing this issue on the Horizon theme or any newly updated Shopify free theme, please review the screenshots we’ve shared and follow the guideline below.

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.

Create file name : apps.liquid  and past it

				
					<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 %}

F2 Iframe Generator

🔟 SEO Installation Guide

F2 Iframe Generator – Installation & Setup Guide

F2 Iframe Generator allows Shopify merchants to embed external websites, tools, or widgets into their store pages using responsive iframe blocks. This guide explains how to install and configure the iframe embed block.

Step 1: Install the App

  1. Log in to your Shopify Admin

  2. Open the Shopify App Store

  3. Search for F2 Iframe Generator

  4. Click Add App

  5. Click Install

Once installed, the iframe generator will be available in your Shopify theme editor.

Step 2: Open Theme Editor

Go to:

Online Store → Themes → Customize

This will open the Shopify theme customization interface.

Step 3: Add the iFrame Block

Inside the theme editor:

  1. Click Add Section or Add Block

  2. Select Apps

  3. Choose F2 Iframe Generator

The iframe block will appear on your page.

Step 4: Add External URL

Paste the URL of the external website you want to embed.

Examples:

  • calculator tools

  • booking systems

  • external dashboards

  • widgets

  • forms

  • embedded web apps

Step 5: Customize the iFrame

You can configure several display settings including:

  • iframe title (accessibility)

  • width percentage

  • desktop height

  • mobile height

  • scrollbar behavior

  • border style and color

  • border radius

  • background color

  • fullscreen support

  • margin spacing

These options allow full control of the embedded layout.

Step 6: Save and Publish

After configuring the iframe:

Click Save in the Shopify theme editor.

Your embedded content will now appear on your Shopify storefront.

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/

F2 Iframe Generator lets Shopify merchants embed external websites, tools, widgets, or dashboards directly inside their store using a responsive iframe block. Add the block from the Shopify theme editor, paste the URL, and customize width, desktop/mobile height, borders, margins, and fullscreen settings. Advanced crop controls allow merchants to remove unwanted parts of the embedded page by trimming the top, left, or right areas, making external content fit perfectly inside Shopify pages without coding.

(~498 chars)

Updated Features (with Crop System)

Feature 1

Responsive iFrame Embed – Display external websites or tools in Shopify pages.

Feature 2

Advanced Crop Controls – Trim top, left, or right parts of embedded pages.

Feature 3

Flexible Size Settings – Customize width and desktop/mobile iframe height.

Feature 4

Style Customization – Adjust borders, radius, colors, margins, and layout.

Feature 5

Fullscreen Support – Allow embedded tools or widgets to open fullscreen.

Hello Our Shopify App Users, If our free apps or premium apps do not work properly with your theme, or if you face any CSS, JS, UI, app block, or section-related issues, please contact us via WhatsApp or email. We will provide you with live support, give you a quick response, and resolve your problem as soon as possible.
WhatsApp Live Chat
This is default text for notification bar
Learn more