Add to cart button & location

Site URL: https://dylansoffice.com/shop/object-008

Does anybody know how to:

1. move "<-- back to shop" text link from it's current position to below the image

2. place "sold out" box over the product image

3. reduce "add to bag" button and text size

site uses squarespace 7.0

First, remove this line from Code Injeciton

Quote

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Next, Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() { 
		$('div#productNav').appendTo('div#productGallery');
	});
</script>
<style>
  div#productNav {
    margin-top: 20px;
}
  div.sold-out div#productSlideshow:before {
    content: "SOLD OUT";
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 9999;
    display: block;
    background-color: black;
    color: white;
    padding: 10px;
}
  div.sqs-add-to-cart-button.sqs-suppress-edit-mode {
    padding: 10px 20px !important;
}
  div.sqs-add-to-cart-button.sqs-suppress-edit-mode * {
    font-size: 14px !important;
}
</style>

The code works great! Thank you. Only one small problem. There's now 2 "SOLD OUT" blocks. Just need to delete/hide the block on the right.

15 hours ago, dcbachar said:

The code works great! Thank you. Only one small problem. There's now 2 "SOLD OUT" blocks. Just need to delete/hide the block on the right.

Add this to Code Injection

<style>
  #productDetails .product-mark.sold-out {
    display: none;
}
</style>