Collections Page- White swatch needs border

Highlighted
New Member
3 0 0

Hi all!

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! 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
119 0 16

Hey Jessica,

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,

Your Guru,
Kyle 

0 Likes
Highlighted
New Member
3 0 0

Hi Jessica,

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 :(

https://ecommerce.shopify.com/c/ecommerce-design/t/showing-swatches-on-collection-pages-156751

 

So I have swatches on my product pages but on my collection pages!

0 Likes
Highlighted
New Member
3 0 0

Hi Kyle!

Thank you for the quick response! I was hoping you might be able to tell me where in the code I need to place it? I'm not sure I have a separate class created for the swatches that are showing on my collections page.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
119 0 16

Hey Jessica,

Looks like you got this all figured out! Let me know if I'm missing anything.

Your Guru,
Kyle 

 

0 Likes
Highlighted
New Member
1 0 0

hello ! i have the same issue but I don't find where to put this code, I need it

 

thank you !

0 Likes