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

Friends2a Technology Jewellery Finder

💎 Friends2a Jewellery Finder

Installation & Setup Guide (Shopify App Block)

Friends2a Jewellery Finder helps jewellery stores create structured multi-level filters such as:

Product Type → Material Type → Price Range

Customers can easily filter and find jewellery collections using dynamic dropdown menus.

✅ Step 1: Install the App

  1. Log in to your Shopify Admin

  2. Go to Apps → Shopify App Store

  3. Search for Friends2a Jewellery Finder

  4. Click Install

  5. Approve required permissions

✅ Step 2: Create Required Navigation Menu

⚠️ This app works based on Shopify Navigation hierarchy.

You must create a 3-level structured menu like this:

Product Type (Top Level)
→ Material Type (Submenu)
→ Price Range (Sub-submenu)

Example Structure (Based on Your Screenshot)

Bracelets & Bangles
→ Diamonds
  → Under £1000
  → £1000 – £2000
  → £2000 – £3000
  → £3000 – £4000
  → £4000 – £5000
  → Over £5000

You can also create:

Necklaces
→ Gold
→ Silver
→ Platinum

How to Create the Menu

  1. Go to Shopify Admin → Content → Navigation

  2. Click Add menu

  3. Name it: Friends2a Jewellery Finder

  4. Add main Product Types

  5. Drag and nest items to create Material and Price hierarchy

  6. Click Save

✅ Step 3: Add the App Block to Your Theme

  1. Go to Online Store → Customize

  2. Open the page where you want to display it (Home page recommended)

  3. Click Add Section

  4. Select:
    Jewellery Finder – Friends2a Jewellery Finder

  5. Position the block

  6. Click Save

✅ Step 4: Configure Dropdown Settings

Inside the Theme Editor (right sidebar), you can:

✔ Set dropdown labels
✔ Enable dropdown search box
✔ Auto-open next dropdown
✔ Pre-select based on page URL
✔ Customize button style and layout
✔ Adjust spacing and width

✅ Step 5: How It Works

  1. App reads Shopify Navigation structure

  2. Detects parent-child relationships

  3. Generates dynamic dropdown filters

  4. On “Search” click, redirects to selected collection page

No coding required.

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/

 

Friends2a Jewellery Finder helps jewellery stores create structured product filters using Shopify navigation. Build multi-level dropdowns for Product Type, Material Type, and Price Range to improve product discovery. Customers can quickly find bracelets, diamonds, gold, silver, or items within specific price ranges. The app works with Online Store 2.0 themes and is fully customizable through the theme editor without coding.

 

✅ Feature 1

Multi-level jewellery product filtering

✅ Feature 2

Filter by material type and price range

✅ Feature 3

Navigation-based dynamic dropdown search

✅ Feature 4

Mobile responsive filter layout

✅ Feature 5

Easy setup with Shopify theme editor

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