A user seeks to implement color variant functionality where clicking a color swatch redirects to a separate product URL for that specific color, rather than just changing the variant on the same page. They reference a working example from doyoueven.com and want to replicate this behavior in their Shopify Flow theme.
Current Status:
The original poster appears to have found a solution (based on follow-up comments)
Multiple users are interested in the same functionality
Proposed Solution:
A community member provided a JavaScript implementation that:
Assigns each color swatch a data-product-url attribute containing the target product page URL
Uses event delegation to detect clicks on color swatches
Redirects the browser to the corresponding product URL when clicked
Additional Questions:
One commenter also asked about implementing a “back in stock” email notification feature, though this remains unanswered.
Summarized with AI on October 24.
AI used: claude-sonnet-4-5-20250929.
I have already implement color swatches to my product page but I want something different. I would like when I click a different color of the same product to change and go to that specific color url. Means i want to change product when i click on a other color swatch.
could you pls share how you did it - color - link to same product?
the second question, how did you implement “Follow“ functionality - when product back in stock mail the user.
Make each color swatch hold URL of the product page for that colour, and when clicked use JavaScript to go to that URL.
JavaScript Example
<script>
(function () {
// delegated listener so it works for dynamically-rendered swatches too
document.addEventListener('click', function (e) {
var btn = e.target.closest && e.target.closest('.color-swatch');
if (!btn) return;
var url = btn.getAttribute('data-product-url');
if (!url) return;
// Add a small delay if your theme also has JS that selects variants.
// Usually immediate redirect is fine:
window.location.href = url;
});
})();
</script>