variant picker error on product page

Store Design
,

Topic summary

A user customized CSS in the Dawn theme to display product variants in a single row instead of the default stacked layout. While the visual arrangement works as intended, clicking on variant options causes the entire row to briefly duplicate, creating a buggy appearance on both desktop and mobile.

Technical Details:

  • The issue occurs when using custom CSS with display: flex and width: 33% properties on the variant-selects element
  • Most noticeable on products with 3 variants (e.g., the Cozy Plush Rabbit Slippers product)
  • Screenshots show the duplication glitch during variant selection

Attempted Solutions:

  • One responder provided alternative CSS using flex: 1 and flex-wrap: wrap properties, but noted this wouldn’t achieve the exact 1-row, 3-box layout due to long content
  • The original poster confirmed the duplication bug persists even with the suggested CSS modifications

Current Status: The issue remains unresolved. The user temporarily disabled the custom CSS but is seeking a fix that maintains the desired layout without the duplication glitch.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hi, I am using Dawn theme and my website is domisana.com

I recently coded my CSS to make my variants in the same row since this is not default option for my theme.

I got the results I want

Screenshot_17.png
Screenshot_17.png382×236 5.96 KB

But now there is an error both on PC and mobile whenever I click on some of the variants entire row duplicates like this for a second, giving really buggy feeling, this is what it looks like

Screenshot_18.png
Screenshot_18.png356×495 16.3 KB

I disabled this CSS temporary but does some know how to fix this?

For example you can try to test it on this page https://domisana.com/products/cozy-plush-rabbit-slippers

since this product has 3 variants and it’s most complex

Thanks,

Dimitrije

2

I do not understand that, i check ur website its fine. let me know the issue

3

Sorry, apply first this CSS code, that is what I did, but when I click on variants then the duplicate like in the photo I shown you

@media screen and (max-width: 768px){

variant-selects {

display: flex !important;

width: 33% !important;

gap: 4px !important;

text-align: center !important;

} }

4

Okay no issue, now ur problem is solved ?

5

No because when I use this code variants duplicate when you click on them they bug

Screenshot_13.png
Screenshot_13.png354×489 19.6 KB

like this

6

Hi @Domisana ,

Thank you for your question!

Please go to Theme editor > Theme settings > Custom CSS to add this code:

LizHoang_0-1735103343914.png
LizHoang_0-1735103343914.png433×629 38.3 KB

variant-selects .product-form__input {
    flex: 1 !important;
}

variant-selects {
    display: flex !important;
    flex-wrap: wrap;
}

.product-form__input:nth-child(1) {
    margin-right: 15px;
}

You should get the result as below, please note that we couldn’t adjust it to 1 row of 3 boxes as you show because the size has long content so if we leave it 1 row of 3 boxes you won’t be able to see all the content. I believe keeping it like this is beautiful.

I hope you found this helpful!

Best,
Liz.

7

Thanks, but did you actually try to click and pick other variant, it still has this bug where whenever you try to change some variant entire variant row duplicates for a second, no use to using this CSS if it is going to do that bug