😞 Product Color Variant Won't Change Unless Size Is Selected

Hello Friends!

We have been trying to use javascript to make this work, but for some reason the product color won’t change unless the size is picked first.

Is there anyway to circumvent this?

Thank you in advance! :slight_smile:


Here is my site Read-Only: [https://preview.webflow.com/preview/kitchen-ny?utm_medium=preview_link&utm_source=designer&utm_content=kitchen-ny&preview=e85c2707aa2e2d9516dd20610b04b6f7&pageId=60232789cf5bda1398d03c31&itemId=603e7358bc3dd3846d968500&mode=preview]

Hi, @Goncalo_P, welcome to the Webflow Forum! McGuire here from Webflow — just jumping into your project right now. :sunglasses: :sunglasses: :hamburger:

This is a known limitation with our current product variant system, and something we’re looking forward to addressing with a fix. While we don’t currently have a timeline for when something like that can get implemented, can you try implementing this change to see if it works better?

From the product template page:

  1. Select the Option List element in the Navigator
  2. Head over to that Element Settings
  3. Change Preselect default variant to Yes

Shared with CloudApp

1 Like

Hi, @McGuire thank you for the speedy response. It worked :sunglasses: :muscle:

P.S. Thank you for dropping your Webflow knowledge videos, the dry humor keeps me engaged! :joy:

Hey @McGuire just noticed it’s only working on desktop, is there anything I can do to make sure the colors show on mobile as well?

Thanks @McGuire

Where can I define the default variant?

Hi @Goncalo_P I was not able to reproduce the default variant not working on mobile. Can you try deleting the “Add to Cart” button and then re-adding it. Afterwards be sure to publish the site.

Let me know if the issue persists!

Hi @J.Gilman Here is a short video of how to preselect the default variant for the selectors: Screen Recording 2021-04-07....

Let me know if this helps!

Thanks for making the video @johnramos.

I’ve had Preselect default variant set to “Yes” for a while and it doesn’t populate the dropdowns.


Here’s how my dropdowns are displaying.
https://dangerstore-dcc70beec1bce-0a58b8bcd0b88.webflow.io/

Here is my product’s default variant

What else should I check?

J