Customisation Options
Customise the Affordability Widget on your Shopify store.
After successfully integrating Affordability Widget on your Shopify store, you can choose to customise the widget based on your requirement.
Watch Out!
Customisations on the widget are not applicable for Payments Checkout.
To customise the widget:
- Log in to the and navigate to Apps → Razorpay Affordability Widget.
- Select Customisation Options.
You can now customise the following options:
-
- Widget Color
- Heading Color
- Heading Font Size
- Content Color
- Content Background Color
- Content Font size
- Link Color
- Link Font Size
- Discount Color
- Footer Color
- Footer Font Size
- Razorpay Dark Logo
- Enable Button Link
- Widget Dark Mode
-
- Card EMI
- Cardless EMI
- Pay Later
- Card EMI Providers
- Cardless EMI Providers
- Pay Later Providers
-
- Offers
- Limit Offers
- Hide Offer Amount
- Show hidden Offers
Watch Out!
Once you customise the widget, click Save at the end of the customisation page for the changes to reflect.
Alter the appearance of the widget based on your store. The following customisation options are available:
- Widget Color: Customise the widget theme colour based on your requirement. For example, if the background colour of the header is blue, you can change the colour to purple.
Handy Tips
- The default theme colour (blue) set on the widget will be considered if no colour is passed here.
- Only a 6-character HEX code is supported.
- Heading Color: Enter the 6-character HEX code of the heading colour based on your requirement. For example, if the default colour of the header is white, you can change the colour to black.
Watch Out!
Enter the font size as per pixels (px). You only have to enter the required size. For example, 14.
- Heading Font Size: Enter the font size of the heading based on your requirement. The default size is 12.
-
Content Color: Enter the 6-character HEX code of the content colour based on your requirement. For example, if the default colour of the content is black, you can change the colour to dark blue.
-
Content Background Color: Enter the 6-character HEX code to customise the background colour to match the look and feel of your website. For example, if the default colour of the background is white, you can change the colour to blue.
-
Content Font Size: Enter the font size of the content based on your requirement. The default size is 14.
-
Link Color: Enter the 6-character HEX code of the link colour based on your requirement. For example, if the colour of the link is blue, you can change the colour to black.
-
Link Font Size: Enter the font size of the link based on your requirement. For example, if the font size is 10px, you can change the font size to 12px.
Handy Tips
The link customisations work only when button link is disabled.
- Discount Color: Enter the 6-character HEX code of the discount value colour based on your requirement. For example, if the colour of the value is green, you can change the colour to pink.
-
Footer Color: Enter the 6-character HEX code of the footer colour based on your requirement. The default colour is white.
-
Footer Font Size: Enter the font size of the footer based on your requirement. The default size is 12.
-
Razorpay Dark Logo: Razorpay provides customisation option for the logo in two variants:
- Light (default): Display the default Razorpay logo on the widget with a darker theme colour.
- Dark: Display the Razorpay logo in a darker tone on the widget with a lighter theme colour. If you want to display the light variant of the logo, click Activate.
- Enable Button Link: By default, a button appears on the widget to view the plans, offers and options. Click Activate to change the appearance of the button to a link based on your requirement.
- Widget Dark Mode: Enable the widget's dark mode when your website utilises dark mode. This is specifically designed for websites with darker background colors, improving the presentation of offers, plans, and options. Click Activate.
Configure the payment methods you want to display on the store based on your requirement.
EMI is enabled by default. To deactivate the EMI payment option, click Deactivate. The EMI options will not appear on the widget and the customers will not be able to view them.
Handy Tips
All EMI options applicable for the payment amount will appear on the widget by default. For example, if the payment amount is ₹3000, the widget displays only the suitable EMI options.
Cardless EMI is enabled by default if it is activated for your account. To deactivate the Cardless EMI payment option, click Deactivate. The Cardless EMI options will not appear on the widget and the customers will not be able to view them.
Handy Tips
All Cardless EMI options applicable for the payment amount will appear on the widget by default. For example, if the payment amount is ₹3000, the widget displays only the suitable Cardless EMI options.
Pay Later is enabled by default if it is activated for your account. To deactivate the Pay Later payment option, click Deactivate. The Pay Later options will not appear on the widget and the customers will not be able to view them.
Handy Tips
All Pay Later options applicable for the payment amount will appear on the widget by default. For example, if the payment amount is ₹4000, the widget displays only the suitable Pay Later options.
Razorpay supports
and EMI providers for EMI options. By default, all EMI options satisfying the minimum transaction amount will appear on the widget. If you want to display limited EMI options on the widget, in the Options drop-down list, select/unselect the providers of your choice.Razorpay supports
. By default, all Cardless EMI options satisfying the minimum transaction amount will appear on the widget. To display limited Cardless EMI options on the widget, in the Options drop-down list, select/unselect the provider of your choice.Razorpay supports
. By default, all Pay Later options satisfying the minimum transaction amount will appear on the widget. If you want to display limited Pay Later options on the widget, in the Options drop-down list, select/unselect the provider of your choice.Configure the offers you want to display on the store based on your requirement. Customers can choose from a wide range of offers for your product or service. Know how to
.Handy Tips
By default, all the offers marked visible on the Dashboard during the offer creation appear on the widget.
Watch Out!
For comma-separated lists, add the information without a space. For example, if you are adding a list of offer_ids then follow this format: offer_ANZoaxsOww2X53,offer_LAZoazsOcc2X55,offer_QAFoazsOww2X78.
Offers are enabled by default. To deactivate offers, click Deactivate. Offers will not appear on the widget and the customers will not be able to view them.
To display limited offers on the widget, enter the offer_id of the offers of your choice.
By default, the customers can view the exact discount amount. This helps the new customers compare and choose your products over your competitors. Click Activate to hide the discount amount on the widget if required.
By default, all those offers with the Show Offer on Checkout option enabled during creation will appear on the widget. Additionally, you can enter the offer_id of the offer that did not have the
Was this page helpful?