Change section background based on which variant is selected

Store Design
1

Hi All,

I am building my new site, and am currently trying to change the background of the product details section based on which variant is selected.

For example:

  • Variant A selected = Red background
  • Variant B selected = Blue background

I currently have the following implemented as a Custom Liquid block on the main editor page, but it’s in no way dynamic:

.very-large-row-under, .breadcrumbs-container {
background: red !important;
}

(this will change the section background and breadcrumb container background to red)

My question is, what do I need to add to this to have the background change colour depending on the variant selection? I have tried exploring changes based on the URL (as each variant has a unique path), but that didn’t work as expected.

Any advice is welcomed.

2

Hello,

Can you share your website link? The task is doable, however, it can get pretty complex. If you don’t have coding experience, I’d suggest to hire a developer.

Cheers!

3

@GabrielS , sorry, yes - the website is:

https://www.rayvox.co.uk/products/resono

Password: MXV@krXyF392Yxb@8

Let me know what you think once you’ve had a look. I’m happy to hire someone, but would like to get an idea of the scope required.

4

One way to have the background changed based on the selected label can be through Javascript.

Something similar to the below:

if label is Midnight Black, make the background black.

5

Hi @Guyv

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

  • Go to Online Store->Theme->Edit code theme.liquid paste my code before element

Hope my solution works perfectly for you!

Best Regards;

PageFly

6

@PageFly-Victor unfortunately this did not work.

7

Hi @RayvoxLtd ,

There are a few ways. Like you mentioned inspecting the URL, as well the click event when a variant is selected. Do all your products have the colour in the name? If so it’s a JS code snippet would do the trick.

Best,

Sam

8

Can you share a screenshot of the location where you added the code?