Product Grid

[remz1234]

Hi guys, please see screenshot below.

My product list grid on my homepage is not what look like on my collection page

homepage : https://www.brinnova.com/

[Made4uo-Ribe · Accepted solution]

Hi @remz1234 

Only the product card or you like to change also the sold out badge? 

check this one for the card. 

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. Then place the code below at the very bottom of the file.

.spb-item.type_product_scroll .grid {
    padding: 8px;
}

• And Save. 
• Result:
• 

[devmont-digital]

Hello @remz1234,

If you want to set the product grid on the collection page, follow these steps:

• Navigate to Online Store -> Themes -> Customize.
• Select the default collection.
• Go to Product Grid and set the number of columns on desktop to 3.

[remz1234]

Hi @devmont-digital if you will take a look on my homepage, the product list border are not complete. I want it to look the same on my collection page

[Made4uo-Ribe · Accepted solution]

Hi @remz1234 

Only the product card or you like to change also the sold out badge? 

check this one for the card. 

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. Then place the code below at the very bottom of the file.

.spb-item.type_product_scroll .grid {
    padding: 8px;
}

• And Save. 
• Result:
• 

[remz1234]

Hi @Made4uo-Ribe thank you will mark this as solution. Btw how can I center the sold out badge?

[Made4uo-Ribe · Accepted solution]

Welcome, for the badge add this code to the base.css.

.spb-item .card__badge {
    left: 50%;
    transform: translate(-50%);
}

And Save. 

result:

[remz1234]

Hi @Made4uo-Ribe worked thanks. Last question, I want the prices to be place on bottom left corner in all of my products. Please see screenshot below.

[Made4uo-Ribe]

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:

Please, dont forget to hit likes! thanks!