I want to have product description in the featured collection and product cards

[warcry]

I want to show product description right after the title and price in product cards for all over my website. Im using sense theme 

This is how my website looks

This is how i want it

[shahrozbabar5]

@warcry This is possible with code editing for the product cards, it needs styling and code editing, let me know if you are code familiar, I'll guide you here, or you need someone code expert who can do this. I'll happily assist you let me know

Thank you

[warcry]

Hello @shahrozbabar5 , 
yes i am familiar with coding and a little guidance is needed

[Moeed]

Hey @warcry 

If you want to show a short description of your products below the product cards then you can do that with the help of metafields and then call that metafield in your card-product.liquid. This process will require some coding so if you're not familiar with coding then I suggest you to hire a Shopify developer who can help you out with that. Feel free to let me know if you want me to help you out and I would be more than happy to help you out!

Best Regards,

Moeed

[warcry]

Hello @Moeed ,

I am familiar with coding but i tried to change some code but it was not working out !

[namphan]

Hi @warcry,

Please go to card-product.liquid file and add code here:

Code:

<div class="caption-large light">{{ card_product.description }}</div>

[warcry]

Hi @namphan ,
It is working but it is going into the card information block which i changed the style using css so i dont want it in the card information block and need it below of both as i shown in the image

[namphan]

Hi @warcry,

Please send the website link, I will check it for you

[warcry]

HI @namphan ,
Store link- https://c2akfx-f3.myshopify.com/
Password- showck

[namphan]

Hi @warcry,

Please add code here:

[warcry]

He @namphan ,

The description is showing above the card information

[namphan · Accepted solution]

Hi @warcry,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.product-card-wrapper .card:not(.ratio)>.card__content {
    grid-template-rows: max-content auto minmax(0, 1fr) max-content auto;
}
.product-card-wrapper .card__information {
    padding-bottom: 0;
}
.product-card-wrapper .card__information+.caption-large.light {
    grid-row-start: 3;
}

[warcry]

Hi @namphan ,
This worked!! thanks a lot!

[namphan]

Hi @warcry,

You're welcome and happy to help 😊