How to move “sold” items to bottom of page

Hi @bangank36 wondering if you had any help for v7.0 sites on this? My site is leftcoastrevivals.com

4 hours ago, jbpdx80 said:

Hi @bangank36 wondering if you had any help for v7.0 sites on this? My site is leftcoastrevivals.com

sure I will have a look

On 12/4/2020 at 1:05 PM, jbpdx80 said:

@bangank36 Leftcoastrevivals.com

Hope this helps you and other people with same template, could you tell us your template?

#productList {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
#productList .product {
  width: 100%;
}
#productList .sold-out {
  order: 2;
}
@media only screen and (max-width: 768px) {
  #productList {
    display: grid;
    grid-template-columns: 1fr;
  }
  #productList .product {
    width: 100%;
  }
}

On 12/9/2020 at 11:18 PM, Ellavator said:

@jbpdx80 @bangank36 Same issue here, tried the code and it's not working. I have Brine template on 7.0  my website is ellafriberg.com

Add this to Design->Custom CSS, and would you mind tell us your template name so others people can follow if they have same issue

.ProductList-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .ProductList .ProductList-item {
    width: 100%;
  }
.ProductList .ProductList-item.sold-out {
  order: 2;
}
@media only screen and (max-width: 768px) {
  .ProductList-grid {
    display: grid;
    grid-template-columns: 1fr;
  }
  .ProductList .ProductList-item {
    width: 100%;
  }
}

@bangank36 Template is Montauk. The code did work to sort sold out products to bottom. Unfortunately, it also removed padding between product listings and left a large gap between the sold out items that sorted to bottom and the not sold out items.

6 minutes ago, jbpdx80 said:

@bangank36 Template is Montauk. The code did work to sort sold out products to bottom. Unfortunately, it also removed padding between product listings and left a large gap between the sold out items that sorted to bottom and the not sold out items.

Tried to reduce the width on 

#productList {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
#productList .product {
  width: 92%;
}
#productList .sold-out {
  order: 2;
}
@media only screen and (max-width: 768px) {
  #productList {
    display: grid;
    grid-template-columns: 1fr;
  }
  #productList .product {
    width: 100%;
  }
}

@bangank36 That's better on keeping padding between products. However, it still leaves a space in between the sold out and not sold out products. I left code in site so you can see on product page.

@bangank36 thank you for your response. I have the Brine template. I tried the codes and it still didn't seem to work..., just made my grid layout different (single product in one column, instead of 3 in a row). 

On 12/29/2020 at 1:22 AM, Ellavator said:

@bangank36 thank you for your response. I have the Brine template. I tried the codes and it still didn't seem to work..., just made my grid layout different (single product in one column, instead of 3 in a row). 

If you share page url, we can help easier

@tuanphan, previously shared it. It's ellafriberg.com 

thank you. 

On 12/19/2020 at 9:30 PM, bangank36 said:

Tried to reduce the width on 

#productList {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
#productList .product {
  width: 92%;
}
#productList .sold-out {
  order: 2;
}
@media only screen and (max-width: 768px) {
  #productList {
    display: grid;
    grid-template-columns: 1fr;
  }
  #productList .product {
    width: 100%;
  }
}

 

@bangank36 This worked well for me on the Hyde template, but unfortunately created an empty box between my unsold and sold products. Moreover on mobile view it changed my store to show only one product per row instead of two. Any idea how I can fix this? Thank you!

@share Can you share link to your site? WE can help easier

On 1/26/2021 at 2:06 AM, share said:

@bangank36 This worked well for me on the Hyde template, but unfortunately created an empty box between my unsold and sold products. Moreover on mobile view it changed my store to show only one product per row instead of two. Any idea how I can fix this? Thank you!

@share I had the same problem. Order: 1 seems to leave an empty box behind it. I'm not sure why, but I got around issue with using negative numbers to avoid "order: 1" 

#productList{
  order: -1;
}
#productList .sold-out {
  order: 0;
}

To show two product rows in mobile, just add another 1fr to the grid-template-columns. Might have to adjust your width in the process, so be aware of that. 

Hope that helps!

Worked for me too, thanks so much!  I'm on 7.1

Hi - Is there a way to move sold out items to the bottom within summary blocks? The site is www.badlandsvintage.com. My client wanted a different navigation so it only uses summary blocks. Thanks!