Add sizes to collection grid/product cards

Hey there, I was hoping someone can help with a coding question. I am looking to add sizes to product cards on the collection grid for items that have size variants but I am having trouble with this. I have had a look around and can’t find a great deal of information in relation to doing this. There was one article that I read (https://help.groupthought.com/article/660-collections-add-product-sizes-to-collection-pages) that nearly did it but when the code is added it just adds the size options as plain text to the product card, not boxed or faded out for sold out variants as the images display.

Is this something that someone may be able to help with at all? I am using the expanse theme and here is a link to the duplicated version of the theme.

Kind Regards

Tom

UPDATE

I have now managed to successfully get this to work and any products that have a size variant now have these small boxes on the collection gird product card to display this as you can see in the attached photo. I would now like to make it so that any sold out variants have a slightly different colour (light grey and/or a strikethrough in the number), any help would be greatly appreciated.