Color and size swatch in collection page products

Technical Q&A
1

Hello im looking to add variant sizes and color swatches to my collection page under products https://raveafterrave.com/collections/accessories this is my site i was able to add color but its showing me the color name but i want to show the color also the sizes like XS,S,M,L,XL . Please if someone can guide me through this . Thanks

2

I checked and it shows the whole size: https://i.imgur.com/bwNy97H.png
Can you send me the code, I will help you check it.

3

Hello as you can see in this pic

zbug_0-1629801117991.png
zbug_0-1629801117991.png835×659 309 KB

i was able to add color swatch on collection page but i have issue that is there are some variants which are unavailble(or sold out) i want to appear only those which i have . i have tried many tutorials but have no luck. my theme is vantage . if you can please help me in this . Kindly reply!!

4

Hi @z-bug ,

Please follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Assets > stylesheet.css and paste this at the bottom of the file:
.swatch-element.soldout {
display: none;
}

Hope this is clear to you!

Please mark as a solution if you find my comment helpful. Thanks and good luck!