Product - Payment Badges #2

The Payment Badges #2 section offers a more advanced and customizable display of secure payment methods and trust symbols. It includes headline/subheadline text, styling options, hover states, and responsive layout adjustments to increase buyer confidence.

❗❗Custom Placement Instructions❗❗

To insert the badges on your product page:

  1. Go to the Product Information section in your theme editor.

  2. Click “Add block” and select Custom Liquid.

  3. Paste the following code snippet:

htmlCopyEdit<div id='ecomz-paymentbadges'></div>

  1. Save your changes and use drag-and-drop to place the block exactly where you want it on the page.

Text Content Settings

Main Heading

  • Text: Example: Secure your payment guarantee.

  • Font Size (px): 18

  • Text Color: #000000

  • Top Spacing (px): 8

  • Bottom Spacing (px): 17

Subheading

  • Text: Example: Delivery Terms & Condition

  • URL: Paste a link or search within your site.

  • Text Color: #737373

  • Hover Color: #555555

  • Underline (Toggle): Enable/disable underline on hover

  • Underline Color: #6C6C6C

  • Underline Weight (px): 1

Text Alignment

  • Choose between: Left / Center / Right Controls the alignment of both the heading and subheading.

Accessibility

  • ARIA Label Adds a label for screen readers. Default: Payment Trust Badges

Payment Icon Toggles

Choose which badges to display. You can toggle any of these:

  • American Express

  • Apple Pay

  • Google Pay

  • Maestro

  • Mastercard

  • PayPal

  • Union Pay

  • Visa

Layout & Sizing (Section)

Colors and Background

  • Background Color: Transparent (or set your own)

Spacing (Desktop)

  • Padding Top (rem): 3.5

  • Padding Bottom (rem): 3

  • Margin Top (rem): -1

  • Margin Bottom (rem): 2

Section Width

  • Max Width (rem): 80

  • Left & Right Padding (px): 0

Spacing (Mobile)

  • Max Width (rem): 80

  • Left & Right Padding (px): 0

Badge Layout & Sizing

Alignment

  • Badges Alignment: Left / Center / Right

Badge Size

  • Width (Desktop): 46px

  • Height (Desktop): 28px

  • Width (Mobile): 38px

  • Height (Mobile): 24px

Section Styling

  • Border Radius (px): 16

This section is a great way to add visual trust elements with full control over their layout and presentation. Whether you’re showcasing secure payments or offering reassurances like delivery terms, this block supports flexible placement and smooth mobile responsiveness.

PreviousProduct - Vertical BenefitsNextEcomz – Discount Coupon

Last updated