WhoAJ

@tuanphan hello friend, merry christmas and thank you for the code, works like a beauty.
and thanks for helping th Community 

Because you used this CSS, it won't work properly on all screen sizes, each screen size you need to adjust a different margin/padding
.ProductItem-additional { padding-left: 730px !important; margin-top: -140px !important; font-size: 15px !important; width: 35%; } You can remove it and use this code to move Additional under add to Cart
Code at to Website Tools > Code Injection > FOOTER
<script> $(document).ready(function(){ $('section.ProductItem-additional').insertAfter('div.sqs-add-to-cart-button-wrapper'); }); </script>  

You can add top attribute to this code
<style> div#block-360c253ea77246c3281e { position: absolute; z-index: 99999; left: 50%; transform: translateX(-50%); top: 50px; } </style>  

Add this code to Last Line in Code Injection > Footer
DO NOT add to Custom CSS
<script> $(document).ready(function(){ $('div#block-360c253ea77246c3281e').insertBefore('.gallery-strips.gallery-strips--layout-strips'); }); </script> <style> div#block-360c253ea77246c3281e { position: absolute; z-index: 99999; left: 50%; transform: translateX(-50%); } </style>  

nvm i figured it out using 

 
.gallery-strips-item img {
  transform: scale(0.95) !important;
 
}
@media only screen and (max-width: 767px) {.gallery-strips-item img {
  transform: scale(0.95) !important;
 
  }}

Yes, it's ok

Do you want to add the custom font for the site title? If you want then replace the code(see the attached image) with the code below.
h2, h1, #site-title { font-family: 'INTERBOLD' !important }  

Have you added product variants to the products?
Variants will appear on the Product Detail Page (PDP) as either a dropdown list or as buttons. To learn more, visit Styling store pages.
Did this help? Please give feedback by clicking an icon below  ⬇️

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.
.view-item .ProductItem-summary{ align-items: flex-start !important; } .ProductItem-summary .product-restock-notification{ width: 90% !important; } .view-item .ProductItem-summary .product-restock-notification [name="email"] { min-width: 10px !important; box-sizing: border-box !important; } @media(max-width: 767px) { .view-item section.ProductItem-additional, .view-item .ProductItem-summary .product-restock-notification { width: 100% !important; } .view-item .ProductItem-details-excerpt, .view-item .ProductItem-additional, .view-item .product-mark.sold-out { margin: 0 !important; } }  

If you add a tag called "Size M", "Size XL" (and so on) to the products, the following code should add visible size labels like these:

To test it (as shown in the screenshot above) I needed to add those size tags to your products because the tags on your site don't include the prefix "Size ".
The script below can be added to the Code Injection FOOTER panel:
<!-- Add product size labels to product list pages on Squarespace 7.1 ----------------------> <!-- Copyright Soundfocus Digital [sf.digital] ---------------------------------------------> <!-- Use freely in your code injection. Do NOT re-publish.----------------------------------> <script> const gridItems = document.querySelectorAll('.grid-item'); gridItems.forEach((gridItem) => {   const gridMetaStatus = gridItem.querySelector('.grid-main-meta');   const classList = gridItem.classList;   const tagLabels = [];   classList.forEach((className) => {     if (className.startsWith('tag-size-')) {       const tagLabel = className.slice(9);       if (!tagLabels.includes(tagLabel)) {         tagLabels.push(tagLabel);       }     }   });   if (tagLabels.length > 0) {     const tagLabelsContainer = document.createElement('div');     tagLabelsContainer.classList.add('tag-labels');     tagLabels.forEach((tagLabel) => {       const label = document.createElement('div');       label.classList.add('tag-label');       label.textContent = tagLabel;       tagLabelsContainer.appendChild(label);     });     gridMetaStatus.appendChild(tagLabelsContainer);   } }); </script> <!-- End of product size labels ------------------------------------------------------------> This can be added to the Custom CSS panel and can be tweaked to change colour, size and so on:
/************************************** Size label styling on PLP **************************************/ .grid-item .grid-main-meta .tag-labels {   text-align: center;   margin-bottom: 7px;   } .grid-item .grid-main-meta .tag-label {   font-size: 10px;   color: #000;   margin-left: 6px;   margin-top: 11px;   padding: 4px 8px;   border: 1px solid #000;   text-align: center;   text-transform: uppercase;   display: inline-block;   line-height: 1.2em;   //font-weight: bold;   //background-color: #f0f0f0; } /* Don't show sizes when sold out */ .grid-item.sold-out .grid-main-meta .tag-label {   display: none; }  
Did this help? Please give feedback by clicking an icon below  ⬇️

@tuanphan
I have added this code to my site and it works perfectly, thank you. Is there any way of increasing the space between the title and the header once the breadcrumbs have been removed, please?
https://heron-helix-4csn.squarespace.com/
P/W: TEST
/* remove breadcrumb */ nav.ProductItem-nav { display: none; }

Use this new code
/* remove breadcrumb */ nav.ProductItem-nav { visibility: hidden !important; }