How to Make Variant Image Containers Equal in Size When One Variant Has No Image?

Store Design
, , ,
1

Hello everyone,

I have variant image tags where one of the tags doesn’t have an image, and the container is larger than the others. Is it possible to find a way to make it the same size as the others please ?

stg_herve_0-1744118884153.png
stg_herve_0-1744118884153.png687×350 28.3 KB

The page product url : https://www.draegerparis.com/products/dragonne-telephone-plusieurs-coloris?variant=48668135588164

Thank you !!

2

Hey there, here’s how you can fix this.

  1. Edit your theme code

  2. Open theme.liquid

  3. Search for and right before that line, add the following code
  1. Save your changes.

If done correctly, it should look like this:

JunaidAhmed_0-1744119302215.png
JunaidAhmed_0-1744119302215.png4064×2334 1000 KB

3

Hi @stg_herve ,

Please go to Actions > Edit code > Assets > product.css file and paste this at the bottom of the file:

variant-picker .option-selector__btns {
    --swatch-variant-picker-size: 35px !important;
}