Jump to content

Sold Out badge in 7.1 similar to 7.0

Recommended Posts

Site URL: https://jenniferhillhouse2.squarespace.com/

Hi I'm upgrading my site from 7.0 to 7.1 and I'm trying to recreate the circle "Sold-Out" Status badge as a circle in the top right hand corner. Would anyone be able to help out with some code for how to do this? I've been searching around and it's sending me nuts.  Would love this to work in every instance the product is seen on the website. 

https://jenniferhillhouse2.squarespace.com/shop-now is the new site 

https://jenniferhillhouse.squarespace.com/pottery-products is the old site with how I would prefer the SOLD OUT status to look.

 

The code I have in there at the moment is seriously messed up I think. 

.product-mark.sold-out {
    background: #d97878 !important;
    color: white !important;
 font-family: URW-DIN-condensed;
   letter-spacing: 2px;
  font-weight: 400;
}

 

Screen Shot 2020-09-11 at 12.22.04 pm.png

Screen Shot 2020-09-11 at 12.22.46 pm.png

Link to comment
  • Replies 8
  • Views 2.9k
  • Created
  • Last Reply
  • 2 months later...
On 12/3/2020 at 5:17 AM, HalcyonDazeStore said:

Hey! Did you find a solution for the code when opening up the product page? im having the same issue and would love to know 🙂 @jenniferhillhouse @tuanphan

Can you share site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 12/5/2020 at 1:38 AM, HalcyonDazeStore said:

we have our site hidden with a coming soon page as our web address is on our social media.

 have duplicated the site but how do i share without subscribing? thanks

Hi. You can setup password & share url

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
On 9/13/2020 at 3:16 PM, tuanphan said:

Add this to Custom CSS


.product-mark.sold-out {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-block;
    padding: 20px;
}

 

Hi @tuanphan 

Your code works perfectly on the Shop collection page (see first screenshot), but it also affects the Sold Out text on the product page itself which means its overlaying the text (see second screenshot). 

Any idea how to make this code only apply the Sold Out text on the collection page? Alternatively, I'd settle for hiding the Sold Out text on the product page?

I hope you can help. 🤞

Luke

Screenshot 2021-01-18 at 06.32.42.png

Screenshot 2021-01-18 at 06.32.59.png

Link to comment
On 1/18/2021 at 1:39 PM, lgwebdesign said:

Hi @tuanphan 

Your code works perfectly on the Shop collection page (see first screenshot), but it also affects the Sold Out text on the product page itself which means its overlaying the text (see second screenshot). 

Any idea how to make this code only apply the Sold Out text on the collection page? Alternatively, I'd settle for hiding the Sold Out text on the product page?

I hope you can help. 🤞

Luke

Screenshot 2021-01-18 at 06.32.42.png

Screenshot 2021-01-18 at 06.32.59.png

Use this new code

.view-list .product-mark.sold-out {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-block;
    padding: 20px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.