A space to discuss online store customization, theme development, and Liquid templating.
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&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&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&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&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&color=000" alt="Paypal" style="width: 50px; height: 50px;"></div></div>
------------------------------------------------------------------------------------------------------------------------
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&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&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&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&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&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