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

Highlighted
New Member
4 0 0

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. 

0 Likes
Highlighted
Shopify Expert
875 72 205

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.

 

Founder of Speed Boostr (Shopify optimization and dev agency).
Creator of Theme Scientist (A/B testing app).
Creator of Order Automator (app that auto tags + fulfills orders, send emails).
Creator of Tip Jar (add a tip button to your store).
Creator of Shopify Analyzer (first performance analysis tool specifically for Shopify sites).
My team also builds custom apps and automated solutions.
Enjoy the adventure!
Highlighted
New Member
4 0 0

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

0 Likes