Buy me a coffee

Add Sold dot over Image

To add a Sold dot over the Image, you can follow these steps:

#1. First, you add a Gallery Section

#2. Enable Gallery Captions

enable-gallery-caption-02-min

#3. Next, you add a SOLD text in the Description box 

add-sold-dot-over-image-01-min

#4. Add this code to the Page Header Code Injection (the page where you want to add the Sold dot)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('figcaption p:contains("SOLD")').closest('figure').addClass('sold-dot');
});
</script>
<style>
  figure.sold-dot>div {
  position: relative;
  }
figure.sold-dot>div:after {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 9999;
    background-color: red;
    border-radius: 50%;
}
</style>

add-sold-dot-over-image-05-min

#5. Result

add-sold-dot-over-image-03-min

 

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder