Buy me a coffee

How to add Icons under Product Block

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

Icons Under Product Block 1 Min

#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>

Icons Under Product Block 2 Min

#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

Icons Under Product Block 3 Min

#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>

Icons Under Product Block 4 Min

#5. Result

Icons Under Product Block 5 Min

#6. To adjust Icon size, you can adjust this line in Code Block

Icons Under Product Block 6 Min