tuanphan Posted September 24 Share Posted September 24 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 under 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> You can replace icon example url with your icon url. #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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment