Payment icons

Overview #

The Payment Icons block is designed to display icons of the enabled payment methods within the theme. This block is typically used in the footer navigation section to visually represent the payment options available to customers, enhancing trust and transparency.

Key components and functionality #

Alignment settings

The alignment settings allow you to control how the payment icons are positioned within the block. This can be adjusted for both desktop and mobile views to ensure optimal display across devices.

• Alignment - Desktop: Adjusts the horizontal alignment of payment icons on desktop devices.
• Alignment - Mobile: Adjusts the horizontal alignment of payment icons on mobile devices.

Layout settings

The layout settings provide options to customize how the payment icons are displayed within the block, offering flexibility in presentation.

• Fill available space: When enabled, this option allows the payment icons to stretch and fill the available space within the block.
• Show in new column: Displays the payment icons in a new column, separating them from other content.
• Show in new row: Displays the payment icons in a new row, providing a distinct separation from other elements.

Visibility settings

Visibility settings determine when and where the payment icons are displayed, allowing for a tailored user experience.

• Visibility: Offers options to control the visibility of payment icons across different devices:
  • Do not hide (default): Icons are visible on all devices.
  • Hide on desktop: Icons are hidden on desktop devices.
  • Hide on mobile: Icons are hidden on mobile devices.

Available in sections #

• Footer navigation

Usage notes #

• Responsive design: Ensure that the alignment and layout settings are configured to provide a seamless experience across all devices.
• Performance: Keep the number of payment icons to a minimum to avoid clutter and maintain fast loading times.
• Accessibility: Ensure that the payment icons are easily recognizable and provide alternative text for screen readers to enhance accessibility.

Usage examples #

1. Footer navigation: Place the Payment Icons block in the footer navigation section to showcase the payment methods available, enhancing customer confidence at the point of purchase.

2. Responsive design: Utilize the alignment and layout settings to ensure the payment icons are displayed consistently across different devices, maintaining a professional appearance.

3. Conditional visibility: Use the visibility settings to hide payment icons on specific devices if needed, such as hiding them on mobile devices to save space.