Jump to content

Custom Product Label - Wells Template - Specific Product

Recommended Posts

Site URL: https://www.whiteincolour.com.au/original-paintings/paper-pear-pine-50x60-cm/

Hello, I need to add a custom product label to a select few product items - in this case, I need the product to say 'Auction'. I created an 'auction' tag and used the below code that I found online, however it isn't working on the Wells Template. Can this code be adjusted for Wells? Or is a custom label not possible with this template? Thank you for any help! 

.ProductList-item.tag-auction::before {
  align-items: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: 'Auction';
  display: flex;
  font-size: .9em;
  font-weight: bold;
  height: 3em;
  justify-content: center;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 3em;
  z-index: 10;
}
Link to comment
5 hours ago, earthwindflowermoon said:

Site URL: https://www.whiteincolour.com.au/original-paintings/paper-pear-pine-50x60-cm/

Hello, I need to add a custom product label to a select few product items - in this case, I need the product to say 'Auction'. I created an 'auction' tag and used the below code that I found online, however it isn't working on the Wells Template. Can this code be adjusted for Wells? Or is a custom label not possible with this template? Thank you for any help! 

.ProductList-item.tag-auction::before {
  align-items: center;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: 'Auction';
  display: flex;
  font-size: .9em;
  font-weight: bold;
  height: 3em;
  justify-content: center;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 3em;
  z-index: 10;
}

Try adding to Home > Design > Custom Css

.tag-auction:after  {
  align-items: center;
  padding: 5px;
  background-color: black;
  border-radius: 50%;
  color: white;
  content: 'Auction';
  display: flex;
  font-size: 1em;
  font-weight: bold;
  height: 3em;
  justify-content: center;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 3em;
  z-index: 10;
}

Let me know how it works on your site

Support me by pressing 👍 if this useful for you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing

image.thumb.png.6f490fb2199a3badbda8324ccf8510d1.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Try adding to Design > Custom CSS (test code for first product)

a#thumb-paper-pear-pine-50x60cm .product-image:before {
    content: "Auction";
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 9999;
    background-color: black;
    color: white;
    padding: 5px;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 3/11/2022 at 3:29 PM, earthwindflowermoon said:

It worked! Tuan ~ thank you again!!!!! Is there now a way to get the same label on the product image once you click on the product link? 

Screen Shot 2022-03-11 at 6.26.05 pm.png

Screen Shot 2022-03-11 at 6.28.00 pm.png

Edit product > Additional Info > Paste this code

<style>
  #productGallery #productSlideshow .slide:after {
    content: "Auction";
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 9999;
    background-color: black;
    color: white;
    padding: 5px;
}
</style>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.