Solved

How can I display only 2 items per row in a collection?

MatthewChandler
Excursionist
14 0 7

I have a collection that I am displaying on a page, but the default is showing 3 items per row. I was wondering if there is a way top display 2 items per row. (Only on this collection)

https://leatherandmoreinhickory.com/collections/chateau-dax

 

Thank you in advance

 

website: www.leatherandmoreinhickory.com

Theme: Trademark

Accepted Solution (1)

GemPages
Shopify Partner
5604 1261 1224

This is an accepted solution.

Hello @MatthewChandler 

 

It's GemPages support team and glad to support you today.

I would like to give you a solution to support you.

1. Go to Online Store -> Theme -> Edit code:

 

GemPages_0-1669618959296.png

 

2. Open your theme.liquid theme file.

3. Paste the below code before </body>:

 

{% if collection.handle contains 'chateau-dax' %}
<style>
@media screen and (min-width: 801px){
  body .list-products > .grid__cell {
      margin-bottom: 32px;
      width: 50%;
  }
}
</style>
{% endif %}

 

apply only collection link:

https://leatherandmoreinhickory.com/collections/chateau-dax

Result:

 

Screenshot at Dec 21 01-28-11.png

 

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 3 (3)

GemPages
Shopify Partner
5604 1261 1224

This is an accepted solution.

Hello @MatthewChandler 

 

It's GemPages support team and glad to support you today.

I would like to give you a solution to support you.

1. Go to Online Store -> Theme -> Edit code:

 

GemPages_0-1669618959296.png

 

2. Open your theme.liquid theme file.

3. Paste the below code before </body>:

 

{% if collection.handle contains 'chateau-dax' %}
<style>
@media screen and (min-width: 801px){
  body .list-products > .grid__cell {
      margin-bottom: 32px;
      width: 50%;
  }
}
</style>
{% endif %}

 

apply only collection link:

https://leatherandmoreinhickory.com/collections/chateau-dax

Result:

 

Screenshot at Dec 21 01-28-11.png

 

Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
AimHighShop
Excursionist
39 0 8

Can you help me figure out how to allow more items per page so that all the item display on one page instead of having to go to the 2nd page. Simple theme
www.aimhighshop.com

oscprofessional
Shopify Partner
15905 2378 3087

@MatthewChandler 
Hello,

.grid__cell.\31 \/2--handheld-and-up.\31 \/3--desk {
	width: 50%;
}

Add this CSS at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

Like This

screenshot-leatherandmoreinhickory.com-2022.12.21-17_13_03.png

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free