Solved

Make a Grid on Product Page

sixdreamz
Excursionist
46 0 14

Hey,

 

does anybody know how to i can make a grid on my Product Page?

 

Should look something like this:

 

sixdreamz_0-1716969166177.png

 

URL: sixdreamz.com

 

Accepted Solution (1)
EBOOST
Shopify Partner
997 268 307

This is an accepted solution.

Hi,

You can use code below:

 

body ul#product-grid {
  gap: 0!important;
  justify-content: center!important;
  border-top: 1px solid black!important;
  border-left: none !important;
}
ul#product-grid .grid__item {
  border-right: 1px solid black !important;
  border-bottom: solid 1px black !important;
  border-left: solid 1px black !important;
  border-top: none !important;
  margin-left: -1px;
}
@media screen and (min-width: 990px) {
  ul#product-grid.grid--4-col-desktop .grid__item {
    width: 25%;
    max-width: 25%;
  }
}
@media screen and (min-width: 750px) and (max-width: 989px) {
  ul#product-grid.grid--2-col-tablet-down .grid__item {
    width: 50%;
    max-width: 50%;
  }
}
@media screen and (max-width: 749px) {
  ul#product-grid.grid--4-col-desktop .grid__item {
    width: 50%;
    max-width: 50%;
  }
}

EBOOST_0-1716977277361.png

 

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤

View solution in original post

Replies 7 (7)

sixdreamz
Excursionist
46 0 14

Like on this Site: 

sixdreamz_0-1716969250815.png

 

 

Made4uo-Ribe
Shopify Partner
6419 1539 1909

Hi @sixdreamz 

 

check this one. The design varies when you have more products btw.

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

 li.grid__item.scroll-trigger.animate--slide-in:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)) {
    border-top: 1px solid;
    border-right: 1px solid;
}


li.grid__item.scroll-trigger.animate--slide-in:not(:nth-child(4)) {
    border-right: 1px solid;
}

li.grid__item.scroll-trigger.animate--slide-in:not(:nth-last-child(-n+2)) {
    border-bottom: 1px solid;
}

ul#product-grid {
    gap: 0;
}

 

And Save. 

Result:

Made4uoRibe_0-1716970611738.png

 

Please don't forget to Like and Mark Solution to the post that helped you. 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.

Moeed
Shopify Partner
3891 983 1228

Hey @sixdreamz 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
ul#product-grid {
    gap: 0 !important;
    justify-content: center !important;
}
.grid--4-col-desktop .grid__item {
    border: solid 1px black;
}
</style>

RESULT:

Moeed_0-1716970701578.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
sixdreamz
Excursionist
46 0 14

the lines which collide a more thicker then the other ones? is there a way to get around?

 

EBOOST
Shopify Partner
997 268 307

Hi @sixdreamz ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

EBOOST_1-1672356985580.png
2. Assets/base.css
3. Add code below to end of file

body ul#product-grid {
  justify-content: left !important;
  border-top: 1px solid black!important;
  border-left: 1px solid black!important;
}
ul#product-grid .grid__item {
  border-right: 1px solid black!important;
  border-bottom: solid 1px black!important;
  border-left: none!important;
  border-top: none!important;
}
@media screen and (min-width: 990px) {
  ul#product-grid.grid--4-col-desktop .grid__item {
    width: 25%;
    max-width: 25%;
  }
}
@media screen and (min-width: 750px) and (max-width: 989px) {
  ul#product-grid.grid--2-col-tablet-down .grid__item {
    width: 50%;
    max-width: 50%;
  }
}
@media screen and (max-width: 749px) {
  ul#product-grid.grid--4-col-desktop .grid__item {
    width: 50%;
    max-width: 50%;
  }
}

 

EBOOST_0-1716976436458.png

EBOOST_1-1716976484872.png

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
sixdreamz
Excursionist
46 0 14

can you look at the website? it doesnt work how it worked when you did it.

also is there a way to put the 2 products in the second line in the center? like that:

sixdreamz_0-1716977058821.png

 

EBOOST
Shopify Partner
997 268 307

This is an accepted solution.

Hi,

You can use code below:

 

body ul#product-grid {
  gap: 0!important;
  justify-content: center!important;
  border-top: 1px solid black!important;
  border-left: none !important;
}
ul#product-grid .grid__item {
  border-right: 1px solid black !important;
  border-bottom: solid 1px black !important;
  border-left: solid 1px black !important;
  border-top: none !important;
  margin-left: -1px;
}
@media screen and (min-width: 990px) {
  ul#product-grid.grid--4-col-desktop .grid__item {
    width: 25%;
    max-width: 25%;
  }
}
@media screen and (min-width: 750px) and (max-width: 989px) {
  ul#product-grid.grid--2-col-tablet-down .grid__item {
    width: 50%;
    max-width: 50%;
  }
}
@media screen and (max-width: 749px) {
  ul#product-grid.grid--4-col-desktop .grid__item {
    width: 50%;
    max-width: 50%;
  }
}

EBOOST_0-1716977277361.png

 

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤