Customize product appearance in collection page dawn theme

Store Design
, , ,

Topic summary

A user seeks to customize product display on their Dawn theme collection page, specifically for horizontal art pieces. They want to:

Main Requirements:

  • Center product images vertically within their containers
  • Align product names and prices at the same baseline as other products in the grid
  • Expand the collection showcase to full screen width on desktop

Current Status:

  • Another user provided CSS code targeting .collection-grid .horizontal-artpiece classes to center images using flexbox and adjust text alignment
  • Additional CSS was suggested to widen the desktop showcase by modifying .collection-grid max-width and margins

Outcome:

  • The original poster reported that none of the provided CSS solutions are working
  • The issue remains unresolved and requires further troubleshooting

The discussion includes visual references (attached images) showing the current layout versus desired appearance, though the CSS class names may not match the actual theme structure.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
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?