How to develop this product switcher?

Online Store and Theme Development
1

Hi!

I wanted to understand how to build this product switcher, which allows you to navigate to other products from within a product.

Screenshot 2025-04-27 at 2.35.15 PM
Screenshot 2025-04-27 at 2.35.15 PM1068×1372 200 KB

Live page here

also present here

Is this a readily available plugin? or a theme? if not how do I make this?

2

They have a style on the body with the CSS color. This is a plain implementation on how you’d do it:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page 1</title>
  <style>
    html { transition: background-color 0.5s ease; }
    body { margin:0; font-family:sans-serif; display:flex; align-items:center; justify-content:center; height:100vh; }
    a { text-decoration:none; padding:8px 12px; border:1px solid; border-radius:4px; }
  </style>
</head>
<body>
  <main id="main" data-bg="#ffffff">
    <h1>Page 1</h1>
    <a href="/page2.html" class="nav-link">Go to Page 2</a>
  </main>

  <script type="module">
    const main = document.getElementById('main');

    async function loadPage(url, addToHistory = true) {
      const res  = await fetch(url);
      const txt  = await res.text();
      const doc  = new DOMParser().parseFromString(txt, 'text/html');
      const nxt  = doc.getElementById('main');
      const bg   = nxt.dataset.bg;
      // trigger background‐color transition
      document.documentElement.style.backgroundColor = bg;
      // swap content
      main.innerHTML = nxt.innerHTML;
      if (addToHistory) history.pushState(null, '', url);
    }

    // intercept clicks
    document.body.addEventListener('click', e => {
      const a = e.target.closest('a.nav-link');
      if (a && a.origin === location.origin) {
        e.preventDefault();
        loadPage(a.href);
      }
    });

    // back/forward
    window.addEventListener('popstate', () => {
      loadPage(location.pathname, false);
    });

    // set initial bg
    document.documentElement.style.backgroundColor = main.dataset.bg;
  </script>
</body>
</html>

page2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page 2</title>
  <style>
    html { transition: background-color 0.5s ease; }
    body { margin:0; font-family:sans-serif; display:flex; align-items:center; justify-content:center; height:100vh; }
    a { text-decoration:none; padding:8px 12px; border:1px solid; border-radius:4px; }
  </style>
</head>
<body>
  <main id="main" data-bg="#8ecae6">
    <h1>Page 2</h1>
    <a href="/index.html" class="nav-link">Back to Page 1</a>
  </main>

  <script type="module">
    // same script as above…
    const main = document.getElementById('main');

    async function loadPage(url, addToHistory = true) {
      const res  = await fetch(url);
      const txt  = await res.text();
      const doc  = new DOMParser().parseFromString(txt, 'text/html');
      const nxt  = doc.getElementById('main');
      const bg   = nxt.dataset.bg;
      document.documentElement.style.backgroundColor = bg;
      main.innerHTML = nxt.innerHTML;
      if (addToHistory) history.pushState(null, '', url);
    }

    document.body.addEventListener('click', e => {
      const a = e.target.closest('a.nav-link');
      if (a && a.origin === location.origin) {
        e.preventDefault();
        loadPage(a.href);
      }
    });

    window.addEventListener('popstate', () => {
      loadPage(location.pathname, false);
    });

    document.documentElement.style.backgroundColor = main.dataset.bg;
  </script>
</body>
</html>