In October 2025, we introduced several new options for the payments page in our checkout. This document outlines all the available ways to customize the payments page.
Where can I make the payments page customisations?
Navigate to the Shopflo dashboard and click on 'Flo checkout' > from the Customise section select 'Payment Page'
What all changes can I make?
Layout and Styling
Context: On Shopflo, you can display payment tiles to customers in two styles:
a) Payment Logos
Using logos helps shoppers easily recognise payment options. For example, if the “Logos” option is enabled, the UPI payment tile can display logos like PhonePe, Paytm, or Google Pay, making it clearer for customers to understand the payment method.
b) Payment Icons
You can use the default icons provided by Shopflo, this layout is selected by default.
Global style - Payment card colours and Layout gap
You can customise the colours of your payment tiles using this setup. The elements you can modify include
a) Payment Card (the payment tile)
Background colour of the payment tile
Border colour of the payment tile
Header text colour (“Payment method”)
Subtext/description text colour
b) Offer bade (the badge where the prepaid discount is mentioned)
Background colour of the badge
Text colour of the badge
c) Layout Gap
You can customise the space between the payment tiles.
Customise individual payment options
For individual payment tiles, you can customise various elements — such as reordering payment methods, showing or hiding specific tiles, editing the text or colours, and marking a method as the suggested option.
1. Reordering payment tiles
You’ll see a drag-handle icon next to each payment method. Click and hold it to move the tile up or down and arrange it in your preferred order.
2. Show or hide the payment tile
Click on the "eye" icon to hide the specific payment tile.
3. Customise the logos for the individual payment tiles
If you have selected the layout as "Logo and title", you will be able to select the icons that you want to show on the tile. You can show upto 3 icons for every tile.
How
Expand the individual payment method
And then you can select the preferred logos
4. Set a payment method as a suggested payment method
You can set one payment method as the preferred option. It will appear at the top of all payment tiles and be highlighted for easy visibility.
You can customise the tag’s title and colour, and view a live preview on the left to see how it will appear to customers.
5. Customise the payment card colour for the specific payment method:
Toggle this ON to customise the colour for this specific payment method. This will override the global colour settings you’ve configured.
Other widgets - Banner and discounts on the payments page
You can also customise discount behaviour and banners on the payment page.
Discount configurations: Set if you want to show/hide the discounts widget on the payments page
Banners: Define the banner colour and the text that will show up on the payments page.