Product Grid

Solved

Product Grid

remz1234
Excursionist
18 0 5

Hi guys, please see screenshot below.

remz1234_0-1720178670264.png

remz1234_1-1720178880728.png

 

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

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





Accepted Solutions (2)

Made4uo-Ribe
Shopify Partner
6984 1662 2052

This is an 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:
  • Made4uoRibe_0-1720182124854.png

     

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Made4uo-Ribe
Shopify Partner
6984 1662 2052

This is an 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:

Made4uoRibe_0-1720183168896.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

Replies 7 (7)

devmont-digital
Shopify Partner
132 31 34

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.

 

1.png

 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
remz1234
Excursionist
18 0 5

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
Shopify Partner
6984 1662 2052

This is an 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:
  • Made4uoRibe_0-1720182124854.png

     

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
remz1234
Excursionist
18 0 5

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

Made4uo-Ribe
Shopify Partner
6984 1662 2052

This is an 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:

Made4uoRibe_0-1720183168896.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
remz1234
Excursionist
18 0 5

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.

 

remz1234_0-1720185245118.png

 

Made4uo-Ribe
Shopify Partner
6984 1662 2052

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

Please, dont forget to hit likes! thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.