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

# Integrate Affordability Widget With Shopify

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](https://dashboard.razorpay.com/signup).
- Generate the [API keys](https://razorpay.com/docs/build/llm-docs/api/authentication.md#generate-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](https://shopify.dev/docs/themes/os20). You can [verify](https://community.shopify.com/c/shopify-design/how-to-identify-shopify-online-2-0-theme-or-later/td-p/1521884#:~:text=Next%20Topic-,REPLIES%20(3),-Halothemes) 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 | ✓
        ---
        
        

**WARN**

**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](https://apps.shopify.com/affordability-widget).
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**.
    
    
**INFO**

**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**.
    

    
**INFO**

**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.

**INFO**

**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](https://razorpay.com/docs/build/llm-docs/payments/payment-gateway/emi²/faqs.md#1-what-are-the-standard-credit-card-interest) 
- [Cardless EMI](https://razorpay.com/docs/build/llm-docs/payments/payment-gateway/emi²/faqs.md#cardless-emi)  
- [Pay Later](https://razorpay.com/docs/build/llm-docs/payments/payment-gateway/emi²/faqs.md#2-what-are-the-standard-interest-rates-charged)

## Next Steps

Once you successfully integrate the widget on your Shopify store, you can choose to [customise the widget](https://razorpay.com/docs/build/llm-docs/payments/payment-gateway/emi²/widget/shopify/customise.md) based on your requirement.

**INFO**

**Handy Tips**

- Fill in the [integration support form](https://form.typeform.com/to/Ro3nJPzp) in case you are facing any issues with the integration.
- In case you have any queries, raise a ticket on the [Razorpay Support Portal](https://razorpay.com/support/).

### Related Information

[Affordability Widget FAQs for Shopify](https://razorpay.com/docs/build/llm-docs/payments/payment-gateway/emi²/widget/faqs.md#shopify)