Variant ID on URL changes when clicking on product variant

Store Design
1

Hi,

I have a collection page template that shows product variants as individual products:

testing collection – Practical Design Store

Clicking on any of the product variants will link to the correct product, which is great.

Currently I have this anchor element:

When the product image/title is hovered, the preview URL shows the correct variant ID.

However, after clicking a product variant, the page loads into the product page, the correct variant ID will show on the URL for a split second before automatically changing to the variant ID of the first product variant.

How can I prevent this reverting behavior?

Thanks!

2

Hi @PracticalDesign ,

I checked and didn’t find product variants at individual products.

You can re-add it, I will help you check it.

3

@LitCommerce Thanks for the reply!

There isn’t supposed to be any variant selector or options on the products in the collection page.

The “products” on the page are actually the 5 variants of the same product. There is only one product under the testing collection. If you click onto any of them, it will link to the same product.

The issue that I tried to explain was that no matter which variant you click into (ex. Head Ache), after the individual product page is loaded, the URL will have the variant ID of Head Ache for a second, and then it will switch to the variant ID of the first product variant (Doctor Doctor), and on the product page, the first variant becomes selected (under the options section) and the product image is showing the first variant.

What I want to achieve is when customers click on the Head Ache variant, it will load the product page with the Head Ache variant selected.

Thanks!

4

Update:

I think I found the reason why the variants are changing to the first one when loaded into a product page: Shopify by default auto-select the first variant of a product when loading the product page.

My website’s theme is based on the Ella theme. I checked their forums and it seems they are charging money for that customization. I tried to follow the guide by Shopify on disabling the auto-select, but they don’t have a guide for the Ella theme, and there aren’t files that the other guides mentioned so I couldn’t test my luck there.

Does anyone have any tips or tricks of achieving this?

5

Hi @PracticalDesign ,

Because each theme will have a different JS structure, so you can’t change it with Shopify’s default instructions.

And the Ella theme will be coded separately, so the best way is to contact them directly and purchase a custom service, it will make sure everything works best for you.

Hope it helps!