Change product page content asynchronously based on option selected

[Aliasgar]

I run an e-commerce store called setu.in, which operates on Shopify's Debut theme. I'm looking to enhance the functionality of our product pages by integrating a feature that allows customers to select different product flavors directly from the product page. Specifically, I envision a user interface where clicking on a flavor option automatically updates the image carousel and variant selections to reflect the chosen flavor. Additionally, the product URL should update to a URL specific to the selected flavor. This entire process should occur asynchronously to ensure a seamless user experience. A good example of what I aim to achieve can be found on this product page: Plum Goodness Body Mist.

This functionality is precisely what I want to replicate. As a developer, I'm seeking a strategic approach or guidelines on how to implement similar features on a website using the Debut theme. Could you provide some advice on the best way to achieve this?

[gr_trading]

Hi @Aliasgar ,

Code is more typical what is looks, however this is doable with the help of alt attributes of image tag.

For implementation logic request you to refer the below video.

we have did this for DAWN but logic would be same for Debut too.

hope this will help…

[Aliasgar]

You did not add any video.

[Aliasgar]

This is not what I want to do. This just updates the images based on the variants selected. If you see the reference page I shared they are updating the page content with the page URL to that flavor's page. It's not a variant, it's an actual product that is getting fetched with its title, description, and product images. Adding the link again for reference:

https://plumgoodness.com/products/plum-bodylovin-orchid-you-not-body-mist

[gr_trading]

You need this

https://youtu.be/lSDlOLozdUQ?si=KdwGM6hIE6kRvLjj

[Aliasgar]

This is similar to what I want, but here it reloads/redirects the page. I want everything to happen asynchronously.