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

[Johnelle_Smith]

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)

[Matzinger (Studio Digital)]

Do you need help anymore?

[Johnelle_Smith]

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

[Matzinger (Studio Digital)]

Can you share a new Read-Only Link?

Share a read-only link | Webflow University

[Johnelle_Smith]

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

[Matzinger (Studio Digital)]

ok!

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

[Matzinger (Studio Digital)]

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.

[Johnelle_Smith]

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