Change to the product url when selecting a color?

New Member
2 0 1

Hi

 

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.

 

Example 1: https://gymshark.com/products/gymshark-lounge-joggers-charcoal-marl

Example 2: https://boysandarrows.com/collections/swim-bikini-tops/products/abetting-ava-top-slate

 

I have an idea on how to do it but I would like to ask if anyone has any suggestions or a tutorial?

 

(Without Plugin)

 

Thank you

1 Like
Highlighted
Shopify Partner
1747 289 372

Hi,

For that you must knowledge of liquid + html

You can add other product handle in product tag and manage by this tag.

let me know if you need any help.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
New Member
1 0 0

Can you ask how to achieve it?

0 Likes
New Member
1 0 0

Could you please explain how you would do this?  I want each specific color selection to go to the product page specific to that color of the same product.  We have individual product pages for our color variations for one of our products because we want to give each color variation exposure on our main product page.  But when a customer selects the specific product page, we want the other color variations to be available; and once they click on one of the variations, it should take them to the product page of that specific color. Please advice how we can do this

0 Likes
Astronaut
875 104 194

You can do this with javascript or jQuery. Say you made a new product-template for this specific product. You can give your swatches data attributes to store your product urls, then take the current url and split it up and add the data attribute of the swatch you clicked on to the end of your url and load it in the same window. Here's a codepen showing how you might achieve this (in the codepen I open it in a new window just so you can see the url -- notice it changes from red-shirt to green-shirt to blue-shirt etc depending on what you click): 

 

https://codepen.io/ninthony/pen/LYPWomj

 

Please note this is a jQuery example. You likely have jQuery already on your store, but if not you'll need to link to it in your theme.liquid in the header.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Shopify Partner
1747 289 372

Yes, @Ninthony  is right also we can manage it by product metafield to achieve this.

For that you have to add color and product handle in product metafield if you have diffrent  color of most of product, After that we can split it on product page and manage like swatches or any other design and we can redirect to specific page. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes