How to highlight selected product with button border color?

Technical Q&A

Topic summary

A Shopify store owner is building a custom liquid block to cross-link products using buttons styled like variant selectors on product pages. The buttons successfully redirect to other products, but they need help implementing functionality to highlight the currently selected product by changing its button border color.

Current Status:

  • Basic redirect functionality works
  • Attempted to match button values with page URL handles to apply an .active-button CSS class
  • Code includes JavaScript for detecting current URL and adding/removing the active class

Technical Challenge:
The developer (self-described as having no coding experience) cannot get the border highlighting to work properly. They’ve tried multiple approaches over several days without success.

Code Approach:

  • Uses radio input buttons with onclick handlers
  • CSS defines .active-button with a red border (#df2935)
  • JavaScript attempts to compare current URL with button values
  • Event listeners on DOMContentLoaded and change events

The posted code appears partially corrupted or reversed in the input, making it difficult to diagnose the specific issue. The developer is seeking guidance on implementing this product selection indicator feature.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’ve been trying to write some code for a custom liquid block for my website: mygarageposter.com (note: the custom liquid block is currently not visible on the live theme, as it isn’t working properly yet), so that products are cross-linked with buttons (same styling as the variant buttons) on the product page.

The code I’ve written so far seems to be working, as -when clicking the button- the page redirects to the other product page.

However, I would like to add some script(?) that allows to colorize the border of the button whenever it matches the current page (so it’s clear to the customer that that specific product is currently selected). I’ve been trying different approaches for the past couple of days, but none of them seem to work. In one of the approaches I tried to match the value of the button, with the page’s url-handle (see code below).

FYI: I have no coding experience. All code I’ve written thus far is by inspecting and combining the code of my variant buttons and the code of other shops that had a cross-linking feature.

Any help on the matter would be much appreciated! :folded_hands:t2:

<variant-radios id="variant-radios-template--16352980369582__main" class="no-js-hidden" data-section="template--16352980369582__main" data-url="/products/my-original-garage-poster" data-shopify-editor-block="{"id":"variant_picker","type":"variant_picker"}">
  <style>
    .active-button {
      border: 2px solid #df2935;
    }
  </style>

  <fieldset class="js product-form__input">
    <legend class="form__label">Base</legend>

    <input type="radio" id="template--16352980369582__main-1-0" name="Poster" value="my-original-garage-poster" form="product-form-template--16352980369582__main" class="product-form__input" onclick="window.location.href='https://mygarageposter.com/products/my-original-garage-poster';">
    <label for="template--16352980369582__main-1-0">
      Poster<span class="visually-hidden">Variant sold out or unavailable</span>
    </label>

    <input type="radio" id="template--16352980369582__main-1-1" name="Poster" value="my-original-garage-poster" form="product-form-template--16352980369582__main" class="product-form__input" onclick="window.location.href='https://mygarageposter.com/products/my-original-garage-poster';">
    <label for="template--16352980369582__main-1-1">
      Framed Poster<span class="visually-hidden">Variant sold out or unavailable</span>
    </label>

    <input type="radio" id="template--16352980369582__main-1-2" name="Poster" value="aluminum-print" form="product-form-template--16352980369582__main" class="product-form__input" onclick="window.location.href='https://mygarageposter.com/en/products/aluminum-print';">
    <label for="template--16352980369582__main-1-2">
      Alu Plate<span class="visually-hidden">Variant sold out or unavailable</span>
    </label>
  </fieldset>

  <script type="application/json">
    document.addEventListener('DOMContentLoaded', function () {
      var radioButtons = document.querySelectorAll('.product-form__input input[type="radio"]');
      var currentURL = window.location.href;

      radioButtons.forEach(function (button) {
        if (currentURL.includes(button.value)) {
          button.parentElement.classList.add('active-button');
        }

        button.addEventListener('change', function () {
          radioButtons.forEach(function (otherButton) {
            otherButton.parentElement.classList.remove('active-button');
          });

          if (currentURL.includes(button.value)) {
            button.parentElement.classList.add('active-button');
          }

          if (button.value === 'my-original-garage-poster') {
            window.location.href = 'https://mygarageposter.com/products/my-original-garage-poster';
          } else if (button.value === 'my-original-garage-poster') {
            window.location.href = 'https://mygarageposter.com/products/my-original-garage-poster';
          } else if (button.value === 'aluminum-print') {
            window.location.href = 'https://mygarageposter.com/en/products/aluminum-print';
          }
        });
      });
    });
  </script>
</variant-radios>