Friends2a Google Forms

  • Home
  • Friends2a Google Forms
Very Important Note: If you paste this code in all themes, you will find additional settings inside the apps section. Therefore, I recommend that no matter which theme you are using, you should paste this code in the Sections folder under the file name apps.liquid.
 
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 Video we’ve shared and follow the guideline below.

Create file name : apps.liquid  and past it

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.

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.

 

				
					{%- style -%}
  .apps-section-{{ section.id }} {
    background-color: {{ section.settings.bg_color }};
    {% if section.settings.bg_image != blank %}
      background-image: url({{ section.settings.bg_image | image_url: width: 2400 }});
    {% else %}
      background-image: none;
    {% endif %}
    background-size: {{ section.settings.bg_size }};
    background-position: {{ section.settings.bg_position }};
    background-repeat: {{ section.settings.bg_repeat }};
    background-attachment: {{ section.settings.bg_attachment }};
    margin-top: {{ section.settings.margin_top }}px;
    margin-bottom: {{ section.settings.margin_bottom }}px;
    padding-top: {{ section.settings.padding_top }}px;
    padding-bottom: {{ section.settings.padding_bottom }}px;
    min-height: {{ section.settings.section_height }}px;
    position: relative;
    overflow: hidden;
  }

  .apps-section-{{ section.id }} .apps-section__inner {
    position: relative;
    z-index: 1;
    min-height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .apps-section-{{ section.id }} .apps-section__blocks {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items:
      {% case section.settings.block_alignment %}
        {% when 'left' %} flex-start
        {% when 'center' %} center
        {% when 'right' %} flex-end
      {% endcase %};
  }

  .apps-section-{{ section.id }} .apps-section__block-item {
    width: 100%;
    max-width: 100%;
  }

  .apps-section-{{ section.id }} .apps-section__block-item > * {
    max-width: 100%;
  }

  @media screen and (max-width: 749px) {
    .apps-section-{{ section.id }} {
      margin-top: {{ section.settings.margin_top_mobile }}px;
      margin-bottom: {{ section.settings.margin_bottom_mobile }}px;
      padding-top: {{ section.settings.padding_top_mobile }}px;
      padding-bottom: {{ section.settings.padding_bottom_mobile }}px;
      min-height: {{ section.settings.section_height_mobile }}px;
      background-attachment: scroll;
    }
  }
{%- endstyle -%}

<div class="apps-section-{{ section.id }}">
  <div class="apps-section__inner {% if section.settings.include_margins %}page-width{% endif %}">
    <div class="apps-section__blocks">
      {% for block in section.blocks %}
        <div class="apps-section__block-item" {{ block.shopify_attributes }}>
          {% render block %}
        </div>
      {% endfor %}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Apps",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "checkbox",
      "id": "include_margins",
      "default": true,
      "label": "Include page margins"
    },
    {
      "type": "header",
      "content": "Background"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Background color",
      "default": "#ffffff"
    },
    {
      "type": "image_picker",
      "id": "bg_image",
      "label": "Background image"
    },
    {
      "type": "select",
      "id": "bg_size",
      "label": "Background size",
      "default": "cover",
      "options": [
        { "value": "cover", "label": "Cover" },
        { "value": "contain", "label": "Contain" },
        { "value": "auto", "label": "Auto" }
      ]
    },
    {
      "type": "select",
      "id": "bg_position",
      "label": "Background position",
      "default": "center center",
      "options": [
        { "value": "left top", "label": "Left top" },
        { "value": "center top", "label": "Center top" },
        { "value": "right top", "label": "Right top" },
        { "value": "left center", "label": "Left center" },
        { "value": "center center", "label": "Center center" },
        { "value": "right center", "label": "Right center" },
        { "value": "left bottom", "label": "Left bottom" },
        { "value": "center bottom", "label": "Center bottom" },
        { "value": "right bottom", "label": "Right bottom" }
      ]
    },
    {
      "type": "select",
      "id": "bg_repeat",
      "label": "Background repeat",
      "default": "no-repeat",
      "options": [
        { "value": "no-repeat", "label": "No repeat" },
        { "value": "repeat", "label": "Repeat" },
        { "value": "repeat-x", "label": "Repeat horizontally" },
        { "value": "repeat-y", "label": "Repeat vertically" }
      ]
    },
    {
      "type": "select",
      "id": "bg_attachment",
      "label": "Background attachment",
      "default": "scroll",
      "options": [
        { "value": "scroll", "label": "Scroll" },
        { "value": "fixed", "label": "Fixed" }
      ]
    },
    {
      "type": "header",
      "content": "Desktop spacing"
    },
    {
      "type": "range",
      "id": "margin_top",
      "min": 0,
      "max": 300,
      "step": 4,
      "unit": "px",
      "label": "Margin top",
      "default": 0
    },
    {
      "type": "range",
      "id": "margin_bottom",
      "min": 0,
      "max": 300,
      "step": 4,
      "unit": "px",
      "label": "Margin bottom",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 300,
      "step": 4,
      "unit": "px",
      "label": "Padding top",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 300,
      "step": 4,
      "unit": "px",
      "label": "Padding bottom",
      "default": 0
    },
    {
      "type": "range",
      "id": "section_height",
      "min": 0,
      "max": 1200,
      "step": 20,
      "unit": "px",
      "label": "Section minimum height",
      "default": 0
    },
    {
      "type": "header",
      "content": "Mobile spacing"
    },
    {
      "type": "range",
      "id": "margin_top_mobile",
      "min": 0,
      "max": 200,
      "step": 4,
      "unit": "px",
      "label": "Mobile margin top",
      "default": 0
    },
    {
      "type": "range",
      "id": "margin_bottom_mobile",
      "min": 0,
      "max": 200,
      "step": 4,
      "unit": "px",
      "label": "Mobile margin bottom",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_top_mobile",
      "min": 0,
      "max": 200,
      "step": 4,
      "unit": "px",
      "label": "Mobile padding top",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_bottom_mobile",
      "min": 0,
      "max": 200,
      "step": 4,
      "unit": "px",
      "label": "Mobile padding bottom",
      "default": 0
    },
    {
      "type": "range",
      "id": "section_height_mobile",
      "min": 0,
      "max": 800,
      "step": 20,
      "unit": "px",
      "label": "Mobile section minimum height",
      "default": 0
    },
    {
      "type": "header",
      "content": "Block alignment"
    },
    {
      "type": "select",
      "id": "block_alignment",
      "label": "Block alignment",
      "default": "left",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ]
    }
  ],
  "blocks": [
    { "type": "@app" }
  ],
  "presets": [
    { "name": "Apps" }
  ]
}
{% endschema %}

Friends2a Technolgy Google Forms

Google Forms PopUp

Google Forms Widget

Friends2a Google Forms — Installation & Setup Guide

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/

Paste a Form link and show it inline instantly

Friends2a Google Forms makes it easy to integrate Google Forms into your Shopify store. With a simple URL paste, instantly embed forms for signups, feedback, bookings, and more. No coding required! Customize the iframe height for both desktop and mobile, hide Google footer links for a cleaner look, and control popup behavior. The responsive design ensures a seamless experience, allowing your customers to submit forms directly without leaving your site

  • Instant Google Form Integration:
    • Embed Google Forms in seconds by simply pasting the form URL into your Shopify store. No coding or technical setup required.
  • Responsive Design with Desktop & Mobile Customization:
    • Easily adjust iframe height and width for desktop and mobile views to ensure your forms look great across all devices.
  • Popup Form Display:
    • Display Google Forms as popups for gathering leads, feedback, RSVPs, and more, with customizable settings for when and how the popup appears.
  • Clean UI with Google Footer Link Removal:
    • Optionally hide Google footer links for a sleek, professional UI that keeps your store clean and focused on your content.
  • Advanced Cropping and Behavior Controls:
    • Fine-tune the visibility of your embedded forms with cropping options for top, bottom, left, and right edges. Adjust popup behavior for better user experience, including display delay and limiting visibility to one-time per user.
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