Module & Instructions:

Save Product on:

https://sectionheroes.de/products/trust-modul

<aside> 💡 What can be customized?

Icons, Text, whitespace & spacing, colors, border radius

</aside>

1. Comments are stored in the codes so that you know where you can adjust something. Comments are colored green in the previewer, and you can recognize them by this:

   <!-- This is a comment -->
   /* This is a comment */
   // And this is also a comment
   

2. Open the Code Previewer and insert the Code below. ➡️ Code Previewer: Click Here

   <style>
   /* Spacing for the top two boxes */
   .sectionheroes-trust {
     display: flex;
     gap: 10px; /*Gap between the top boxes*/
     margin-top: 0px; /*Top margin for the top boxes*/
   }
   
   /* Spacing for the bottom two boxes */
   .sectionheroes-trust__unten {
     display: flex;
     gap: 10px; /*Gap between the bottom boxes*/
     margin-top: 10px; /*Margin between top and bottom boxes*/
   }
   
   /* Styling for all four boxes */
   .sectionheroes-trust__advantage, .sectionheroes-trust__advantage__unten {
     background-color: #f0f0f0; /*Background color of the boxes*/
     color: #000; /*Text color of the boxes*/
     border-radius: 5px; /*Rounded corners for the boxes*/
     height: 60px; /*Height of the boxes*/
     padding: 10px;
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   /* Styling for the icons */
   .sectionheroes-trust__advantage-icon img {
     width: 25px; /*Icon size. Adjust both width and height*/
     height: 25px;
     margin-right: 10px; /*Margin between icon and text*/
     display: block;
   }
   
   /* Container for text */
   .meta_text {
     display: flex;
     flex-direction: column;
   }
   
   /* Styling for the title text (Desktop) */
   p.meta_titel {
     font-size: 12px; /*Font size for the top line*/
     font-weight: bold; /*Font weight for the top line. Choose between "bold" or "normal"*/
     line-height: 1;
     margin: 0; /* Remove margin */
   }
   
   /* Styling for the subtitle text (Desktop) */
   p.meta_untertitel {
     font-size: 12px; /*Font size for the bottom line*/
     line-height: 1;
     margin: 2px 0px 0px 0px; /*Margin between text lines */
   }
   
   /* Font size for title and subtitle text (Mobile) */
   @media (max-width: 767px) {
     p.meta_titel,
     p.meta_untertitel {
       font-size: 11px; /*Font size for mobile devices*/
     }
   }
   
   .sectionheroes-trust__advantage-content {
     display: flex;
     align-items: center;
   }
   </style>
   
   <div class="sectionheroes-trust">
     <div class="sectionheroes-trust__advantage">
       <div class="sectionheroes-trust__advantage-content">
         <div class="sectionheroes-trust__advantage-icon">
           <!-- Upload your icon link here. You can get a link by uploading the image in Shopify under Files -->  
           <img src="<https://cdn.shopify.com/s/files/1/0705/2974/5186/files/package-box-ui-4-svgrepo-com_1.svg?v=1709644612>" alt="Icon 1">
         </div>
         <div class="meta_text">
           <!-- Change the text here - Top left badge -->  
           <p class="meta_titel">Free Shipping</p>
           <p class="meta_untertitel">from €49 in DE</p>
         </div>
       </div>
     </div>
   
     <div class="sectionheroes-trust__advantage">
       <div class="sectionheroes-trust__advantage-content">
         <div class="sectionheroes-trust__advantage-icon">
           <!-- Upload your icon link here -->    
           <img src="<https://cdn.shopify.com/s/files/1/0705/2974/5186/files/klarna-svgrepo-com_3_1.svg?v=1709644222>" alt="Icon 2">
         </div>
         <div class="meta_text">
           <!-- Change the text here - Top right badge -->  
           <p class="meta_titel">Pay in 30 Days</p>
           <p class="meta_untertitel">with Klarna</p>
         </div>
       </div>
     </div>
   </div>
   <!-- Delete everything from here if you only want 2 badges -->
   <div class="sectionheroes-trust__unten">
     <div class="sectionheroes-trust__advantage__unten">
       <div class="sectionheroes-trust__advantage-content">
         <div class="sectionheroes-trust__advantage-icon">
           <!-- Upload your icon link here -->   
           <img src="<https://cdn.shopify.com/s/files/1/0705/2974/5186/files/Qualitaet.svg?v=1709643273>" alt="Icon 1">
         </div>
         <div class="meta_text">
           <!-- Change the text here - Bottom left badge -->  
           <p class="meta_titel">Premium Quality</p>
           <p class="meta_untertitel">Handmade with love</p>
         </div>
       </div>
     </div>
   
     <div class="sectionheroes-trust__advantage__unten">
       <div class="sectionheroes-trust__advantage-content">
         <div class="sectionheroes-trust__advantage-icon">
           <!-- Upload your icon link here -->   
           <img src="<https://cdn.shopify.com/s/files/1/0705/2974/5186/files/garantie_6d77e9ba-9c1c-4ada-a429-88d37403e2e4.svg?v=1709643479>" alt="Icon 2">
         </div>
         <div class="meta_text">
           <!-- Change the text here - Bottom right badge -->  
           <p class="meta_titel">2-Year Warranty</p>
           <p class="meta_untertitel">On all products</p>
         </div>
       </div>
     </div>
   </div>