Regarding trust badges?

Technical Q&A
1

does someone have fully customisable payment trsut badges custom code, with all of its customisations-from images to text? pls help

2

Hey @hiten890

Easiest way to get exactly what you’re describing is a custom section with image blocks, so every badge is something you upload and the heading is editable, all from the theme customizer.

Drop this in as a new file sections/trust-badges.liquid (Online Store > Themes > Edit code > Add a new section), save, then in Customize hit Add section > Trust badges, upload your own badge images in the blocks and set the text:

<div class="trust-badges" style="text-align:{{ section.settings.alignment }}; background:{{ section.settings.bg }}; padding:{{ section.settings.padding_y }}px 16px;">
  {%- if section.settings.heading != blank -%}
    <p class="trust-badges__heading" style="color:{{ section.settings.text_color }}; font-size:{{ section.settings.heading_size }}px; margin:0 0 12px;">{{ section.settings.heading }}</p>
  {%- endif -%}
  <div class="trust-badges__row" style="display:flex; flex-wrap:wrap; gap:{{ section.settings.gap }}px; justify-content:{{ section.settings.flex_align }}; align-items:center;">
    {%- for block in section.blocks -%}
      <div class="trust-badges__item" {{ block.shopify_attributes }}>
        {%- if block.settings.image != blank -%}
          <img src="{{ block.settings.image | image_url: width: 300 }}" alt="{{ block.settings.image.alt | default: block.settings.label | escape }}" loading="lazy" style="height:{{ block.settings.height }}px; width:auto; display:block;">
        {%- else -%}
          <span style="font-size:14px; color:{{ section.settings.text_color }};">{{ block.settings.label }}</span>
        {%- endif -%}
      </div>
    {%- endfor -%}
  </div>
</div>

{% schema %}
{
  "name": "Trust badges",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading text", "default": "Guaranteed safe checkout" },
    { "type": "range", "id": "heading_size", "label": "Heading size", "min": 10, "max": 32, "step": 1, "unit": "px", "default": 14 },
    { "type": "color", "id": "text_color", "label": "Text color", "default": "#444444" },
    { "type": "color", "id": "bg", "label": "Background", "default": "#ffffff" },
    { "type": "select", "id": "alignment", "label": "Heading alignment", "options": [ { "value": "left", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "right", "label": "Right" } ], "default": "center" },
    { "type": "select", "id": "flex_align", "label": "Badge alignment", "options": [ { "value": "flex-start", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "flex-end", "label": "Right" } ], "default": "center" },
    { "type": "range", "id": "gap", "label": "Space between badges", "min": 0, "max": 40, "step": 2, "unit": "px", "default": 12 },
    { "type": "range", "id": "padding_y", "label": "Vertical padding", "min": 0, "max": 60, "step": 2, "unit": "px", "default": 16 }
  ],
  "blocks": [
    { "type": "badge", "name": "Badge", "settings": [
      { "type": "image_picker", "id": "image", "label": "Badge image" },
      { "type": "text", "id": "label", "label": "Fallback text / alt", "default": "Secure payment" },
      { "type": "range", "id": "height", "label": "Image height", "min": 16, "max": 80, "step": 2, "unit": "px", "default": 32 }
    ] }
  ],
  "max_blocks": 12,
  "presets": [ { "name": "Trust badges", "blocks": [ { "type": "badge" }, { "type": "badge" }, { "type": "badge" }, { "type": "badge" } ] } ]
}
{% endschema %}

Each badge is its own block, so you add, remove, reorder and resize them and upload any image you want, and the heading, colors, spacing and alignment are all editable without touching code again.

RESULT:

image
image275Ă—540 18.9 KB
image
image274Ă—302 12.7 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

3

thank you so much Moeed

4

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Cheers,
Moeed

5

yes, this worked well but also mooed if we wanted this to incorporate into product information above buy now button how can we do it?

6

What you’re referring to is called a “block” not a section. Blocks are supposed to be inside the section itself and since I don’t have enough access of your store so I can’t help you with that directly. Do you mind sharing your collaborator request code in my private messages so I can sort it out for you?

Best,
Moeed