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

Design help Custom code
1

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: https://preview.webflow.com/preview/p-i-n-eee?utm_medium=preview_link&utm_source=designer&utm_content=p-i-n-eee&preview=337ab432e669ad946c443efe4ec03e06&pageId=602b29f29a149f22a919b315&itemId=602b29f29a149f0aa719b328&mode=preview

Ideally, I would like it to look like this

Screenshot 2021-02-16 182622
Screenshot 2021-02-16 182622587×667 44.3 KB

But I could settle for something like this:

Screenshot 2021-02-16 182418
Screenshot 2021-02-16 182418441×512 31.3 KB

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)

2

Do you need help anymore?

3

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

4

Can you share a new Read-Only Link?

5

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: https://p-i-n-e.webflow.io/product/java-coffee-sock

6

ok!

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

1 Like
7

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.

2021-02-27 19_13_01-Webflow - P I N E
2021-02-27 19_13_01-Webflow - P I N E928×1067 91.3 KB

1 Like
8

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

1 Like
9

Does this still work? I managed to recreate everything in Webflow (create the cms collection for colors, add the code and the color fields for the product) with single color circles but I can’t seem to make it work. The circle when pressed goes black.

Is there any code that I have to use at the backend ?

read only link:
https://preview.webflow.com/preview/sosa-e-store?utm_medium=preview_link&utm_source=designer&utm_content=sosa-e-store&preview=a98e0d6132a78d28ac5a884925a32956&pageId=60ccc7b2e4fe5a3d14f363ab&itemId=60ccc8983c627b36d740dd6e&workflow=preview

1 Like
10

I’m having the same issue. Is there any way you could share the code to get this to work?

Thanks in advance!

11

Hi Chloe! You can find the code on my read_only link, on the products template page (head & body): https://preview.webflow.com/preview/sosa-e-store-8f2711132ac0fbcff326101d37?utm_medium=preview_link&utm_source=designer&utm_content=sosa-e-store-8f2711132ac0fbcff326101d37&preview=2d327247937cc232bb2132aba8fe497a&pageId=60d09179e17fde2541eefa45&itemId=60d09179e17fde707deefa9d&workflow=preview

Sharing the whole code here will break its functionality so I suggest checking out how it is applied on the products template page with the added fields.

Also do checkout my other post on this issue: Linking CMS colors to product variant buttons (creating swatches)