I have been attempting to make my round, white swatch icons on my collection page have thin, black borders without affecting my main product page swatch (which is a rectangle design). I have attempted to create my own white.png asset with a boder, but the alignment is incorrect on the round icon. Any ideas? Thanks in advance!
Assuming you have a separate class created for those swatches that are showing on your collections page, you could try adding the following css code to it.
border: 1px Solid #000000;
See this screenshot for what that would look like.
Let me know if you have any questions,
Where did you get the code from to get your Swatches working on the Collection pages?
I have tried to follow this link but the page is not valid anymore :(
So I have swatches on my product pages but on my collection pages!