Change product page content asynchronously based on option selected

Store Design
, , , ,

Topic summary

Goal: Implement an option-based flavor selector on Shopify (Debut theme) that, when clicked, asynchronously updates the entire product page (images carousel, title, description, variants) and also updates the URL to the selected flavor’s product URL, without a full page reload. Reference behavior: Plum Goodness Body Mist pages.

Key clarifications:

  • The desired behavior involves loading a different product (not just a variant) and swapping in its content dynamically.
  • “Asynchronous” means content updates happen in-page (AJAX), maintaining a seamless experience while updating the browser URL.

Suggestions provided:

  • Initial advice used image alt attributes with a video tutorial (for Dawn theme logic). OP noted it only swaps images for selected variants, not full product content.
  • A second video link was shared; OP said it reloads/redirects the page, which does not meet the async requirement.

Current status:

  • No working, code-level solution or step-by-step strategy was provided in-thread for Debut to fetch and inject another product’s data asynchronously while updating the URL.
  • Discussion remains unresolved; OP still seeks guidance matching the reference behavior. Videos are central to the shared suggestions but do not fulfill the stated requirements.
Summarized with AI on December 29. AI used: gpt-5.
1

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?

2

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…

3

You did not add any video.

4
5

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

6

You need this

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

7

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