- 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 %}
1. Go to your Shopify Admin → Online Store → Customize.
2. From the Theme Editor, open the left sidebar.
3. Click “Add section”.
4. Switch to the Apps tab.
5. Locate and select Friends2a YMM PartFinder.
6. The app block will appear in your layout — usually under App Wrapper or wherever you want the finder.
Step 2: Configure the Menu Structure
1. Go to the YMM Part Finder settings panel in the left sidebar.
2. Under YMM Menu, click Select.
3. Create or select a Shopify Navigation Menu with this structure:
– Year → top-level
– Make → sub-menu under Year
– Model → sub-sub-menu under Make
Example:
Year
└── 2024
└── Toyota
└── Camry
4. Once selected, click Save.
Step 3: Dropdown Configuration
1. Under the Dropdowns section:
– Dropdown 1 label → “Select Year”
– Dropdown 2 label → “Select Make”
– Dropdown 3 label → “Select Model”
2. Optionally, set:
– “Show dropdown search box” → Enable (adjust number threshold)
– “Automatically open next dropdown” → On/Off
– “Pre-select dropdowns based on current URL” → Off
Step 4: Layout & Styling Options
1. Go to the Layout section:
– Layout type → Vertical (stacked) or Horizontal
– Maximum width → 850 px (example)
– Space between elements → 12 px
2. Icon alignment → Left or Right
3. Button label → “Search”
4. Button style → Primary or Secondary
5. Adjust font size if needed (e.g., 14px)
Step 5: Test Your Finder
1. Save your theme changes.
2. Go to your storefront and test:
– Select Year → Make → Model.
– The search results should update based on your linked menu items.
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/
Feature 1:
Create a Year-Make-Model dropdown menu with smart product mapping.
Feture 2:
Auto-filter compatible parts to improve customer satisfaction and trust.
Feture 3:
Seamlessly integrates with Shopify’s navigation—no coding needed.
Feature 4:
Fully customizable layout, button style, and dropdown design.
Feature 5:
Lightning-fast search optimized for automotive and machinery stores.
