Change to the product url when selecting a color?

Highlighted
Tourist
6 0 2

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 Expert
3693 550 893

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
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
1 0 0

Can you ask how to achieve it?

0 Likes
Highlighted
New Member
2 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
Highlighted
Shopify Partner
1435 194 488

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 my solution helped you, please like and accept as solution!
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
Highlighted
Shopify Expert
3693 550 893

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
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
1 0 0

Is there a way to do this with a shopify app ? or only with coding? 

0 Likes
Highlighted
Shopify Expert
3693 550 893

Its better to do with custom code.

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
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
1 0 0

I get the general idea of what your saying here but is there any way you would be able to privde a step-by-step with examples on how to do this?

0 Likes