Add custom description above Product Add to Cart on Shop Page

You can follow these steps to add custom text to the Product on the Shop Page.

#1. First, edit Shop Page > Add a Blank Section under Products

#2. Add some Text Blocks.

In my example, we will add text to 2 products, so we will add 2 Text Blocks

#3. Use Squarespace ID Finder to find ID of 2 Text Blocks.

In my example, we will have

• Text 1: #block-yui_3_17_2_1_1721446484537_27294
• Text 2: #block-yui_3_17_2_1_1721446484537_28268

#4. Find the ID of 2 Products.

Here 2 products have URLs:

• Product 1: /store-inset-sidebar/p/style-02
• Product 2: /store-inset-sidebar/p/style-03

Product ID will be like this

• Product 1: div#thumb-style-02
• Product 2: div#thumb-style-03

#5. Use this code to Code Injection – Footer (or Shop Page Header Injection)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    // Product 1
    $('#block-yui_3_17_2_1_1721446484537_27294').insertBefore('div#thumb-style-02 .plp-grid-add-to-cart');
    // Product 2
   $('#block-yui_3_17_2_1_1721446484537_28268').insertBefore('div#thumb-style-03 .plp-grid-add-to-cart');
});
</script>

#6. Result

#7. If you want to hide a Section (you created in #1), you can use this tool to find the Section ID.

In my example, we will have:

• section[data-section-id=”669b30ddb256453d6371f219″]

then use this code to Custom CSS box

section[data-section-id="669b30ddb256453d6371f219"] {
  display: none;
}

If you want to make it appear in Edit Mode, use this new CSS code

body:not(.sqs-edit-mode) section[data-section-id="669b30ddb256453d6371f219"] {
  display: none;
}