Variant Display Issue with Impact Theme – Urgent Help Needed

Hi everyone, hope you’re well. I’m recreating the website jovikids.com, which uses the Impact theme, and they’ve implemented color swatches like this:

mfjhyo_0-1729596925493.png

When I tried to recreate the functionality, I couldn’t show color swatches, plus when you hover over them, a title appears. How can I implement that? My website, jovikids.ae, also uses the Impact theme, and I followed this guide. However, according to the guide, I need to create a separate product listing for each color:

Let’s say I don’t have inventory in the pink variant. I set its stock to 0, and it works fine:

But when I do the same for the parent product (black). There’s a glitch. When I load the site, it automatically starts with the blue variant, but black’s images are showing:

When I click on the product, the SKU is blue varient, images are blue varient, but the selected variant is black. I’m not sure what to do. Please help.

I’ve tried to explain everything, but please check jovikids.com and jovikids.ae to understand the issue. Thanks so much for your time, I really appreciate it.

I was able to implement swatches feature for a store.

Reference site: www.kpsclothing.in

If you are looking for something like this please reach out via mail for a convenient conversation.

Thanks
Shadab Ali