Image Swatch Form Style

Hello,

I am currently working on implementing a Custom CSS for the swatch style in my shop. My goal is to use the Size XXL swatches with a rectangular form ratio of 9:16 for images instead of the default square shape.

Here is the CSS code I applied:

css
Code kopieren
[class*=”wd-swatches”] {
–wd-swatch-w: 1.2em; /* Slightly wider than 1em */
–wd-swatch-h: 1.6em; /* Slightly lower than 1.78em */
}

[class*=”wd-swatches”].wd-size-xxl {
–wd-swatch-size: 60px;
–wd-swatch-text-size: 22px;
}
While this initially appears to work, I’ve noticed that refreshing the shop often reverts the swatches back to the square form. I’ve attached an image showcasing the desired style when it works correctly.

Could you please advise me on how to ensure consistent application of this style?

Thank you for your assistance. I look forward to your guidance.

Best regards,
Furkan