Customize product appearance in collection page dawn theme

Store Design
, , ,
1

Hello, I need to customize how some of my products look in the collection showcases, specifically the horizontal artpieces. I need the product image itself to be centered, and the text with the name + price to be at the same level as the other products. Below I have attached an image.

I would also like the products to be showcased on full screen width when viewing on desktop.

JordiP_0-1730240142413.png
JordiP_0-1730240142413.png1896×920 290 KB

( ^ This is how it looks now, i want the top left piece (horizontal) to be lowered so its centered, and the product name + price lowered to the same level as other product names)

JordiP_2-1730240235838.png
JordiP_2-1730240235838.png1896×920 298 KB

( ^ I would also like the product showcase to be wider if possible)

store: artisimo.es

pass: pongia

2

Hi @JordiP ,

To center images and align text for horizontal art pieces in your collection showcase:

  1. Center Image and Align Text: Add this CSS to your theme.scss.liquid or base.css file:
.collection-grid .horizontal-artpiece .product-card__image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.collection-grid .horizontal-artpiece .product-card__title,
.collection-grid .horizontal-artpiece .product-card__price {
    margin-top: 20px;
    text-align: center;
}
  • For wider showcase on Desktop add this css code:
@media only screen and (min-width: 1024px) {
    .collection-grid {
        width: 90%;
        max-width: 1600px;
        margin: 0 auto;
    }
}
​

This will center images, align the name and price, and widen the showcase on desktop.

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

Thanks and Regards

Akshay Bhatt

3

None of the codes seem to do anything… Could you look at it again?