Payment Logos
Payment Logos
Display logos for payment options to enhance trust
Payment Logos builds checkout confidence by displaying recognizable payment method icons directly on your product pages. By showing logos for cards and services your store accepts — Visa, Mastercard, PayPal, and more — customers know their preferred payment method is supported before they reach checkout, reducing hesitation and abandoned carts.
Key Features
Flexible Logo Selection
Choose exactly which payment logos appear on your store using the "Select badges" setting. Logos are selected by entering a comma-separated list of payment method identifiers. The default selection includes Mastercard, PayPal, Maestro, Visa, and American Express. You can add, remove, or reorder logos to match the payment methods your store actually accepts.
Two Display Themes
The "Payment Logos Theme" setting controls how logos are rendered. The color theme displays each logo in its full official branding — Visa blue, PayPal yellow, Mastercard red and orange, and so on. The black (monochrome) theme renders all logos in a single solid color, which you set using the "Color" setting. Monochrome mode gives the widget a more minimal, design-neutral appearance that blends with any store theme.
Optional Trust Message
A short line of text can appear above the logos to reinforce checkout security. The "Text above the logos" setting defaults to "Checkout safely using your preferred payment method" and can be changed to any phrase that fits your store's tone. The message can also be left blank if you prefer to display logos only.
Alignment and Spacing Controls
The "Align badges" setting positions the logos — and the message above them — to the Left, Center, or Right. Separate "Top Margin" and "Bottom Margin" settings (defaulting to 20px each) control the vertical spacing between the widget and the surrounding page content, letting you fit it cleanly between the product form and whatever comes next.
Advanced Placement
By default, Payment Logos appears directly below the add-to-cart form on product pages. The "Payment Logos Inject Selector" setting accepts a CSS selector pointing to any element in your theme, redirecting the widget to that location instead. This is useful when a theme's structure places the form inside a non-standard container that the default injection misses.
How It Works
On the Storefront
When a customer views a product page, Payment Logos renders a row of payment icons below the add-to-cart form. If a trust message is configured, it appears above the icons. In color mode, each icon displays in its official branding. In monochrome mode, every icon is filled with the color specified in the "Color" setting.
The widget is static — it does not interact with the cart or respond to variant changes. It appears consistently on every product page as long as the app is enabled.
In the Vitals Dashboard
The app installs below the product form by default. Merchants can configure which logos to show, choose a display theme, write an optional trust message, adjust alignment and margins, and optionally redirect placement. All changes take effect immediately on the live storefront.
Settings Reference
Display
| Setting | Input Type | Description |
|---|---|---|
| Payment Logos Theme | Text | Controls whether logos appear in full color or monochrome. Enter color for full-color logos or black for monochrome logos. Default: color . |
| Select badges | Text | Comma-separated list of payment method identifiers to display. Default: mastercard,paypal,maestro,visa,american_express . |
| Text above the logos | Text | Optional message shown above the logo row. Leave blank to show logos only. Default: "Checkout safely using your preferred payment method". |
| Color | Color Picker | Fill color applied to logos when "Payment Logos Theme" is set to black (monochrome mode). Has no effect in color mode. Default: blue (#2120bb). |
| Align badges | Select | Horizontal alignment of the logos and message. Options: Left (default), Center, Right. |
| Top Margin | Text | Space above the widget in pixels. Default: 20. |
| Bottom Margin | Text | Space below the widget in pixels. Default: 20. |
Advanced
| Setting | Input Type | Description |
|---|---|---|
| Payment Logos Inject Selector | Text | Allows merchants to change the app's location according to common product page locations. Leave unchanged to use the default position below the product form. |
Setup & Configuration
- Enable the app — Go to the Payment Logos section in your Vitals dashboard and toggle it on.
- Select your logos — In "Select badges", enter the payment methods your store accepts as a comma-separated list. Remove any methods you don't offer.
- Choose a theme — Set "Payment Logos Theme" to
colorfor branded icons orblackfor a monochrome look. If usingblack, set your desired fill color in the "Color" picker. - Write a trust message — Update "Text above the logos" if you want a custom phrase, or clear the field to show only icons.
- Adjust alignment and spacing — Use "Align badges", "Top Margin", and "Bottom Margin" to position the widget neatly within your product page layout.
- Save and check your product page — Open any product page on your store to confirm the logos appear below the add-to-cart form as expected.
FAQ
Where does the Payment Logos widget appear? By default, it appears below the add-to-cart form on product pages. You can move it anywhere on the page using the "Payment Logos Inject Selector" setting. It does not appear on the cart page or homepage.
Which payment logos are available? The default logos are Mastercard, PayPal, Maestro, Visa, and American Express. Other payment method logos are available — update the "Select badges" field with the identifiers for the methods you want to show. If you're unsure of an identifier, contact Vitals support.
What's the difference between the color and black themes? The color theme renders each logo in its official brand colors. The black theme renders all logos in a single solid color, which you set using the "Color" picker. Monochrome mode is useful for stores with a neutral or monochromatic design.
Can I change the color of individual logos? No — the color theme uses each logo's official branding, and the monochrome theme applies a single color to all logos at once. Per-logo color customization is not available.
Can I change the text above the logos? Yes. The "Text above the logos" field accepts any custom message. Set it to an empty value to hide the message entirely and show only the icons.
Does Payment Logos appear on the cart page? Yes. Payment Logos can also render on the cart page. Look for the Vitals Payment Logos app in your Shopify Theme Editor while you're vieiwing the cart page to insert it.
Can I show Payment Logos on the homepage? Yes. Payment Logos can also render on the home page. Look for the Vitals Payment Logos app in your Shopify Theme Editor while you're vieiwing the home page to insert it.
My logos aren't appearing — what should I check? First, confirm the app is enabled in your Vitals dashboard. Then check that "Select badges" contains at least one valid identifier. If your theme has a non-standard product form structure, try using the given location options to target the correct location.
Can I reorder the logos? Yes — the logos appear in the order you list the identifiers in "Select badges". Rearrange the list to change the display order.
Does the widget slow down my product pages? Payment Logos loads SVG icons which are small vector files, so the impact on page speed is minimal. The widget renders synchronously with the rest of the product page content.