How to move “sold” items to bottom of page

Site URL: https://www.royalcitylittles.com/shop

How can I have the items that have sold on my site be at the end or bottom of the page so that my customers don’t see them mixed in with the available items? 

Please see Organizing products.

1 hour ago, RCL87 said:

Site URL: https://www.royalcitylittles.com/shop

How can I have the items that have sold on my site be at the end or bottom of the page so that my customers don’t see them mixed in with the available items? 

Feel free to try my solution if it fit, Copy to Settings->Design->Custom css,

.products.collection-content-wrapper .products-flex-container .list-grid .grid-item.sold-out {
  order: 2
}

.products.collection-content-wrapper .products-flex-container .list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

@media only screen and (max-width: 768px) {
  .products.collection-content-wrapper .products-flex-container .list-grid {
    grid-template-columns: 1fr;
  }
  .products.collection-content-wrapper .products-flex-container .list-grid .grid-item {
    width: 100%;
  }
}

.products.collection-content-wrapper .products-flex-container .list-grid .grid-item {
  width: 80%;
}

@bangank36 - That totally worked on my store...and it even alphabetized the sold out items! Thank you for that! Is there a custom CSS that will allow customers to see products listed in alphabetical order as well?

Css may not help sort the alphabet

Thanks so much it worked!!! @bangank36

@bangank36 is there a way to grey the sold items out as well? I find that the word "sold" isn't obvious to the customer enough.

Hi sruss76, RCL87

What are you guys site template name?

2 minutes ago, RCL87 said:

@bangank36 is there a way to grey the sold items out as well? I find that the word "sold" isn't obvious to the customer enough.

Add opacity to this, like

opacity: 0.5;

@bangank36 - sorry to be clueless...but where do i find information about my site's template? i honestly don't remember what template i picked when i signed up for a trial in may.

2 minutes ago, sruss76 said:

@bangank36 - sorry to be clueless...but where do i find information about my site's template? i honestly don't remember what template i picked when i signed up for a trial in may.

Settings->Help , thanks

@bangank36 - ok, it just says Version 7.1 for me.

also, the custom CSS for graying out the sold out items works awesomely! thank you for that!

1 minute ago, sruss76 said:

@bangank36 - ok, it just says Version 7.1 for me.

also, the custom CSS for graying out the sold out items work awesomely! thank you for that!

LOl it's like 2 of you are the same person, 7.1 version really good that way

and RCL87, have you try the opacity option yet? I feel like many designer has the same needs like you 2 so please mark best answer so other people can know the solution

how do i mark as best answer? i hit the "like" on your post, but no clue how to mark as best answer.

Just now, sruss76 said:

how do i mark as best answer? i hit the "like" on your post, but no clue how to mark as best answer.

only author can do, thanks

ohh ok, got it! i was going to ask the same question as @RCL87 but saw his/her post 🙂 thank you again!

@sruss76 @bangank36 haha so funny we are like the same! I checked and i'm on 7.1 but it doesn't show my template name.

How do I do the opacity? Sorry, didn't quite understand the direction above!

@RCL87 - i copied the custom CSS @bangank36 gave and replaced order: 2 with opacity: 0.5; 

.products.collection-content-wrapper .products-flex-container .list-grid .grid-item.sold-out {
  opacity: 0.5; 
}

12 minutes ago, RCL87 said:

@sruss76 @bangank36 haha so funny we are like the same! I checked and i'm on 7.1 but it doesn't show my template name.

How do I do the opacity? Sorry, didn't quite understand the direction above!

1 minute ago, sruss76 said:

@RCL87 - copied the custom CSS @bangank36 gave and replaced order: 2 with opacity: 0.5; 

.products.collection-content-wrapper .products-flex-container .list-grid .grid-item.sold-out {
  opacity: 0.5; 
}

 

 

Actually add the opacity BELOW the line order:2

great -- will do that! i added it beside the first time and didn't work, so put it on its own and that worked 😉

Got it! Thanks so much for the help! 🙂 I'll mark this like you mentioned earlier 🙂 

@bangank36 This is exactly what I have been looking for, but does not seem to work for me after pasting into css section. Is this specific for v 7.1? My site is still on 7.0

On 11/27/2020 at 5:18 AM, jbpdx80 said:

@bangank36 This is exactly what I have been looking for, but does not seem to work for me after pasting into css section. Is this specific for v 7.1? My site is still on 7.0

what is your site

@bangank36 Leftcoastrevivals.com

@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