[Share] Add custom description to Product on Shop Page

You can follow these steps to add custom text to the Product on the Shop Page (like this, see screenshot)

If you can't make code work, you can send link to Shop Page + Exact code you added, I can check easier.

#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 below tool 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.

In my example, we have: 

Product 1: /store-inset-sidebar/p/style-02

Product 2: /store-inset-sidebar/p/style-03

Product ID will have this format

• 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 #3 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;
}

Edited August 17 by tuanphan