Product Grid

Store Design
,

Topic summary

A user seeks help customizing their product grid to match the appearance of their homepage across collection pages. The main issues involve incomplete borders on product cards and layout inconsistencies.

Solutions Provided:

  • Product Grid Columns: Navigate to Online Store → Themes → Customize → Product Grid, then set desktop columns to 3 for the default collection.

  • Product Card Borders: Add CSS code to main.css (or base.css/theme.css) to adjust padding:

.spb-item.product_scroll_grid {
    padding: 8px;
}
  • Center Sold Out Badge: Insert CSS in base.css:
.spb-item .card__badge {
    left: 50%;
    transform: translateX(-50%);
}
  • Position Prices Bottom Left: Add to base.css:
.card-information__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 16vh;
}
.spb-item .card-information__wrapper>:not(.visually-hidden:first-child)+:not(.rating) {
    margin-top: 0px !important;
}

All customizations were successfully implemented with visual confirmation via screenshots. The issue is resolved.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
8

Add this one in yout base.css.

.card-information__wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
     height: 16vh;
}
.spb-item .card-information__wrapper>:not(.visually-hidden:first-child)+:not(.rating) {
 margin-top: 0px !important;
}
.card__information {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

And Save.

Result:

Made4uoRibe_0-1720192178386.png
Made4uoRibe_0-1720192178386.png1299×560 78 KB

Please, dont forget to hit likes! thanks!