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

Store Design
, ,
1

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

warcry_0-1729511835403.png
warcry_0-1729511835403.png1360×559 178 KB

This is how i want it

warcry_1-1729511867051.png
warcry_1-1729511867051.png240×390 19.6 KB

2

@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

3

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

4

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

5

Hello @Moeed ,

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

6

Hi @warcry ,

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

Screenshot.png
Screenshot.png1103×504 79.9 KB

Code:

{{ card_product.description }}
7

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

8

Hi @warcry ,

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

9

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

10

Hi @warcry ,

Please add code here:

Screenshot.png
Screenshot.png2098×1372 409 KB

11

He @namphan ,

The description is showing above the card information

Screenshot 2024-10-24 130725.png
Screenshot 2024-10-24 130725.png288×545 18 KB

12

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;
}
13

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

1 Like
14

Hi @warcry ,

You’re welcome and happy to help :blush: