Want to redirect customers to another product based on selected variant

[hamza44]

I exactly want to copy this page
https://www.coolmark.nl/nl/artnr/7100104/mitsubishi-heavy-industries
Like to redirect customer based on selected variant.how i can do this.Thanks

[Guleria]

Hello @hamza44 ,

You have to use metafields with variants so the admin can insert target URL with each variant. After the modify the code and and on click of the variant redirect it to the target URL.

Thanks

[hamza44]

Its not based on one variant option.we have 4 products options and customer should be redirected to new url if customer changes any varint from any option.
I added 4th variant option through shopify app but it is now showing varinat id in url.Any idea how we can  show variant id of selected variant in shopify url?

[Miguelblanton]

Hi @hamza44 

To redirect customers based on the selected variant on the page https://www.coolmark.nl/nl/artnr/7100104/mitsubishi-heavy-industries, you can use JavaScript to detect the variant selection and perform the redirect accordingly. Here's an example code snippet:

<script>
// Get the selected variant
var variant = document.getElementById("variant-selector").value;

// Define the redirect URLs based on variants
var redirectUrls = {
"variant1": "https://www.example.com/variant1",
"variant2": "https://www.example.com/variant2",
"variant3": "https://www.example.com/variant3"
// Add more variants and corresponding URLs as needed
};

// Redirect the customer based on the selected variant
if (variant in redirectUrls) {
window.location.href = redirectUrls[variant];
}
</script>

Replace "variant1", "variant2", etc. with the actual values representing the variants you have, and "https://www.example.com/variant1", "https://www.example.com/variant2", etc. with the corresponding redirect URLs for each variant.

Note: This code assumes that the variant selection is done using a <select> element with the id "variant-selector". Make sure to update the code to match the actual HTML structure of the page you want to modify.

[hamza44]

Shopify allows 3 variants options so i added 4th option through app but it is not showing variant id .so how i can get variant id of 4th option?

[hamza44]

Please check thsi link.I created 4th and 5th option through app but after selecting the variants from 4th and 5th option It is not showing variant id in url
Use password "stowld"
https://aircoworks.myshopify.com/products/7100001?variant=45447351861535

[Guleria]

Are the 4th and 5th options rendered with the same code as default 3 ?  
 I don't think they are so please first make them compatible with the default code.

[Miguelblanton]

Hi @hamza44  hopefully it will be helpful for you 

To get the variant ID of the 4th option in Shopify, you can use the Shopify API to retrieve the product variants and their IDs. Here's an example of how you can do it using the Shopify API in Javascript&colon;

// Make a GET request to fetch the product data
fetch('/admin/api/2021-09/products/7100001.json')
.then(response => response.json())
.then(data => {
// Extract the variants from the product data
const variants = data.product.variants;

// Find the 4th variant and retrieve its ID
const fourthVariant = variants[3]; // Assuming the 4th variant is at index 3
const fourthVariantId = fourthVariant.id;

// Use the variant ID as needed
console.log('Variant ID:', fourthVariantId);
})
.catch(error => {
console.error('Error:', error);
});

Replace '/admin/api/2021-09' with the appropriate API version for your Shopify store. This code will fetch the product data for the specified product (7100001 in this case) and retrieve the variant ID of the 4th variant from the response.

Note: You'll need to have the necessary API credentials and permissions to access the Shopify API.