Fix CLS Issues on Mivamerchant (Layout Shift) | OpsBlu Docs

Fix CLS Issues on Mivamerchant (Layout Shift)

Stabilize Miva Merchant layouts by sizing product images, reserving space for extension widgets, and constraining category grid cards.

General Guide: See Global CLS Guide for universal concepts and fixes.

What is CLS?

Cumulative Layout Shift measures visual stability. Google recommends CLS under 0.1. Miva Merchant generates CLS from product images loading without dimensions, extension widgets injecting content, and variable-height product listings.

Miva-Specific CLS Causes

  • Product images without dimensions -- Miva's default templates output <img> tags without width/height
  • Extension widget injection -- payment badges, trust seals, and review widgets load after initial render
  • Product grid variability -- products with different name lengths and optional fields create inconsistent card heights
  • Promo/sale banners -- dynamically-inserted promotional banners push content down
  • Faceted navigation loading -- category filter widgets render after page load

Fixes

1. Add Image Dimensions to Product Templates

<!-- In your product display template -->
<div class="product-image" style="aspect-ratio: 1/1; overflow: hidden; background: #f5f5f5;">
  <img
    src="&mvt:product:image:url;"
    width="800" height="800"
    alt="&mvte:product:name;"
    loading="lazy"
    style="width: 100%; height: 100%; object-fit: contain;"
  >
</div>

/* Consistent product grid cards */
.product-card { min-height: 350px; contain: layout; }
.product-card .product-name { max-height: 3em; overflow: hidden; }
.product-card .product-price { min-height: 1.5em; }

2. Reserve Space for Extension Widgets

/* Trust seal badges */
.trust-seal-container { min-height: 60px; contain: layout; }
/* Review stars */
.review-widget { min-height: 25px; contain: layout; }
/* Payment icons */
.payment-icons { min-height: 40px; contain: layout; }

3. Fix Promo Banner CLS

.promo-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; }
/* Or reserve space with a known height */
.promo-banner-slot { min-height: 40px; }

4. Stabilize Category Navigation

.faceted-nav { min-height: 400px; contain: layout; }
.category-filters { min-height: 300px; contain: layout; }

5. Preload Fonts

<link rel="preload" href="/mm5/themes/yourtheme/fonts/body.woff2" as="font" type="font/woff2" crossorigin />

Measuring CLS on Miva

  1. Chrome DevTools Performance tab -- record page loads on product and category pages
  2. Test product pages with/without extensions -- disable extensions to isolate CLS sources
  3. Mobile testing -- product grids reflow significantly on mobile
  4. PageSpeed Insights for field data
Nach oben