How can I improve the design of product cards for a bookstore site?

[Malik_007]

Dear Experts

I am currently working on enhancing the product cards for a bookstore website using the Dawn theme. After exploring various options, I came across your expertise 

Websites" https://wordyee.com/

As we aim to create an optimal user experience for our bookstore customers, it's crucial to ensure that these elements are not only visually appealing but also intuitively designed to encourage engagement and conversions

Want to create something like this 

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

 To fix it you need set height image card product, you can change it by add code here:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

<style>
.product-card-wrapper .card__inner{
       height: 299px !important;
}
</style>

Or if your theme allows you to edit the image height, you can also set up options in the theme without using code.
Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

[Malik_007]

this is the dawn theme

your code only changes the card image height

[PageFly-Noah]

Yes, In this case, just change the image height and the items will be balanced.

[Malik_007]

I have implemented your code, however, there is an issue where the image is cropped within the product card

[PageFly-Noah · Accepted solution]

Hi @Malik_007  The reason is that I set too much length so the width was cut off. you can change it to this code. Can fix most images.

<style>
.product-card-wrapper .card__inner{
    width: 80% !important;
    margin: auto !important;
    height: 250px !important;
}
</style>

 Thank you.

[Malik_007]

 can you help me to fix this ISBN display font size on a card?code card-product

 

[PageFly-Noah]

Hi @Malik_007  you can change <p> to <p class="cart_barcode" >       . And add code :

<style>
.card__content .card__information .cart_barcode{
   font-size: 12px !important;
}
</style>

Thank you.

[Malik_007]

Lovely 😍 Thank you very much @PageFly-Noah 

last questions How reduce the character limit of Product Titles on product cards? "...." is coming when the line breaks.

[PageFly-Noah]

Oke, Thank you.