Jump to content

Add grid around products to store pages

Recommended Posts

  • 2 months later...
  • Replies 5
  • Views 2.2k
  • Created
  • Last Reply

Top Posters In This Topic

You can use this code to Website Tools (under Not Linked) > Custom CSS

(this code for products 3 columns, if you change to 2, 4, 5...it won't work)

@media screen and (min-width:992px) {
body.view-list section.products.collection-content-wrapper.products-list {
}

div.grid-item {
    border: 1px solid black;
    padding: 30px;
}

.products.collection-content-wrapper .list-grid {
    grid-gap: 0 !important;
}

div.grid-item:nth-child(3n) {
    border-left: 0 !important;
    border-bottom: 0 !important;
}

div.grid-item:nth-child(3n+1):not(:last-child) {
    border-right: 0 !important;
    border-bottom: 0 !important;
}

div.grid-item:nth-child(2n+2) {
    border-bottom: 0 !important;
}
div.grid-item:last-child, div.grid-item:nth-last-child(-n+3) {
    border-bottom: 1px solid black !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
On 1/6/2024 at 3:20 AM, emilynola said:

Thank you! Is there a way to make it so the rows extend all the way to the left and right of the page, so the grid is not closed on the sides? 

Also, what would the code be for 4 columns? thank you!!!

#1. You mean remove this?

image.thumb.png.587717f2fa2a56a530cf3e6499414972.png

#2. You can change shop 4 columns, I can test code easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Correct! remove the lines indicated and have the horizontal lines run to the edges of the page. I changed the shop to 4 columns.

Also, if you know how to remove the gray line at the top, I would like to get rid of that too!

Link to comment
On 10/24/2023 at 1:58 AM, emilynola said:

Hello! I would like to add a grid around my products in the store page, for example, like this- https://store.pioneerworks.org/collections/art

Any advice?

 

Thank you!

 

My site: collarworks.org

404 now

image.png.47492a7f69dbedbbff1a50b3fa24a70b.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.