Integrate Affordability Widget With Shopify

Integrate the Razorpay Affordability Widget on your Shopify store to spread awareness about the EMI²-based payment options before they reach checkout.

Available in🇮🇳 India

Integrate the Razorpay Affordability Widget with your Shopify store to influence your customer’s purchase decisions before they reach checkout by displaying various affordable payment options and offers.

Prerequisites

• Create a Razorpay account.
• Generate the API keys from the Dashboard by navigating to Account & Settings → Website and app settings → API keys.
• Ensure your website’s theme version supports Online Store Theme 2.0. You can verify if the Online Store Theme 2.0 is supported on your website.

List of Supported Themes

Razorpay Affordability Widget Shopify is supported on the following popular themes:

Theme	Paid	Free
Craft	x	✓
Crave	x	✓
Colorblock	x	✓
Dawn	x	✓
Focal	✓	x
Impulse	✓	x
Origin	x	✓
Motion	✓	x
Pipeline	✓	x
Publisher	x	✓
Refresh	x	✓
Ride	x	✓
Sense	x	✓
Spotlight	x	✓
Studio	x	✓
Taste	x	✓

Watch Out!

If you use a theme not listed above and encounter issues integrating the Razorpay Affordability Widget, we recommend switching to one of the above supported themes.

Integration Steps

Perform the following integration steps:

1. Go to the Shopify app store.
2. Click Add app to install Razorpay Affordability Widget.
3. Click Install app.
4. In the Account Details section, enter the Live API Key ID and click Save.

Handy Tips

In case you cannot find your API key ID, use the Click here option below the field to find the key on the Dashboard.

5. You are redirected to the Shopify theme editor page. In the Product information section, click Add block.

Handy Tips

In case you are not redirected to the theme editor page, then navigate to Online Store in the Sales channels section and click Themes. Click Customize.

6. Click Apps. The Razorpay Affordability Widget app appears.

   

7. Select razorpay-afd-widget and drag it below the Price field. The customers will be able to view the widget below the product price.

8. Click Save in the Shopify theme editor page to display the widget to your customers.

   

Successful Activation

Here is a glimpse of the default widget with offers and payment method options enabled.

Minimum Order Limit

All the payment method options that are enabled and that satisfy the minimum order limit appear on the widget. Know more about the minimum order limit for:

• EMI
• Cardless EMI
• Pay Later

Next Steps

Once you successfully integrate the widget on your Shopify store, you can choose to customise the widget based on your requirement.

Handy Tips

• Fill in the integration support form in case you are facing any issues with the integration.
• In case you have any queries, raise a ticket on the Razorpay Support Portal.

Related Information

Affordability Widget FAQs for Shopify