Streaming live at 10am (PST)

*Will Pay for Help* E-commerce - Customizing product color variant

Willing to hire someone who can help

Hello Webflowers!

I’m am looking to see if it’s possible to customize the color variant display on the product page of this e-commerce I’m working on. I’ve seen older posts on the forum that suggested creating a different product item for each of the different colors, but I’m wondering if there’s a better way since the update.

Here is the preview link: Webflow - P I N E

Ideally, I would like it to look like this

But I could settle for something like this:

I’m wondering if there is a simple code like this:

[data-option-text="blue"] { background-color: blue; }

Any help is greatly appreciated! TIA

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Do you need help anymore?

Hey! Yes, I do! I can get in contact with you?

Can you share a new Read-Only Link?

Right now, I got it to show 1 color per circle. Now, I’m looking to see if I can make it show 2 colors per circle.

Let me know if you can help!

https://preview.webflow.com/preview/p-i-n-e?utm_medium=preview_link&utm_source=designer&utm_content=p-i-n-e&preview=337ab432e669ad946c443efe4ec03e06&pageId=602b29f29a149f22a919b315&itemId=602b29f29a149f2ea319b37f&mode=preview

Published site: P I N E

ok!

I will take a look at at in 1-2 days :wink:

1 Like

Instead of this:

    [data-option-label="Black"] {
    background-color: dimgrey!important;
    }

Go with this:

    [data-option-label="Black"] {
    background: linear-gradient(to bottom, #1F4E79 0%, #1F4E79 50%, #ddd 50%, #ddd 100%);
    }

#1F4E79 0%, #1F4E79 50%, is your top color

#ddd 50%, #ddd 100% is your bottom color

Would this help?


You can add dynamic fields inside your code.
Maybe you can use it for your list of color so that you insert the values dynamically and there is no need to list all color-variants.

1 Like

Wow! This is perfect, that did it! Thank you so much for taking the time to look into it! :pray:t5: :sparkles:

1 Like