Show product option info on collection page - Focal theme

[Logototheleft]

I would like to show the option values on the collection page before price. I have 3 different variants and two of them only have one option available (size and paper type) and the third is framing which has more options. Is it possible to show the Paper type and size on collection page? here is the url: https://568839.myshopify.com/

[Mehran_Ali]

Hi @Logototheleft 

if you want to display the variant swatches on the collection page product cards that you need a similar expert with the liquid code 

or if you familiar with the liquid code you can check this reference which provide the code and the steps

https://egnition.io/resources/online-merchandising/how-to-show-all-variants-on-a-collection-page-in-...

[Logototheleft]

What I mean is I would like to show the size on the collection page in product item meta. Only one option for size 

[Mehran_Ali]

Sorry but didn't get the idea 
Do you have any references that be very helpful 

[Logototheleft]

Do you know if tags can be shown on collection page? I think I can show the size of the product with them. I am building a site for a gallery so the sizer are for example: 40 x 50cm (16 x 20"), so it is important information that should be visible on the collection page

[Mehran_Ali · Accepted solution]

Okya Now I get the Point yes you can easily do that first you have to

Step One: Create a Meatfields :

1. Go to Settings 
2. select custom
3. on right-hand side, you see the product 
4. create a meta field name as Size

Add Product Sizes:

1. Go to products
2. open each product and scroll down you the meta field you created
3. add the Size of whatever you want

Show that Metafield in Product liquid:

1. Go to Online Store > Themes.
2. Click Actions > Edit code.
3. Search for the in-snippets file name as " product-card.liquid "
4. find the div having a class price
5. after the closing tag past that code 

    <div class="product-size">
        {{ product.metafields.custom.size | default: 'Size not available' }}
    </div>​

I hope this solution works for you!
If it does, please Like It and Mark It As A Solution, or support me by Buying Me A Coffee to keep me going!

[Logototheleft]

Thank you works perfectly could you give me another line of code if I would like to add another option for paper type. Also can I add the same thing to the product page?

[Mehran_Ali]

Yes for the product page, the code has some differences I have to see the code first for that if you can share the collaboration  access by giving the collaboration code in private so I can check and let you know the solution  

[Logototheleft]

I was able to get it to work. thanks anyways!