How to get product grid item to be directly touching eachother like this?

Store Design
, , ,
1

merchabellire_0-1704864439998.png
merchabellire_0-1704864439998.png682×1412 118 KB

I want to make a product layout like this where all the products touch each-other with the consistent black border, how can this be done? site is abellire.shop

2

Hey @merchabellire

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 tag

RESULT:

Moeed_0-1704867759791.png
Moeed_0-1704867759791.png358×648 76.2 KB

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

Best Regards,
Moeed

3

Thank you! How do I make it reach across the whole screen instead of having the padding on the sides?

4

Hi @merchabellire

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1704869180231.png
PageFlyRichard_0-1704869180231.png396×857 121 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

5

Hey @merchabellire

Keep the previous code and add this new code above in theme.liquid file

.collection.page-width {
    padding: 0 !important;
}

RESULT:

Moeed_0-1704869211404.png
Moeed_0-1704869211404.png368×653 83.2 KB

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

Best Regards,
Moeed

1 Like
6

Awesome thank you!

7

Awesome, thank you this one works too! Is it somehow possible to stop the lines from overlapping and just have a consistent 1px border?

8

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

1 Like