Quick Summary: Stop losing conversions on dead pixels; learn to map your visual assets to product routes using simple HTML wrappers, structured data schemas, or emergency DOM manipulation.

UX Emergency: Linking Gallery Images to Product Pages Without Breaking Prod

I still wake up in a cold sweat thinking about Black Friday 2018. We were managing a high-traffic lifestyle brand, and the marketing team decided to push a “Visual Merchandising” update to prod-fe-02 roughly an hour before the sale went live. The gallery looked stunning—high-res hero shots of the new inventory. But five minutes into the sale, my Datadog monitors weren’t flagging 500 errors; they were flagging a massive drop in conversion funnel throughput. Why? Because thousands of users were furiously clicking on the gallery images, expecting to be taken to the product page, and absolutely nothing was happening. It was a glorified slideshow.

We fixed it hot, directly on the server (don’t tell compliance), but the lesson stuck: Interactive UI elements that don’t interact are bugs, not features.

The Root Cause: Data vs. Presentation

Why does this happen so often? Whether you are on Shopify, WordPress, or a custom React build, the problem is usually the same: decoupling.

Your “Gallery” component usually accepts a simple array of strings (image URLs). Your “Product” logic lives in a completely different bucket (SKUs, slugs, inventory). When you render the gallery, the code doesn’t inherently know that /img/summer-shirt.jpg is supposed to route to /shop/products/summer-shirt-v1. You have to explicitly build that bridge.

Solution 1: The Quick Fix (The HTML Wrapper)

If you have direct access to the template code (Liquid, PHP, or JSX), stop overthinking it. The oldest trick in the book is simply wrapping your image container in an anchor tag. It’s crude, but it works across every browser known to man.

Pro Tip: Ensure you add display: block to your anchor tag to prevent weird whitespace issues at the bottom of the image.

<!-- The 'Just make it work' approach -->
<div class="gallery-item">
  <a href="/products/retro-sneaker-01" class="gallery-link">
    <img src="/assets/sneaker-thumb.jpg" alt="Retro Sneaker" />
  </a>
</div>

Solution 2: The Architect’s Fix (Schema Mapping)

This is the solution I’d approve in a code review. Instead of feeding your gallery a list of images, feed it a list of objects. If you are using a headless CMS or configuring a JSON data file, restructure your data model. This keeps the logic clean and allows non-technical editors to update links later without pinging Engineering.

Here is what the data structure should look like before it hits your frontend:

// config/gallery-data.json
[
  {
    "id": 101,
    "imageUrl": "https://cdn.techresolve.io/img/jacket-01.jpg",
    "targetRoute": "/products/bomber-jacket",
    "altText": "Bomber Jacket - Olive"
  },
  {
    "id": 102,
    "imageUrl": "https://cdn.techresolve.io/img/boots-04.jpg",
    "targetRoute": "/products/leather-boots",
    "altText": "Leather Boots - Brown"
  }
]

Solution 3: The ‘Nuclear’ Option (JS Injection)

Sometimes you don’t have access to the HTML template because it’s locked inside a third-party plugin, or the backend team is asleep. In this scenario, we use JavaScript to force the links into the DOM after the page loads. It’s “hacky,” and it might cause a layout shift (CLS), but it saves the sale.

Use a data attribute or the image alt text to find the target.

// inject-links.js
document.addEventListener('DOMContentLoaded', () => {
    const images = document.querySelectorAll('.gallery-img');
    
    images.forEach(img => {
        // We stored the slug in the data-link attribute 
        // OR we map it based on filenames (risky but effective)
        const productSlug = img.getAttribute('data-link'); 
        
        if (productSlug) {
            const wrapper = document.createElement('a');
            wrapper.href = `/products/${productSlug}`;
            
            // Insert wrapper before img, then move img inside wrapper
            img.parentNode.insertBefore(wrapper, img);
            wrapper.appendChild(img);
        }
    });
});

Comparison Matrix

Darian Vance

Lead Cloud Architect & DevOps Strategist

With over 12 years in system architecture and automation, Darian specializes in simplifying complex cloud infrastructures. An advocate for open-source solutions, he founded TechResolve to provide engineers with actionable, battle-tested troubleshooting guides and robust software alternatives.

🤖 Frequently Asked Questions