Managing Product Page Payment Method Icons and Custom SVGs

Managing Product Page Payment Method Icons and Custom SVGs

Managing Product Page Payment Method Icons and Custom SVGs

This article explains how to control the payment method icons displayed on the Product Detail Page (PDP) using the admin panel. You can choose which payment methods to show and optionally replace their default icons with custom SVG code. This helps tailor the checkout experience to match your brand and customer expectations.


Steps to Configure Product Page - Individual Payment Methods

  1. Go to Customer Order Setup > Web Pages and Email Text > Image Flashes [Product Page â€" Individual Payment Methods]

  2. Tick the Payment Methods You Want to Display

    • Options includes Visa, Mastercard, PayPal, etc.

  3. Provide Custom SVG Code (Optional)

    • If you want to replace the default icon:
      • Paste valid SVG markup into the provided field.
      • Ensure the SVG is clean, lightweight, and properly formatted.

  4. Save Your Changes

    • Confirm that the icons update correctly on the PDP.

Tips

  • Use SVGs with a viewBox and avoid fixed dimensions for better responsiveness.
  • Test your SVGs in a browser before uploading.
  • Keep SVG code minimal to avoid performance issues.

Common Issues

  • SVG not rendering: Check for missing <svg> tags or unsupported attributes.
  • Icons not updating: Clear your site cache or refresh the PDP.
  • Visual inconsistencies: Ensure all SVGs follow a consistent style and size.

    • Related Articles

    • Tills: Charging to an Account payment method

      Update 08/09/2023 Instead of using the stockade app to reconcile, it is easier to use the web app here: https://swa.datasym.co.uk/login - The steps outlined below are still applicable even though the UI differs. ...

    • Uploading Product Video

      Please find the below step by step guide on how to upload video against a product: Customer Order Setup ->Catalogue File Maintenance -> Catalogue Codes Search for the product and click on Edit Once in the product scroll down to the bottom of the page ...

    • Release Notes v3.51 - Latest

      Release Notes Version 3.5 (Q3 October / November 2025) Please note: These changes will only be available to you once your site has been updated as notified by Jonas Sports. You may need to assign relevant permissions for new programs as necessary. 1. ...

    • Setting Up A Landing Page

      Landing Page Maintenance To create a landing page you will first need to go into Landing Page Maintenance under Customer Order Setup The highlighted areas are the main bits of information required. Enter a title for the landing page, this is the full ...

    • PLP Pagination & Category Summary (Product Listing Page)

      PLP Pagination & Category Summary (Product Listing Page) Pagination The product listing page has now been paginated to show 64 products at a time. If there are more than 64 products to display the user will need to click the Load More button to ...