- Kaptai Rasta Matha, Chittagong 4221
- Mon – Fri: 8:00AM – 6:00PM
- AmzadHossen420360@gmail.com
apps.liquid.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.
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 %}
Follow these simple steps to start using Announcement Bar Banner by Friends2a Technology in your Shopify store.
Install the app from the Shopify App Store and approve the requested permissions. Once installed, open the app from your Shopify Admin.
Go to:
Online Store → Themes → Customize
Open the theme where you want to display announcement bars.
Click Add section or Add block (depending on your theme), then select one of the available blocks:
Choose the block that best fits your promotion or store message.
Use the built-in settings to personalize your announcement.
Available customization options include:
All changes update instantly in the Theme Editor preview.
After customizing the announcement bar, click Save in the Theme Editor to publish it on your storefront.
Display a clean announcement with text, optional icon, action button, and close button.
Show multiple promotional messages in an auto-rotating slider with navigation controls.
Create urgency with a live countdown timer for flash sales, limited-time offers, and seasonal campaigns.
Display large promotional banners with headings, descriptions, buttons, and optional background images.
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/
Announcement Bar Banner by Friends2a Technology helps merchants display promotions, sales, and important store updates with customizable header announcement bars. Create simple announcements, rotating announcements, countdown timers, and promotion banners without editing theme code. Customize colors, typography, height, buttons, sticky mode, and layouts. Fully responsive, lightweight, and easy to set up for any Shopify store.
Create simple announcement bars with custom text, icons, and buttons.≈ 69 Characters ✅
Display rotating announcement bars with multiple promotional messages.≈ 70 Characters ✅
Add countdown announcement bars to increase urgency for flash sales.≈ 68 Characters ✅
Show responsive promotion banners with images, text, and call-to-action.≈ 76 Characters ✅
Customize colors, height, typography, sticky mode, and layouts easily.≈ 73 Characters ✅
