Jump to content

How to move “sold” items to bottom of page

Recommended Posts

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%;
}

image.thumb.png.128eeff30947f67523de9066a424979d.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Css may not help sort the alphabet

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Hi sruss76RCL87

What are you guys site template name?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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;

image.png.0f4d071836fe52d1c31a1b49b006c2ec.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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

image.png.743910dbdc3347320438a759bdbbea16.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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 RCL87have 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 3 weeks later...
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. 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.