To add Icons under Product title in Product Block, you can follow these.
#1. Suppose you have 3 product blocks, you need to add icons to this position
#2. Add a Code Block with this code
<div class="product-icon1"> <div class="product-icon-img"> <img src="https://images.squarespace-cdn.com/content/6672ecf757a5d945cabc3965/1726717042892-IZQI98AO6BPMRGT0TAVN/icon1.png?content-type=image%2Fpng"/> <img src="https://images.squarespace-cdn.com/content/6672ecf757a5d945cabc3965/1726717044715-RQ7EFNC3L4OG5W8UWPZP/icon2.png?content-type=image%2Fpng"/> </div> <div class="product-icon-text"> </div> </div> <div class="product-icon2"> <div class="product-icon-img"> <img src="https://images.squarespace-cdn.com/content/6672ecf757a5d945cabc3965/1726717042892-IZQI98AO6BPMRGT0TAVN/icon1.png?content-type=image%2Fpng"/> <img src="https://images.squarespace-cdn.com/content/6672ecf757a5d945cabc3965/1726717044715-RQ7EFNC3L4OG5W8UWPZP/icon2.png?content-type=image%2Fpng"/> </div> <div class="product-icon-text"> </div> </div> <div class="product-icon3"> <div class="product-icon-img"> <img src="https://images.squarespace-cdn.com/content/6672ecf757a5d945cabc3965/1726717044715-RQ7EFNC3L4OG5W8UWPZP/icon2.png?content-type=image%2Fpng"/> <img src="https://images.squarespace-cdn.com/content/6672ecf757a5d945cabc3965/1726717043632-DHRX88GKXSQ34N02GJI6/icon3.png?content-type=image%2Fpng"/> </div> <div class="product-icon-text"> </div> </div> <style> .product-icon-img { display: flex; flex-wrap: nowrap; } [class*="product-icon"] img { width: calc(50% - 20px); margin-left: 5px; margin-right: 5px; } </style>
#3. Find ID of 3 Product Blocks.
In my example, we will have:
- #block-yui_3_17_2_1_1726795121076_7491
- #block-b411250f9352c58b7b3b
- #block-5d441f6c28e67949327a
#4. Use this code to Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('.product-icon1').appendTo('#block-yui_3_17_2_1_1726795121076_7491 .productDetails'); $('.product-icon2').appendTo('#block-b411250f9352c58b7b3b .productDetails'); $('.product-icon3').appendTo('#block-5d441f6c28e67949327a .productDetails'); }); </script>
#5. Result
#6. To adjust Icon size, you can adjust this line in Code Block