when you select color ,it jump to a product url ,so how to show product like this page ?
Topic summary
A user wants to implement variant selection that redirects to unique product URLs, similar to a reference site where selecting a color option navigates to a different product page.
Key clarification: The example site doesn’t use traditional Shopify variants. Instead, it uses Combined Listings — separate products (like sizes 20 and 24) merged into one enhanced listing. Shopify’s Combined Listings documentation provides guidance on this approach.
Recommended solutions:
-
Atlas Options And Redirections app: Creates dynamic product options with variant-based redirections, user-friendly with no coding required.
-
Easify Product Options app: Enables option-based redirection where selecting a color/option automatically redirects to the corresponding product page. Implementation involves creating separate products in Shopify, configuring URL redirects in the app settings, and applying the option set across all related products. A demo with color swatches linking to different product pages illustrates the functionality.
The discussion remains open with multiple app-based solutions offered but no confirmed resolution from the original poster.
Hello
If you’re not comfortable with coding, consider using a Shopify app designed for this purpose:
Atlas Options And Redirections: This app allows you to create dynamic product options and set up redirections based on variant selections. It’s user-friendly and integrates directly.
Best Regard,
Theresa
Hi @Sheller
I checked the product you shared, and actually, the sizes 20 and 24 are not variants of a single product. They are two separate products combined to create an enhanced product listing.
This setup is called Combined listings. You can refer to Shopify’s documentation on Combined listings to achieve the functionality you want.
Here’s the link for more details: Combined listings documentation
Best,
Felix
Hi @Sheller
You can use the Easify Product Options app to achieve that. It allows you to set up option-based redirection, so when a customer selects a color (or any other option), they’ll be automatically taken to the corresponding product page. No need for complex setups or coding.
To give you a better idea, here’s a small headphone demo we created – it shows how each color swatch can link to a different product page seamlessly. Here’s how it works:
- This is the demo, when you click into a color, it will redirect you to its own URL
- This is the app setting, you need to create 3 products separately in Shopify, then use Easify Product Options to attach URL like this:
- Remember to apply this option set to all 3 products
I hope this answer helps solve the problem. If you need further assistance, feel free to reach out to Easify anytime! 