Dynamic title, description, and background change on product variation selection

Store Design
1

I am looking to implement a product page with all of our products that change the title and description when the flavor variation is selected. For reference, I want it to be functional to this web page https://magicspoon.com/products/variety-pack-cereal-case

As an FYI, I have extensive HTML/CSS/JavaScript knowledge.

Any help is greatly appreciated! I’ve been looking everywhere for information on how to do this.

2

The way I do it is set an event listener on the variants, then execute your function based on what’s selected. For example if you want the background color to change, create a CSS rule on the body or page background, and change that class depending on the variant selected.

The way they’re doing it is by loading a new page when clicking a variant (rather than dynamically changing the current page), that goes to the product they selected… I would dynamically change the page instead, so you don’t have to wait for reload.

1 Like
3

Thank you that is a great idea! I’ll let you know how it goes.