Troubleshooting

Most issues fall into one of a handful of buckets. This page covers the common ones with the actual fix. If yours isn’t here, email support and we’ll add it.

My section doesn’t appear in the Add Section list

Three usual causes:

• Liquid syntax error. Shopify hides sections with syntax errors. Open Edit code, click the section file, and check for a red error indicator on the left. Common culprits: an unclosed {% if %}, a missing {% endschema %}, or HTML pasted with smart quotes instead of straight quotes.
• Wrong template type. Some sections only render on specific template types — Notify When Back and Variant Picker Pro require a product context, Thank You Page Upsell requires the order template. Check the section’s install steps for which templates it supports.
• Theme cache. Hard refresh the theme editor (⌘ Shift R on Mac, Ctrl Shift R on Windows). Shopify’s editor occasionally caches the section list.

The cart drawer / count doesn’t update after add-to-cart

modblo sections listen for the cart:updated event. If you’re using a theme’s native add-to-cart (or a different third-party app), it may not dispatch this event.

Fix: dispatch the event yourself after any successful cart mutation. Add this once in your theme.liquid:

<script>
  // Bridge native theme cart events to modblo
  document.addEventListener('cart:refresh', () => {
    document.dispatchEvent(new CustomEvent('cart:updated'));
  });
  // Or wrap your theme's fetch:
  const origFetch = window.fetch;
  window.fetch = function (...args) {
    const result = origFetch.apply(this, args);
    if (typeof args[0] === 'string' && args[0].includes('/cart/')) {
      result.then(() => document.dispatchEvent(new CustomEvent('cart:updated')));
    }
    return result;
  };
</script>

Read JavaScript events for the full event reference.

Mobile Bottom Nav covers content at the bottom of the page

The Mobile Bottom Nav adds padding-bottom to body so content can scroll past it, but if your theme applies padding to body already, the styles can collide.

Fix: scope the offset to a wrapper element instead. In your theme.scss.liquid:

@media (max-width: 768px) {
  body {
    padding-bottom: 0 !important;
  }
  main, .main-content {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0));
  }
}

Variant Picker Pro shows the wrong variant after page reload

The picker reads the ?variant=ID URL query string on load. If your theme strips that or rewrites the URL on PDP load, the picker defaults to the first variant.

Fix: in your theme’s product template, ensure the URL is preserved. Most themes do this by default — if yours doesn’t, bind the variant id from your theme’s state instead:

<script>
  // Run this AFTER your theme initializes its variant state
  document.addEventListener('DOMContentLoaded', () => {
    const variant = window.theme && window.theme.product
      ? window.theme.product.selected_variant_id
      : null;
    if (variant) {
      const url = new URL(window.location.href);
      url.searchParams.set('variant', variant);
      history.replaceState({}, '', url);
    }
  });
</script>

The popup never fires

Most common cause: it already fired once and your dismiss is remembered.

• Open the browser console and run localStorage.removeItem('cbPop-{section-id}'). You can find the section id in data-section-id on the popup’s root element. Then refresh.
• Or, in the theme editor, change the Re-show after dismiss (days) setting to 0 to make the popup re-fire on every visit while you’re testing.
• Other causes: trigger set to scroll on a page that isn’t scrollable, or trigger set to exit-intent on mobile (mobile gets a 30-second time fallback instead).

My Custom Liquid block shows raw code

This means the textarea got pasted as escaped HTML. Click the Custom Liquid section in the editor, clear the textarea, and re-paste with plain text formatting (⌘ Shift V on Mac usually does it).

A modblo section conflicts with my theme’s own section

Most often this happens with sticky-add-to-cart sections (themes ship their own) or mega menus. Fix by removing the theme’s version:

Removing a theme’s built-in section

• In Customize, find the conflicting section in the left panel and click Remove.
• Or, in Edit code, find the conflicting CSS and either comment it out or scope it more tightly so it doesn’t collide. modblo CSS is namespaced under .modblo- classes — yours probably isn’t.

My Lighthouse score dropped after installing a section

Every modblo section is performance-graded (95+ Lighthouse) on its own. If you’re seeing a drop, the cause is usually:

• Unoptimized images in section settings. Use Shopify CDN URLs (the image_picker setting type does this automatically) instead of pasting external URLs.
• Layered third-party scripts. Each app you don’t actually need is a network request and a render-blocking parse. The point of modblo is to remove those — make sure you’re actually uninstalling the apps you replaced.
• Theme JS still loading the replaced feature. If you installed CB Mega Menu Pro but your theme’s native menu JS still loads, you’re paying twice. Find the theme’s nav JS file and either remove it from the theme’s asset chain or empty it out.

Still stuck?

Email support@modblo.com with:

• The section / block slug.
• Your theme name and version.
• A link to the page where the issue shows up.
• A screenshot or short screen recording, if visual.