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
![]()