Add payments badges to your theme (custom liquid)

[Ahmad_Alawadi]

Hello, I want to add the payment gates symbol below the add to cart button on the product page. This code suffices the purpose, but I want to add other gateway symbols ( American Express, Diners Club, Discover, JCB, Venmo ). How do I do this or from where I retrieved this.
Are there online websites for Custom liquid codes?

-----------------------------------------------------------------------------------------------------

<div class="tb-text" style="color: rgb(0, 0, 0); font-size: 14px; font-weight: normal; text-align: center;">Secured and trusted checkout with:</div>
<div class="tb-badge-div"><div class="tb-badge"

style="width: 50px; display: inline-block; margin: 0px 7px; vertical-align: top;"><img class="tb-svg" src="https://hektorcommerce.com/apps/trustbadge/svg_images/?image=flaticon-master-card-logo&amp;color=000" alt="Mastercard" style="width: 50px; height: 50px;"></div><div class="tb-badge" style="width: 50px; display: inline-block; margin: 0px 7px; vertical-align: top;"><img class="tb-svg" src="https://hektorcommerce.com/apps/trustbadge/svg_images/?image=flaticon-visa-pay-logo&amp;color=000" alt="Visa" style="width: 50px; height: 50px;"></div><div class="tb-badge" style="width: 50px; display: inline-block; margin: 0px 7px; vertical-align: top;"><img class="tb-svg" src="https://hektorcommerce.com/apps/trustbadge/svg_images/?image=3133-apple-pay&amp;color=000" alt="Apple Pay" style="width: 50px; height: 50px;"></div><div class="tb-badge" style="width: 50px; display: inline-block; margin: 0px 7px; vertical-align: top;"><img class="tb-svg" src="https://hektorcommerce.com/apps/trustbadge/svg_images/?image=0097-google-pay&amp;color=000" alt="Google Pay" style="width: 50px; height: 50px;"></div><div class="tb-badge" style="width: 50px; display: inline-block; margin: 0px 7px; vertical-align: top;"><img class="tb-svg" src="https://hektorcommerce.com/apps/trustbadge/svg_images/?image=flaticon-paypal-logo&amp;color=000" alt="Paypal" style="width: 50px; height: 50px;"></div></div>

------------------------------------------------------------------------------------------------------------------------

[BosiDev]

Hello @Ahmad_Alawadi 🙂 

You can do that pretty easily yourself with some basic Liquid understanding and using the new 2.0 features:

1. Go to your Theme, click on "Actions" -> "Edit Code"

2. Search for "main-product.liquid"

3. Create another block in the schema, which should look something like this

{
  "type": "payment_badge",
  "name": "Payment Badge",
  "settings": []
}

4. Create another Case for "payment_badge" and insert your Code (i added some more Styling to the "tb-badge-div"

{%- when 'payment_badge' -%}
<div class="tb-text" style="color: rgb(0, 0, 0); font-size: 14px; font-weight: normal; text-align: center;">Secured and trusted checkout with:</div>
<div class="tb-badge-div" style="display: flex; flex-direction: row; justify-content: space-between;">
   <div class="tb-badge "
      style="width: 50px; display: inline-block; margin: 0px 7px; vertical-align: top;"><img class="tb-svg" src="https://hektorcommerce.com/apps/trustbadge/svg_images/?image=flaticon-master-card-logo&amp;color=000" alt="Mastercard" style="width: 50px; height: 50px;"></div>
   <div class="tb-badge" style="width: 50px; display: inline-block; margin: 0px 7px; vertical-align: top;"><img class="tb-svg" src="https://hektorcommerce.com/apps/trustbadge/svg_images/?image=flaticon-visa-pay-logo&amp;color=000" alt="Visa" style="width: 50px; height: 50px;"></div>
   <div class="tb-badge" style="width: 50px; display: inline-block; margin: 0px 7px; vertical-align: top;"><img class="tb-svg" src="https://hektorcommerce.com/apps/trustbadge/svg_images/?image=3133-apple-pay&amp;color=000" alt="Apple Pay" style="width: 50px; height: 50px;"></div>
   <div class="tb-badge" style="width: 50px; display: inline-block; margin: 0px 7px; vertical-align: top;"><img class="tb-svg" src="https://hektorcommerce.com/apps/trustbadge/svg_images/?image=0097-google-pay&amp;color=000" alt="Google Pay" style="width: 50px; height: 50px;"></div>
   <div class="tb-badge" style="width: 50px; display: inline-block; margin: 0px 7px; vertical-align: top;"><img class="tb-svg" src="https://hektorcommerce.com/apps/trustbadge/svg_images/?image=flaticon-paypal-logo&amp;color=000" alt="Paypal" style="width: 50px; height: 50px;"></div>
</div>

5. Now you can easily place the payment badge via the code editor on the product page globally:

If you want to add other payment symbols, you have to create them yourself or retrieve them from somewhere else. Just paste the Image Url into the corresponding <img> tag into the src attribute. As you can see, the current badges are retrieved from Hector Commerce.

I hope that helps!

Greetings,

Bosi