Fabric Theme is breaking

Store Design
, ,
1

Hello everyone,

We’re an agency with a few clients using the Fabric theme, and we’d like to share a few things.

We’ve noticed that this is, incredibly, the most complete theme in the Horizon update, even though it’s not the theme that bears the update’s name (haha).

However, a few things have been worrying us. The week the theme was released, the product zoom was buggy. If the client clicked on the product to zoom, they couldn’t exit the zoom, or they couldn’t drag their mouse or touch, which was quite annoying. The solution? They simply removed the zoom feature while still leaving the “Enable Zoom” option within the theme.

Yesterday we had another surprise. Now the menu bar is also buggy, and less than 15 minutes ago they released an update, which said it would fix this, but it hasn’t.

Some things are quite tiresome.

2

@RyseAgency Hey there

thanks for sharing your experience I can totally understand how frustrating that must feel, especially when you’re managing multiple clients and relying on the theme’s stability.

With theme-related bugs (like zoom or navigation issues), the best long-term strategy is usually:

  1. Stay on the latest version – since theme developers roll out patches quickly, always keep your client stores updated and test new versions in a backup duplicate theme before publishing live. That way, you can spot regressions without disrupting customers.

  2. Document issues clearly – whenever you see a bug (like the zoom not exiting or the menu bar glitch), record it with screenshots or a short Loom video. Theme devs appreciate reproducible steps, and it increases the chances of a quick fix in the next update.

  3. Temporary workarounds – while waiting for fixes, sometimes small CSS or JS adjustments in the theme editor can bypass the issue without fully removing the feature (so clients don’t lose functionality). If you’re not comfortable with that, hiding the feature, like you did with zoom, is the safest route.

  4. Direct communication with the theme devs – most premium themes like Fabric are actively maintained. Submitting issues directly through their support channel (instead of only the community) gets things into their dev pipeline faster.

I’d recommend treating updates almost like an app rollout — test → document → apply. That way, your clients won’t feel the hiccups as much, and you’ll stay ahead of new bugs that might sneak in.

Hopefully, that helps make it less tiresome.

3

Hi @RyseAgency ,

Could you please provide me with the URL and password of your store, if possible? This will help me better understand and visualize the issue you’re facing.

Looking forward to your reply!

Best,
Felix

4

Hello @RyseAgency ,

Thanks for bringing this up - I’ve also noticed these bugs with the Fabric theme after the Horizon update.

Product Zoom Issue
The zoom feature can be fixed by overriding the default script. Instead of removing it completely, you can:

  • Disable the default Fabric zoom function.

  • Add a custom lightbox/zoom script (such as Photoswipe or MediumZoom) that works smoothly on both desktop and mobile.
    This way, users still get the zoom experience without being stuck in the modal.

Menu Bar Bug
For the menu issue, it usually comes down to the theme’s JavaScript not re-initializing correctly after navigation. A quick fix is:

  • Re-bind the menu toggle functions after page load (using DOMContentLoaded or Shopify.theme.js).

  • Add a small CSS fallback to ensure the drawer or dropdown doesn’t “lock up” when toggled.

If you’d like me to implement these fixes directly in your Fabric theme, feel free to reach out - my contact details are in my portfolio. You can also check some of my past work and websites here: https://rajatweb.dev/

Thanks!

Rajat | Shopify Expert

5

Hi,

Hope this will help

  • First toggle Image Zoom off in theme settings and test. If that isn’t enough, apply temporary JS safety patch to auto-close any stuck zoom/lightbox.

code (copy into fix-zoom.js) example

// fix-zoom.js — Temporary safety net for stuck zoom/lightbox
(function(){
  function closeAnyZoom() {
    // generic selectors — adjust if you find different classes (see notes below)
    const overlays = document.querySelectorAll('.sf-zoom__overlay, .product-media-overlay, .modal__overlay, .product-media-modal, [data-media-modal]');
    overlays.forEach(o => {
      try {
        // remove open/visible classes
        o.classList.remove('is-open','open','active');
        // hide overlays
        o.style.display = 'none';
      } catch(e){}
    });
    // try to remove no-scroll on <html> if theme uses it
    document.documentElement.classList.remove('no-scroll','disable-scroll');
  }

  // close on Escape
  document.addEventListener('keydown', function(e){
    if (e.key === 'Escape') closeAnyZoom();
  });

  // close when clicking on overlay (click outside the image)
  document.addEventListener('click', function(e){
    const overlaySelectors = ['.sf-zoom__overlay', '.product-media-overlay', '.modal__overlay'];
    for (const sel of overlaySelectors){
      const ov = document.querySelector(sel);
      if (ov && e.target === ov) {
        closeAnyZoom();
        return;
      }
    }
  });

  // safety: if a zoom stays open for > 10s, close it
  setInterval(closeAnyZoom, 10000);
})();

  • Collect console & HAR logs, then file a clear bug report with theme devs / Shopify including logs, screenshots, theme version, and steps to reproduce.

  • For menu bug: test with apps disabled and check console errors — often a single JS error from an app or theme file will break header.