Change Background When Flavor Selected.

Willvanschaik · ‎01-27-2025

Hey team,

I'm looking at creating something like the following pages where when you select a flavour, the background changes to mirror the colour of the flavour and/or packaging.

ProtoMan44 · ‎01-27-2025

@Willvanschaik Hey, thanks for posting here.
look at url bar.
these are products with different product settings.
let me know for yu need further help about it

- A thirsty developer passionate about supporting the community. If you'd like to, you can

Buy me a Coffee.✨️

- Your Shopify Solution Specialist Get a Quote at

ProtoMan44

-

Chat On Whatsapp

Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!

ZestardTech · ‎01-27-2025

Hello @Willvanschaik,

To achieve the design as explained, you will need to make modifications to your Liquid and JavaScript files. Below, I'm sharing a code to guide you through the process.

<body>
<div class="product-page">
<div class="product-display">
<img id="product-image" src="classic-grape.png" alt="Classic Grape">
<h2 id="product-name">Classic Grape</h2>
</div>
<div class="flavor-selector">
<h3>Our Flavors</h3>
<div class="flavors">
<img src="classic-grape-thumbnail.png" alt="Classic Grape"
data-flavor="Classic Grape" data-color="#e6d1f1" data-image="classic-grape.png">
<img src="vintage-cola-thumbnail.png" alt="Vintage Cola"
data-flavor="Vintage Cola" data-color="#ffd9d9" data-image="vintage-cola.png">
</div>
</div>

<script>
const productImage = document.getElementById('product-image');
const productName = document.getElementById('product-name');
const flavorImages = document.querySelectorAll('.flavors img');
const body = document.querySelector('body');

flavorImages.forEach(img => {
img.addEventListener('click', () => {
const flavor = img.getAttribute('data-flavor');
const color = img.getAttribute('data-color');
const image = img.getAttribute('data-image');

productName.textContent = flavor;
productImage.src=image;
body.style.backgroundColor = color;
});
});
</script>
</body>

Note: Focus only on the core logic and include only the essential code required.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

PaulNewton · ‎01-27-2025

Hi @Willvanschaik 👋 that's an advanced customization whose implementation can drastically vary by theme.

To get this customization then contact me for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need

Save time & money ,Ask Questions The Smart Way

Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a ☕ Coffee for more answers or donate to eff.org

Change Background When Flavor Selected.