Welcome, for the badge add this code to the base.css.
.spb-item .card__badge {
left: 50%;
transform: translate(-50%);
}
And Save.
result:
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(orbase.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.
