Jump to content

Moving and modifying "Sold out" and "Sale" badges

Recommended Posts

Site URL: https://clownfish-contrabass-bd8k.squarespace.com/

Hi everyone,

I'm missing 7.0 product status badges A LOT...

Instead of the ugly black rectangle I want it to be a circle (#C93 for "Sale" and #782b2b for "Out of stock"). That's the easy thing 🙂

The complicated one, for me, is to have it proportional and looking the same into

  • grid (the one displaying all products),
  • summary (into product page)
  • related products grid (into product page too).

But not beyond price at the top of product page. Only the wording is ok.

The only solutions I've found so far are not adapting the size of the circle when the product is shown in big or small.

Also, I want this circle to be always placed at the top right of the picture of the product (now it's ok for summary into product page but not for product grid or related products grid.

Why is that so difficult - and so different ? I've already made some custom CSS but I can't find a way to change the position or to adapt the size.

Can anyone help me please ?

Link to comment
  • Replies 3
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 years later...

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.