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

Attachments:

You must be logged in to view attached files.

Hello,

Try to make the selectors heavier – https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Then clear the cache and check how it works.

Kind Regards

This Ticket can be closed

Hello,

In case you need any additional help, I’d be more than happy to assist you.

Have a good day!

Kind Regards

[Author]

Posts