Trust guarantees section
for Dawn and Horizon.

Build trust and highlight your value propositions with this clean icon grid. Perfect for displaying free shipping, return policies, and secure checkout guarantees anywhere on your site. Dynamically adjusts layout based on the number of blocks you add.

TypeSection

Filesections/jlx-trust-guarantees.liquid

Schema settings1 section setting + 3 per block

CostFree

Compatible with:Dawn 12+HorizonMost OS 2.0 themes

The code

One file. Paste the whole thing into a new section.

sections/jlx-trust-guarantees.liquid

Liquid · CSS · Schema

{% comment %}
  Jelonyx · Trust Guarantees Section
  Compatible with Dawn 12+, Horizon, and most OS 2.0 themes
  Source: jelonyx.com/shopify/sections/trust-guarantees
{% endcomment %}

<section id="jlx-trust-{{ section.id }}" class="jlx-trust">
  <div class="jlx-trust__inner">
    {%- if section.settings.heading != blank -%}
      <div class="jlx-trust__header">
        <h2 class="jlx-trust__heading">{{ section.settings.heading }}</h2>
      </div>
    {%- endif -%}

    <div class="jlx-trust__grid" style="--jlx-trust-cols: {{ section.blocks.size }}">
      {%- for block in section.blocks -%}
        <div class="jlx-trust__item" {{ block.shopify_attributes }}>
          {%- if block.settings.icon_svg != blank -%}
            <div class="jlx-trust__icon">
              {{ block.settings.icon_svg }}
            </div>
          {%- endif -%}
          <div class="jlx-trust__content">
            <h3 class="jlx-trust__title">{{ block.settings.title }}</h3>
            {%- if block.settings.text != blank -%}
              <div class="jlx-trust__text">{{ block.settings.text }}</div>
            {%- endif -%}
          </div>
        </div>
      {%- endfor -%}
    </div>
  </div>
</section>

<style>
  #jlx-trust-{{ section.id }} {
    padding: clamp(40px, 6vw, 60px) 20px;
    background: var(--color-background, #fff);
  }
  .jlx-trust__inner {
    max-width: 1200px;
    margin: 0 auto;
  }
  .jlx-trust__header {
    text-align: center;
    margin-bottom: 40px;
  }
  .jlx-trust__heading {
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 700;
    color: var(--color-foreground, #1a1a1a);
    margin: 0;
  }
  .jlx-trust__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
  }
  @media screen and (min-width: 768px) {
    .jlx-trust__grid {
      grid-template-columns: repeat(var(--jlx-trust-cols, 3), 1fr);
      gap: 40px;
    }
  }
  .jlx-trust__item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .jlx-trust__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-foreground, #1a1a1a);
  }
  .jlx-trust__icon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .jlx-trust__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-foreground, #1a1a1a);
    margin: 0 0 8px;
  }
  .jlx-trust__text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-foreground-secondary, #6b6b6b);
  }
  .jlx-trust__text p {
    margin: 0;
  }
</style>

{% schema %}
{
  "name": "Trust guarantees",
  "tag": "section",
  "max_blocks": 4,
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Why choose us"
    }
  ],
  "blocks": [
    {
      "type": "guarantee",
      "name": "Guarantee",
      "settings": [
        {
          "type": "html",
          "id": "icon_svg",
          "label": "Icon SVG",
          "info": "Paste Raw SVG code."
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Free Shipping"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Text",
          "default": "<p>On all orders over $50.</p>"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Trust guarantees",
      "blocks": [
        {
          "type": "guarantee",
          "settings": {
            "title": "Free Shipping",
            "text": "<p>On all orders over $50.</p>"
          }
        },
        {
          "type": "guarantee",
          "settings": {
            "title": "Easy Returns",
            "text": "<p>30-day money-back guarantee.</p>"
          }
        },
        {
          "type": "guarantee",
          "settings": {
            "title": "Secure Checkout",
            "text": "<p>Your payment information is safe.</p>"
          }
        }
      ]
    }
  ]
}
{% endschema %}

How to add the section

01
Open your theme code editor.
In Shopify Admin, go to Online Store → Themes. On your active theme, click the three-dot menu and select Edit code.
02
Create a new section file.
Under the Sections folder, click Add a new section. Name it jlx-trust-guarantees and click Done.
03
Paste the full section code.
Delete any placeholder content in the new file, paste the entire code block above, and save.
04
Add the section to a template.
Open the theme editor (Customize). Navigate to your desired template. Click Add section and select Trust guarantees.
05
Add your guarantees as blocks.
Add up to 4 blocks. For the icon, copy the raw SVG code from a site like Heroicons or Phosphor Icons and paste it into the Icon SVG field.

Schema settings

Section-level settings:

SettingTypeNotes

headingtextMain title above the grid.

Block settings (per guarantee):

SettingTypeNotes

icon_svghtmlRaw SVG code for the icon.

titletextThe title of the guarantee.

textrichtextShort descriptive text below the title.

Shopify Section Build

Need this built for your store?

If you need custom icons designed, an inline layout instead of a grid, or dynamic badges based on product tags, we can customize this for you.

Build this for my store Book a 30 min call →