Variant picker bugs and duplicates whenever I click

Store Design

Topic summary

A user encountered a CSS bug where variant selectors duplicated when clicked after implementing a 3-column grid layout for product variants. A screen recording demonstrated the duplication issue.

Solution provided:

  • Added display: none !important to hide the second variant-selects element (.product__info-container > variant-selects:nth-of-type(2))
  • This successfully resolved the duplication bug

Follow-up request:
The user asked how to center-align variants when only 1-2 options exist instead of 3. The helper suggested implementing dynamic classes in Liquid based on variant count, but noted this requires coding knowledge the user may not have.

Status: Initial bug resolved; centering enhancement remains unimplemented due to technical complexity.

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

Hi, my website is domisana.com

I wanted to code with CSS variants so to make 3 variants in the same row, I managed to do that with this code

variant-selects {
display: grid !important;
justify-items: stretch;
grid-template-columns: repeat(3, 1fr);
justify-content: space-between;
gap: 10px;
text-align: center;
}

CSS works, and I get the result I want, but whenever I click on some variant it bugs, duplicates entire row…

This is the link of screen record of the error I get https://streamable.com/498i2m

Please help

2

Hello @Domisana ,

Use this updated css code

variant-selects {
display: grid !important;
justify-items: stretch;
grid-template-columns: repeat(3, 1fr);
justify-content: space-between;
gap: 10px;
text-align: center;
}
.product__info-container > variant-selects:nth-of-type(2) {
    display: none !important;
}

Regards
Guleria

3

Hello @Domisana ,

Have you check it using this css ?

variant-selects {
display: grid !important;
justify-items: stretch;
grid-template-columns: repeat(3, 1fr);
justify-content: space-between;
gap: 10px;
text-align: center;
}
.product__info-container > variant-selects:nth-of-type(2) {
    display: none !important;
}

Regards
Guleroa

4

Thank you so much it works finally omgg !!! :heart_eyes:

1 Like
5

By the way, is there a line of code I can add to make it align in the center, when there is 1 or 2 variants like this?

Screenshot_32.png
Screenshot_32.png466×366 15.9 KB

6

If you can add a dynamic class then we can provide code for it.

e.g.
In liquid check how many variant options are available ( 1, 2, 3) based on that total assign a dynamic class in the container element.

But if you do something like this or related then we are able to provide a line of code to align it center based on variants count.

7

I am not sure how to check that, what should I do exactly to find that out?

8

Build logic and do code but sorry it’s not possible if you are not good at it.

1 Like
9

ok thanks anyways, you helped me a lot!