Product page URL doesn't include variant id

Store Design

Topic summary

A product page with color variants fails to update the URL with variant IDs when users select different options. The expected behavior is for the URL to append ?variant=[ID] when clicking variant swatches.

Root Cause:
The site uses custom hardcoded theme (not a standard Shopify theme), and the swatch click function wasn’t updating the browser URL.

Solution Provided:
A JavaScript code snippet was shared that:

  • Captures the variantid attribute when .pdp-colors elements are clicked
  • Constructs a new URL with the variant parameter
  • Updates the browser history using window.history.replaceState()

The code should be added at the end of the script (around line 23, replacing lines 6-142 in the original implementation).

Outcome:
The original poster confirmed the solution worked perfectly. Another user later requested similar help for the Venue theme, with assistance offered.

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

Hi Experts,

This is the product page we have issues with: https://swished.co.uk/products/swished-pop-up-tent

When a visitor clicks on each variant, the URL should include the variant ID, but it doesn’t.

For Grey variant, the URL SHOULD be this: https://swished.co.uk/products/swished-pop-up-tent?variant=40897678409891

For Orange variant, URL should be this: https://swished.co.uk/products/swished-pop-up-tent?variant=40670969069731

The site was created with 100% hard code, not with a Shopify theme. Here is the entire code for the product :


{% liquid
  for variant in product.variants
  if variant.metafields.global.color_hex and variant.metafields.global.color_hex != blank
  assign has_color = true
  break
  endif
  endfor
%}
{%- assign current_variant = product.selected_or_first_available_variant -%}

I hope someone here can help. Stay safe

2

Here it is

hamzasgd_0-1657767392713.png
hamzasgd_0-1657767392713.png1196×768 200 KB

3

Your PDP swatch click function is not working here is the working code

$('.pdp-colors').click(function() {
    console.log("clicked")
    console.log($(this).attr("variantid"))
    var current_var_id  = $(this).attr('variantid');
    if(current_var_id != '' && current_var_id != undefined){      
      var newurl = window.location.protocol + '//' + window.location.host + window.location.pathname + '?variant=' + current_var_id;
	  window.history.replaceState({path: newurl}, '', newurl);
    }
  });

watch this
https://www.loom.com/share/fa41479944484922995ff983e195a30a

1 Like
4

Hi @hamzasgd ,

Where will I add the code?

EdgarPateno_1-1657768303314.png
EdgarPateno_1-1657768303314.png871×532 36.7 KB

5

Yes at the end of the script line 236 to 241 replace that code with mine.

6

Hi @hamzasgd ,

From the bottom of our hearts, we thank you for your time and help. It worked perfectly.

Stay safe

7

@EdgarPateno thanks don’t forget to like also.

1 Like
8

Hello, can you please help me with the code that I need to add for the same issue on Venue theme? Thanks!

9

@vld Yes

1 Like
10

Let me know, I will be waiting on it. Thank you so much

11

@vld did you apply the solution I provided above?