How to Add Trust Badges on Shopify

Click here to view our example store

Trust badges, or guaranteed/satisfaction badges, a great way to give your customers the confidence they need in your brand. The below tutorial includes 8 icons and is going to be implemented on your home page, no app needed! Let’s get into it.

Create a New Section Liquid

Head over to the Sections folder and click Add a new section, and name the section guarantee and click add. You will now have a bare bone section liquid file with minimal code. Delete all the default code and add the below code to that liquid file.

<div class="guarantee-banner">
   <h2 class="guarantee-header">{{ section.settings.header }}</h2>
   <div class="guarantee-wrapper">
     {% for block in section.blocks %}
      <div class="guarantee-item">
        {% if block.settings.icon == 'van' %}
         <svg class="guarantee-icon" viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;">
            <path class="secondary-color"
               d="M156.88,265.736h99.28c5.36-7.12,14.08-11.68,23.92-11.68s18.64,4.56,24,11.68H368V71.256H156.88  V265.736z" />
            <path class="primary-color"
               d="M368,56H156.88c-8.832,0-16,7.168-16,16v43.6h-36.728H51.28c-5.96,0-11.432,3.32-14.184,8.608  l-35.28,67.68c-0.072,0.144-0.096,0.304-0.16,0.448c-0.464,0.952-0.832,1.944-1.096,2.992c-0.048,0.184-0.128,0.36-0.168,0.552  C0.144,196.968,0,198.112,0,199.28v67.2c0,8.832,7.16,16,16,16h24.72c-0.008,0.328-0.08,0.632-0.08,0.96  c0,24.568,20.56,44.56,45.832,44.56c25.232,0,45.768-19.992,45.768-44.56c0-0.328-0.072-0.64-0.08-0.96h24.72h77.52  c-0.008,0.328-0.08,0.632-0.08,0.96c0,24.568,20.52,44.56,45.76,44.56c25.28,0,45.84-19.992,45.84-44.56  c0-0.328-0.072-0.64-0.08-0.96H368c8.832,0,16-7.168,16-16V72C384,63.168,376.832,56,368,56z M60.984,147.6h27.168v35.68H42.376  L60.984,147.6z M32,215.28h72.152c8.84,0,16-7.168,16-16V147.6h20.728v102.88h-23.568c-0.168-0.152-0.368-0.256-0.536-0.4  c-1.824-1.576-3.752-3.016-5.8-4.288c-0.392-0.24-0.8-0.448-1.2-0.672c-1.904-1.104-3.88-2.072-5.936-2.896  c-0.368-0.152-0.72-0.32-1.096-0.464c-2.288-0.848-4.648-1.496-7.056-1.984c-0.536-0.112-1.08-0.192-1.624-0.28  c-2.496-0.416-5.024-0.696-7.592-0.696c-2.584,0-5.12,0.288-7.632,0.696c-0.528,0.088-1.056,0.168-1.584,0.272  c-2.448,0.488-4.848,1.144-7.168,2.008c-0.288,0.112-0.56,0.24-0.848,0.352c-2.248,0.888-4.408,1.944-6.472,3.152  c-0.224,0.136-0.464,0.248-0.68,0.384c-2.184,1.336-4.232,2.856-6.152,4.536c-0.112,0.104-0.256,0.168-0.368,0.272H32V215.28z   M86.48,296c-7.632,0-13.832-5.632-13.832-12.56c0-2.64,0.832-5.032,2.608-7.336c4.704-6.232,15.864-6.576,21.352-1.016  c0.4,0.408,0.832,0.768,1.184,1.232c1.632,2.096,2.464,4.488,2.464,7.12C100.24,290.368,94.072,296,86.48,296z M280.08,296  c-7.584,0-13.76-5.632-13.76-12.56c0-2.64,0.832-5.032,2.608-7.336c4.736-6.272,15.816-6.52,21.288-1.08  c0.424,0.424,0.88,0.808,1.248,1.296c1.632,2.096,2.464,4.488,2.464,7.12C293.92,290.368,287.712,296,280.08,296z M310.984,250.48  c-0.16-0.144-0.36-0.24-0.52-0.384c-1.832-1.584-3.776-3.032-5.832-4.304c-0.384-0.24-0.784-0.44-1.176-0.664  c-1.912-1.104-3.904-2.08-5.968-2.904c-0.368-0.144-0.712-0.32-1.088-0.456c-2.288-0.848-4.664-1.496-7.08-1.976  c-0.544-0.112-1.08-0.192-1.632-0.28c-2.504-0.416-5.04-0.696-7.616-0.696s-5.104,0.288-7.608,0.696  c-0.528,0.088-1.048,0.168-1.576,0.272c-2.448,0.488-4.84,1.144-7.152,2.008c-0.288,0.104-0.56,0.24-0.84,0.352  c-2.248,0.888-4.4,1.944-6.464,3.152c-0.224,0.136-0.456,0.248-0.68,0.384c-2.192,1.336-4.24,2.864-6.16,4.552  c-0.112,0.096-0.24,0.16-0.352,0.256h-76.36V131.6V88H352v35.624H245.336c-8.84,0-16,7.168-16,16s7.16,16,16,16H352V174.4h-71.896  c-8.832,0-16,7.16-16,16c0,8.832,7.168,16,16,16H352v44.08L310.984,250.48L310.984,250.48z" />
         </svg>
        {% elsif block.settings.icon == 'cart' %}
        <svg class="guarantee-icon" viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;">
            <polygon class="secondary-color" points="121.683,244.296 322.403,244.296 368.003,93.336 86.803,93.336 " />
            <path class="primary-color"
               d="M227.011,27.44c-8.832,0-16,7.168-16,16v34.64H99.531L84.395,12.408C82.723,5.144,76.259,0,68.803,0  h-52.8c-8.832,0-16,7.168-16,16s7.168,16,16,16h40.072l15.136,65.664c0,0.008,0,0.008,0,0.016l30.352,131.376H84.675  c-23.384,0-42.416,19-42.416,42.344c0,23.352,19.024,42.344,42.416,42.344h22.968c-2.4,5.912-3.752,12.36-3.752,19.128  c0,28.192,22.976,51.128,51.216,51.128c28.232,0,51.208-22.936,51.208-51.128c0-6.768-1.352-13.208-3.752-19.128h45.944  c-2.4,5.912-3.752,12.36-3.752,19.128c0,28.192,22.976,51.128,51.216,51.128c28.232,0,51.2-22.936,51.2-51.128  s-22.968-51.128-51.2-51.128H84.675c-5.744,0-10.416-4.64-10.416-10.344c0-5.704,4.672-10.344,10.416-10.344h237.688  c1.64,0,3.192-0.32,4.68-0.776c0.248-0.08,0.496-0.144,0.736-0.232c1.408-0.504,2.72-1.184,3.904-2.04  c0.224-0.16,0.408-0.344,0.624-0.512c1.04-0.832,1.976-1.776,2.784-2.848c0.144-0.184,0.304-0.336,0.44-0.528  c0.816-1.184,1.424-2.504,1.904-3.888c0.072-0.2,0.216-0.36,0.28-0.568l45.6-150.96c1.464-4.84,0.544-10.096-2.472-14.168  c-3.008-4.064-7.776-6.456-12.84-6.456H243.011V43.44C243.011,34.608,235.843,27.44,227.011,27.44z M174.315,332.872  c0,10.544-8.616,19.128-19.208,19.128s-19.216-8.576-19.216-19.128c0-10.544,8.624-19.128,19.216-19.128  C165.699,313.752,174.315,322.328,174.315,332.872z M295.971,352c-10.6,0-19.216-8.576-19.216-19.128  c0-10.544,8.624-19.128,19.216-19.128s19.2,8.576,19.2,19.128S306.563,352,295.971,352z M346.459,110.08l-35.936,118.96H134.411  l-27.488-118.96h104.088v34.224l-5.544-4.6c-6.8-5.632-16.88-4.688-22.528,2.104c-5.64,6.8-4.696,16.888,2.104,22.528l31.76,26.344  c0.232,0.192,0.48,0.32,0.72,0.496c0.344,0.256,0.688,0.504,1.056,0.728c0.496,0.304,1,0.576,1.52,0.824  c0.368,0.176,0.728,0.36,1.112,0.504c0.592,0.232,1.192,0.4,1.8,0.56c0.344,0.088,0.68,0.2,1.04,0.272  c0.984,0.184,1.984,0.296,2.976,0.296c1,0,1.992-0.112,2.976-0.296c0.352-0.064,0.688-0.176,1.032-0.272  c0.608-0.16,1.208-0.328,1.8-0.56c0.384-0.152,0.744-0.328,1.112-0.504c0.52-0.248,1.024-0.512,1.52-0.824  c0.368-0.232,0.712-0.472,1.056-0.728c0.232-0.176,0.488-0.304,0.72-0.496l31.76-26.344c6.8-5.648,7.744-15.728,2.104-22.528  c-5.64-6.808-15.744-7.736-22.528-2.104l-5.544,4.6V110.08H346.459z" />
         </svg>
        {% elsif block.settings.icon == 'arrows' %}
         <svg class="guarantee-icon" viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;">
            <path class="primary-color"
               d="M16,207.68c8.832,0,16-7.168,16-16C32,103.632,103.328,32,191,32   c38.456,0,74.584,13.608,103.064,38.072H279.4c-8.832,0-16,7.168-16,16s7.168,16,16,16h52.512c8.832,0,16-7.168,16-16V33.336   c0-8.832-7.168-16-16-16s-16,7.168-16,16v13.336C281.544,16.704,237.712,0,191,0C85.68,0,0,85.992,0,191.68   C0,200.512,7.16,207.68,16,207.68z" />
            <path class="primary-color"
               d="M368,176.32c-8.84,0-16,7.16-16,16C352,280.368,280.672,352,193,352   c-38.016,0-73.752-13.28-102.072-37.2h15.368c8.832,0,16-7.168,16-16c0-8.84-7.168-16-16-16h-52.52c-0.144,0-0.272,0.04-0.408,0.04   c-0.608,0.016-1.216,0.104-1.816,0.184c-0.448,0.064-0.896,0.104-1.336,0.208c-0.528,0.12-1.048,0.312-1.568,0.488   c-0.48,0.168-0.968,0.312-1.432,0.52c-0.44,0.2-0.856,0.456-1.28,0.696c-0.504,0.288-1,0.56-1.472,0.896   c-0.12,0.088-0.256,0.136-0.376,0.232c-0.272,0.208-0.48,0.464-0.736,0.688c-0.432,0.368-0.848,0.736-1.232,1.152   c-0.36,0.384-0.672,0.784-0.984,1.2c-0.312,0.408-0.616,0.816-0.896,1.248c-0.28,0.448-0.52,0.912-0.752,1.376   c-0.224,0.456-0.448,0.912-0.632,1.4c-0.184,0.496-0.328,0.992-0.464,1.504c-0.136,0.488-0.264,0.976-0.344,1.48   c-0.096,0.568-0.136,1.136-0.168,1.712c-0.024,0.328-0.096,0.64-0.096,0.984v52.736c0,8.832,7.168,16,16,16s16-7.168,16-16v-12.72   C103.88,367.856,147.056,384,193,384c105.32,0,191-85.992,191-191.68C384,183.48,376.832,176.32,368,176.32z" />
         </svg>
        {% elsif block.settings.icon == 'bubble' %}
         <svg class="guarantee-icon" viewBox="0 0 384.138 384.138" style="enable-background:new 0 0 384.138 384.138;">
            <path class="secondary-color"
               d="M22.457,282.973c13.36,13.28,61.44-12.88,61.44-12.88c6.16,3.6,12.96,6.48,19.52,8.96  c-18.48-48.72-8.08-105.92,31.12-145.12c39.52-39.52,97.12-49.84,146.08-30.88c-6.72-17.36-17.04-33.68-31.04-47.76  c-53.44-53.36-140.08-53.36-193.44,0c-45.2,45.2-52.16,114.08-20.88,166.56C35.257,221.853,9.177,269.773,22.457,282.973z" />
            <path class="primary-color"
               d="M292.705,91.693c-7.664-17.472-18.224-33.304-31.824-46.976   c-59.608-59.512-156.528-59.512-216.056,0.008C-2.527,92.077-13.359,164.133,17.097,222.853   c-11.136,22.464-22.76,55.472-5.912,72.216c16.92,16.824,50.176,5.016,72.68-6.168c2.336,1.12,4.888,2.232,7.568,3.344   c7.584,17.48,18.12,33.36,31.808,47.12c29.448,29.392,68.592,44.688,108.112,44.688c23.528,0,47.2-5.424,69.032-16.52   c22.504,11.208,55.664,22.968,72.592,6.144c16.8-16.808,5.176-49.76-5.952-72.184c30.48-58.768,19.648-130.832-27.736-178.12   C325.689,109.765,309.969,99.245,292.705,91.693z M76.249,256.781c-15.072,8.2-33.696,14.696-41.648,14.792   c0.136-7.896,6.592-26.368,14.712-41.336l4.344-8.008l-4.664-7.824c-28.28-47.44-20.688-107.912,18.448-147.056   c23.536-23.528,54.464-35.296,85.392-35.296c30.92,0,61.848,11.76,85.392,35.264c3.864,3.888,7.44,7.992,10.712,12.288   c-1.264-0.144-2.536-0.216-3.8-0.336c-1.056-0.096-2.104-0.2-3.16-0.28c-2.928-0.208-5.864-0.328-8.792-0.368   c-0.392-0.008-0.792-0.032-1.184-0.04c-3.304-0.016-6.6,0.096-9.888,0.296c-0.984,0.056-1.96,0.16-2.936,0.24   c-2.352,0.192-4.704,0.424-7.048,0.72c-1.128,0.144-2.248,0.296-3.368,0.464c-2.344,0.352-4.672,0.76-7,1.224   c-0.944,0.184-1.896,0.352-2.84,0.552c-3.2,0.696-6.384,1.472-9.536,2.368c-0.528,0.152-1.048,0.336-1.576,0.496   c-2.64,0.784-5.256,1.632-7.856,2.56c-1.04,0.368-2.064,0.768-3.096,1.168c-2.128,0.808-4.248,1.672-6.344,2.576   c-1.04,0.448-2.072,0.896-3.104,1.368c-2.344,1.08-4.656,2.232-6.952,3.424c-0.664,0.352-1.344,0.664-2.008,1.024   c-2.896,1.568-5.752,3.248-8.552,5.008c-0.776,0.488-1.52,1.016-2.288,1.512c-2.064,1.352-4.104,2.744-6.104,4.2   c-0.936,0.68-1.856,1.376-2.776,2.072c-1.888,1.44-3.736,2.928-5.568,4.456c-0.816,0.688-1.648,1.36-2.448,2.064   c-2.56,2.24-5.072,4.544-7.504,6.968c-2.44,2.44-4.76,4.968-7.008,7.536c-0.728,0.832-1.408,1.696-2.12,2.536   c-1.496,1.792-2.96,3.6-4.368,5.448c-0.752,0.992-1.488,1.992-2.216,3c-1.304,1.808-2.568,3.64-3.784,5.496   c-0.664,1-1.328,2-1.96,3.016c-1.32,2.12-2.576,4.272-3.784,6.448c-0.424,0.76-0.88,1.504-1.296,2.272   c-1.576,2.936-3.048,5.92-4.424,8.944c-0.336,0.736-0.624,1.496-0.944,2.24c-1.008,2.32-1.976,4.656-2.872,7.024   c-0.416,1.112-0.8,2.232-1.192,3.36c-0.72,2.056-1.408,4.128-2.04,6.216c-0.36,1.184-0.712,2.368-1.04,3.568   c-0.592,2.144-1.128,4.304-1.632,6.48c-0.256,1.096-0.528,2.184-0.752,3.28c-0.6,2.896-1.12,5.816-1.552,8.744   c-0.056,0.36-0.128,0.712-0.184,1.072c-0.464,3.264-0.792,6.544-1.04,9.84c-0.08,1.08-0.112,2.152-0.168,3.232   c-0.12,2.264-0.216,4.528-0.24,6.8c-0.008,1.256,0,2.504,0.024,3.76c0.032,2.152,0.112,4.304,0.232,6.464   c0.072,1.24,0.136,2.48,0.24,3.72c0.192,2.36,0.464,4.72,0.768,7.072c0.128,0.992,0.224,1.984,0.368,2.968   c0.032,0.216,0.048,0.44,0.08,0.656L76.249,256.781z M334.801,308.885c8.128,14.96,14.584,33.416,14.712,41.312   c-7.936-0.128-26.552-6.64-41.64-14.848l-7.944-4.32l-7.792,4.552c-47.288,27.648-107.464,19.904-146.256-18.832   c-12.208-12.28-21.464-26.616-27.504-42.632c-16.816-44.336-6.032-94.624,27.472-128.136c2.6-2.6,5.328-5.016,8.112-7.336   c0.776-0.648,1.568-1.264,2.36-1.888c2.208-1.744,4.464-3.408,6.768-4.984c0.736-0.504,1.456-1.024,2.2-1.512   c3.008-1.96,6.072-3.8,9.216-5.48c0.408-0.216,0.832-0.4,1.248-0.616c2.776-1.432,5.592-2.752,8.456-3.96   c0.896-0.376,1.792-0.736,2.696-1.096c2.72-1.072,5.472-2.048,8.256-2.92c0.632-0.2,1.256-0.432,1.888-0.616   c3.408-1.008,6.864-1.864,10.344-2.568c0.68-0.136,1.368-0.232,2.056-0.36c2.848-0.528,5.72-0.944,8.608-1.264   c0.936-0.104,1.88-0.208,2.824-0.288c3.216-0.28,6.448-0.448,9.68-0.472c0.328,0,0.656-0.032,0.984-0.032   c3.392,0.008,6.784,0.168,10.176,0.464c0.792,0.072,1.576,0.184,2.368,0.272c2.584,0.272,5.16,0.624,7.728,1.064   c1.04,0.176,2.08,0.384,3.12,0.592c2.44,0.488,4.864,1.064,7.28,1.704c0.952,0.248,1.904,0.48,2.848,0.752   c3.296,0.96,6.568,2.024,9.808,3.28l0.04,0.016c15.64,6.008,29.696,15.176,41.776,27.256c39.16,39.088,46.744,99.552,18.44,147.04   l-4.672,7.848L334.801,308.885z" />
            <path class="primary-color"
               d="M224.393,136.861c-45.304,6.824-80.488,41.816-87.544,87.064c-1.36,8.728,4.608,16.912,13.336,18.28   c0.832,0.128,1.664,0.192,2.488,0.192c7.744,0,14.56-5.64,15.792-13.536c4.816-30.88,29.776-55.704,60.696-60.36   c8.736-1.312,14.752-9.464,13.44-18.2C241.281,141.557,233.113,135.525,224.393,136.861z" />
         </svg>
        {% elsif block.settings.icon == 'click' %}
         <svg class="guarantee-icon" viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;">
            <polygon class="secondary-color"
               points="344,193.56 104.568,104.128 194.104,343.312 247.152,290.32 324.168,367.256 368,323.472   290.976,246.536 " />
            <path class="primary-color"
               d="M313.616,247.28l41.696-41.664c3.848-3.848,5.472-9.392,4.32-14.712   c-1.152-5.32-4.936-9.688-10.032-11.592L110.16,89.88c-5.872-2.192-12.48-0.752-16.912,3.68c-4.432,4.432-5.864,11.048-3.664,16.92   l89.536,239.184c1.904,5.096,6.272,8.872,11.592,10.024c5.304,1.128,10.848-0.472,14.696-4.32l41.744-41.688l65.712,65.64   c3.112,3.12,7.208,4.68,11.296,4.68s8.184-1.56,11.304-4.68l43.832-43.784c3.016-3,4.704-7.072,4.704-11.32   s-1.688-8.32-4.696-11.32L313.616,247.28z M324.16,345.384l-65.712-65.648c-3.12-3.12-7.208-4.68-11.304-4.68   c-4.096,0-8.184,1.56-11.304,4.68l-35.472,35.424l-68.52-183.024l183.216,68.44l-35.416,35.384c-3,3-4.688,7.072-4.688,11.32   c0,4.248,1.688,8.32,4.696,11.32l65.688,65.616L324.16,345.384z" />
            <path class="primary-color"
               d="M54.336,32.056c-6.248-6.248-16.376-6.232-22.624,0.016s-6.24,16.384,0.016,22.624l14.824,14.808   c0,0,0.008,0,0.008,0.008l7.584,7.568c3.12,3.12,7.216,4.68,11.304,4.68c4.096,0,8.192-1.568,11.32-4.696   c6.248-6.248,6.24-16.384-0.016-22.624L54.336,32.056z" />
            <path class="primary-color"
               d="M161.488,47.64V16c0-8.832-7.168-16-16-16c-8.84,0-16,7.168-16,16v31.64c0,8.832,7.16,16,16,16   C154.32,63.64,161.488,56.472,161.488,47.64z" />
            <path class="primary-color"
               d="M63.688,145.36c0-8.832-7.16-16-16-16H16c-8.84,0-16,7.168-16,16s7.16,16,16,16h31.688   C56.52,161.36,63.688,154.2,63.688,145.36z" />
         </svg>
        {% elsif block.settings.icon == 'award' %}
         <svg class="guarantee-icon" viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;">
            <path class="secondary-color"
               d="M121.921,367.256l70.08-108.16l70.08,108.16l13.52-51.68l52.4,8.4l-67.68-104.48  c-18.96,14.56-42.64,23.2-68.32,23.2s-49.36-8.64-68.32-23.2l-67.68,104.48l52.4-8.4L121.921,367.256z" />
            <path class="primary-color"
               d="M42.593,333.456c3.456,5.296,9.68,8.072,15.936,7.064l38.064-6.096l9.848,37.632   c1.608,6.136,6.68,10.736,12.944,11.744c6.232,0.984,12.512-1.784,15.968-7.096l56.648-87.44l56.648,87.432   c2.984,4.6,8.064,7.304,13.432,7.304c0.832,0,1.688-0.064,2.536-0.2c6.256-1.008,11.336-5.616,12.936-11.744l9.848-37.632   l38.064,6.096c6.24,1.008,12.48-1.768,15.936-7.064s3.464-12.128,0.024-17.432l-60.096-92.776   c25.344-24.344,39.624-57.696,39.624-93.568C320.961,58.176,263.113,0,192.001,0S63.041,58.176,63.041,129.68   c0,35.88,14.296,69.24,39.624,93.568l-60.096,92.768C39.137,321.328,39.145,328.16,42.593,333.456z M278.137,300.52   c-8.064-1.304-15.92,3.776-18.008,11.744l-4.344,16.592l-45.784-70.664c0.456-0.064,0.896-0.184,1.344-0.256   c2.688-0.4,5.336-0.936,7.984-1.504c1.064-0.232,2.136-0.4,3.192-0.656c3.696-0.904,7.352-1.944,10.944-3.176   c0.408-0.144,0.808-0.328,1.216-0.472c3.16-1.12,6.28-2.352,9.344-3.72c1.112-0.496,2.2-1.072,3.304-1.6   c2.32-1.12,4.624-2.272,6.888-3.536c0.48-0.272,0.992-0.48,1.472-0.752l39.32,60.696L278.137,300.52z M95.041,129.68   c0-53.856,43.496-97.68,96.96-97.68s96.96,43.824,96.96,97.68c0,30.848-13.976,59.224-38.384,77.872   c-16.944,13.008-37.2,19.888-58.576,19.888s-41.632-6.88-58.608-19.92C109.017,188.904,95.041,160.528,95.041,129.68z    M128.305,242.528c0.496,0.288,1.024,0.504,1.52,0.784c2.192,1.224,4.424,2.336,6.672,3.424c1.176,0.568,2.328,1.176,3.512,1.704   c2.976,1.328,6,2.512,9.064,3.608c0.496,0.176,0.976,0.4,1.472,0.568c3.584,1.224,7.224,2.264,10.912,3.168   c1.072,0.264,2.168,0.44,3.248,0.672c2.632,0.568,5.264,1.096,7.936,1.496c0.456,0.072,0.896,0.192,1.352,0.256l-45.784,70.664   l-4.336-16.592c-1.864-7.128-8.304-11.952-15.464-11.952c-0.84,0-1.696,0.064-2.544,0.2l-16.88,2.704L128.305,242.528z" />
            <path class="primary-color"
               d="M157.785,139.088l-5.992,18.536c-2.128,6.6,0.232,13.824,5.856,17.88   c5.616,4.064,13.216,4.04,18.816-0.048l15.536-11.352l15.544,11.36c2.8,2.056,6.128,3.08,9.44,3.08   c3.288,0,6.576-1.008,9.376-3.032c5.616-4.064,7.984-11.288,5.856-17.888l-5.992-18.528l15.632-11.432   c5.584-4.088,7.912-11.304,5.768-17.88c-2.144-6.576-8.288-11.032-15.208-11.032h-19.224l-5.952-18.456   c-2.144-6.616-8.296-11.096-15.24-11.096s-13.096,4.48-15.224,11.088l-5.96,18.456h-19.224c-6.92,0-13.056,4.456-15.208,11.032   c-2.152,6.584,0.176,13.8,5.768,17.88L157.785,139.088z M192.001,127.592c0.096,0.072,0.2,0.152,0.304,0.216   c-0.056,0.152-0.104,0.312-0.16,0.472c-0.104,0-0.192,0-0.296,0c-0.048-0.16-0.104-0.32-0.152-0.472   C191.801,127.736,191.897,127.664,192.001,127.592z" />
         </svg>
        {% elsif block.settings.icon == 'heart' %}
         <svg class="guarantee-icon" viewBox="0 0 383.907 383.907" style="enable-background:new 0 0 383.907 383.907;">
            <path class="secondary-color"
               d="M302.227,173.171c-36.24,0-65.6,29.36-65.6,65.6c0,18.64,7.76,35.44,20.16,47.36  c11.84,11.36,27.76,18.32,45.44,18.32c36.24,0,65.68-29.36,65.68-65.68c0-18.24-7.44-34.64-19.44-46.56  C336.627,180.451,320.307,173.171,302.227,173.171z" />
            <path class="primary-color"
               d="M321.571,223.555h-3.312v-3.328c0-8.832-7.168-16-16-16s-16,7.168-16,16v3.328h-3.336   c-8.832,0-16,7.168-16,16s7.168,16,16,16h3.336v3.328c0,8.832,7.168,16,16,16s16-7.168,16-16v-3.328h3.312c8.832,0,16-7.168,16-16   S330.411,223.555,321.571,223.555z" />
            <path class="primary-color"
               d="M349.051,50.507c-42.4-42.32-109.312-45.632-155.552-9.928   C146.723,4.659,77.067,7.963,34.427,50.531c-45.904,46-45.904,120.84,0.008,166.848l145.92,145.92   c3,3.008,7.072,4.696,11.312,4.696c4.24,0,8.312-1.688,11.312-4.688l55.096-55.104c13.08,8.448,28.312,12.984,44.152,12.984   c45.04,0,81.68-36.64,81.68-81.68c0-17.352-5.48-33.832-15.496-47.656C394.171,146.211,386.731,88.275,349.051,50.507z    M191.667,329.363L57.075,194.771c-33.464-33.536-33.464-88.104-0.024-121.616c16.688-16.656,39.656-24.984,62.608-24.984   s45.896,8.328,62.536,24.968c6.248,6.248,16.368,6.248,22.616,0.016c33.536-33.472,88.104-33.472,121.608-0.024   c25.624,25.68,32.072,64.168,17.568,96.224c-0.416-0.248-0.88-0.416-1.304-0.664c-2.32-1.328-4.688-2.536-7.12-3.624   c-0.568-0.256-1.112-0.552-1.68-0.792c-2.968-1.248-6.008-2.296-9.112-3.176c-0.8-0.232-1.624-0.4-2.432-0.608   c-2.44-0.616-4.904-1.12-7.4-1.504c-0.936-0.144-1.864-0.296-2.808-0.416c-3.272-0.392-6.56-0.664-9.904-0.664   c-45,0-81.6,36.608-81.6,81.6c0,2.528,0.152,5.024,0.376,7.512c0.064,0.736,0.16,1.472,0.248,2.208   c0.216,1.824,0.488,3.624,0.816,5.416c0.136,0.72,0.256,1.448,0.408,2.16c0.496,2.32,1.064,4.608,1.76,6.864   c0.024,0.088,0.048,0.184,0.072,0.272c0.728,2.336,1.592,4.624,2.528,6.88c0.272,0.656,0.576,1.304,0.864,1.96   c0.736,1.648,1.52,3.264,2.368,4.864c0.344,0.656,0.688,1.32,1.056,1.968c1.104,1.952,2.28,3.872,3.552,5.736   c0.12,0.176,0.216,0.36,0.336,0.528c0.016,0.024,0.032,0.056,0.048,0.08L191.667,329.363z M302.227,289.195   c-12.84,0-25.04-4.928-34.352-13.856c-9.832-9.456-15.248-22.176-15.248-35.824c0-27.344,22.248-49.6,49.6-49.6   c4.952,0,9.792,0.72,14.4,2.104c7.68,2.312,14.72,6.48,20.56,12.288c0.008,0.008,0.008,0.008,0.016,0.008   c9.48,9.432,14.704,21.928,14.704,35.2C351.907,266.907,329.619,289.195,302.227,289.195z" />
            <path class="primary-color"
               d="M117.211,71.155c-32.888,0-59.64,26.76-59.64,59.648c0,8.832,7.168,16,16,16s16-7.168,16-16   c0-15.24,12.4-27.648,27.64-27.648c8.832,0,16-7.168,16-16S126.051,71.155,117.211,71.155z" />
         </svg>
        {% elsif block.settings.icon == 'money' %}
         <svg class="guarantee-icon" viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;">
            <path class="secondary-color"
               d="M192,15.256c-97.2,0-176,79.232-176,176.952c0,97.752,78.8,175.048,176,175.048  s176-77.296,176-175.048C368,94.496,289.2,15.256,192,15.256z" />
            <path class="primary-color"
               d="M192,0C86.136,0,0,86.56,0,192.952C0,298.296,86.136,384,192,384s192-85.704,192-191.048   C384,86.56,297.864,0,192,0z M192,352c-88.224,0-160-71.344-160-159.048C32,104.2,103.776,32,192,32s160,72.2,160,160.952   C352,280.656,280.224,352,192,352z" />
            <path class="primary-color"
               d="M212.952,176H208v-27.704h26c8.832,0,16-7.168,16-16s-7.168-16-16-16h-26v-7.24   c0-8.832-7.168-16-16-16c-8.84,0-16,7.168-16,16v7.24h-5.256c-25.2,0-45.704,20.568-45.704,45.848   c0,25.288,20.504,45.856,45.704,45.856H176v27.68h-26c-8.84,0-16,7.168-16,16s7.16,16,16,16h26v7.256c0,8.832,7.16,16,16,16   c8.832,0,16-7.168,16-16v-7.256h5.256c25.2,0,45.704-20.56,45.704-45.832C258.96,196.568,238.464,176,212.952,176z M170.744,176   c-7.552,0-13.704-6.216-13.704-13.856s6.144-13.848,13.704-13.848H176V176H170.744z M213.256,235.68H208V208h5.256   c7.552,0,13.704,6.216,13.704,13.856C226.96,229.48,220.816,235.68,213.256,235.68z" />
            <path class="primary-color"
               d="M292.24,122.384c-7.832,4.088-10.872,13.752-6.792,21.584c7.68,14.704,11.736,31.32,11.736,48.024   c0,16.96-3.944,33.12-11.736,48.04c-4.088,7.832-1.048,17.504,6.792,21.584c2.36,1.232,4.888,1.824,7.384,1.824   c5.776,0,11.344-3.136,14.2-8.6c10.048-19.264,15.36-40.984,15.36-62.832s-5.312-43.584-15.36-62.84   C309.744,121.336,300.072,118.288,292.24,122.384z" />
            <path class="primary-color"
               d="M91.76,122.384c-7.808-4.088-17.496-1.048-21.584,6.784c-10.048,19.264-15.36,40.984-15.36,62.832   s5.312,43.584,15.36,62.84c2.856,5.472,8.432,8.6,14.2,8.6c2.488,0,5.024-0.584,7.384-1.824   c7.832-4.088,10.872-13.752,6.792-21.584c-7.68-14.704-11.736-31.312-11.736-48.024c0-16.96,3.944-33.12,11.736-48.04   C102.632,136.136,99.592,126.472,91.76,122.384z" />
         </svg>
        {% endif %}
         <h3 class="guarantee-title">{{ block.settings.icon_header }}</h5>
         <p class="guarantee-text">{{ block.settings.icon_text }}</p>
      </div>
     {% endfor %}
   </div>
<!--- Coded by jotting.com --->
</div>
{% style %}
.primary-color {
  fill: {{ section.settings.primary_color }};
}
.secondary-color {
  fill: {{ section.settings.secondary_color }};
}
{% endstyle %}
{% schema %}
{
  "name": "Guarantee",
  "settings": [
  {
    "type": "text",
    "id": "header",
    "label": "Guarantee badge header"
  },
  {
    "type": "color",
    "id": "primary_color",
    "label": "Primary icon color"
  },
  {
    "type": "color",
    "id": "secondary_color",
    "label": "Secondary icon color"
  }
  ] ,
  "blocks": [
  {
	"type": "badge",
	"name": "Guarantee badge",
	"settings": [
	  {
	    "type": "select",
		"id": "icon",
		"label": "Choose an icon",
        "options": [
          {
            "value": "arrows",
            "label": "Arrows circle"
          },
          {
            "value": "award",
            "label": "Award/Guarantee"
          },
          {
            "value": "money",
            "label": "Dollar sign"
          },
          {
            "value": "heart",
            "label": "Love heard"
          },
          {
            "value": "click",
            "label": "Mouse click"
          },
          {
            "value": "cart",
            "label": "Shipping cart"
          },
          {
            "value": "van",
            "label": "Shipping van"
          },
          {
            "value": "bubble",
            "label": "Text bubble"
          }
        ],
        "default": "van"
	  },
	  {
	    "type": "text",
		"id": "icon_header",
		"label": "Icon header"
	  },
	  {
	    "type": "text",
		"id": "icon_text",
		"label": "Icon text"
	  }
      ]
  }
  ] ,
  "presets": [
  {
    "name": "Guarantee badges",
    "category":"Custom"
  }
  ]
}
{% endschema %}

Add Code in Theme.css

Go to the Assets folder, find the style sheet (“CSS/SCSS”) file your theme uses, we are using the free Shopify Dawn theme, so in this case the CSS/SCSS file is named base.css. Scroll to the very bottom and paste the below code.

.guarantee-icon {
  width: 48px;
}
.guarantee-header {
  text-align: center;
  font-size: 32px;
}
.guarantee-banner {
  max-width: 1200px;
  margin: auto;
  padding-bottom: 32px;
  margin-top: 55px;
}
.guarantee-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.guarantee-item {
  text-align: center;
  margin: 20px 10px;
}
.guarantee-item svg {
  margin-bottom: 15px;
  height: 50px;
}
  
@media ( max-width: 749px ) {
  .guarantee-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

Create Trust Badges in The Customizer

You’re done! Go to your theme customizer. Find the Guarantee section and add it to your home page.

The theme customizer comes with a few options, first, the ability to change the icon’s primary and secondary color.

Second, when you click the Add Guarantee Badge, you will have the ability to select which icon you would like, out of the 8 icons. We highly recommend 4 badges in total.

You’re done! Enjoy your new badges with confidence!