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?

---

Secured and trusted checkout with:

<div class="tb-badge"

style=“width: 50px; display: inline-block; margin: 0px 7px; vertical-align: top;”>

---

[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' -%}
Secured and trusted checkout with:

   

![Mastercard|200x200](upload://ySl9HWSyoc7XRlaJbPp4QopSJWC.svg)

   
![Visa|200x200](upload://rQmT4mWPpKuXL2YIYuNwN6ED8hv.svg)

   
![Apple Pay|200x200](upload://gP9MdSzukZvBt7NXCNZS5zv9lU9.svg)

   
![Google Pay|200x200](upload://8I6K6LjHDDEj3Ou0J7ikRzDh1VW.svg)

   
![Paypal|200x200](upload://iGXIDDD3NqDbA8lssFECV2o10yd.svg)

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 tag into the src attribute. As you can see, the current badges are retrieved from Hector Commerce.

I hope that helps!

Greetings,

Bosi