> ## Documentation Index
> Fetch the complete documentation index at: https://razorpay-881012b3.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

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

<div style={{display:"flex",flexWrap:"wrap",alignItems:"center",gap:"0.35rem 0.9rem",border:"1px solid rgba(128,128,128,0.28)",borderRadius:"0.5rem",padding:"0.45rem 0.75rem",margin:"0 0 1.25rem",fontSize:"0.875rem"}}>
  <span style={{fontWeight:600}}>Available in</span>
  <span>🇮🇳 India</span>
</div>

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](/docs/api/authentication#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.

<AccordionGroup>
  <Accordion title="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    | ✓    |
  </Accordion>
</AccordionGroup>

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

## 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.
   <img src="https://razorpay.com/docs/build/browser/assets/images/shopify-add-app.jpg" alt="Add the app to your shopify store" width="800" />
3. Click **Install app**.
   <img src="https://razorpay.com/docs/build/browser/assets/images/shopify-install-app.jpg" alt="Install the App" width="800" />
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.
</Info>

<img src="https://razorpay.com/docs/build/browser/assets/images/shopify-api-key.jpg" alt="Enter the live API key ID" width="800" />

5. You are redirected to the Shopify theme editor page. In the **Product information** section, click **Add block**.
   <img src="https://razorpay.com/docs/build/browser/assets/images/shopify-widget-block.jpg" alt="Add widget block" width="800" />

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

  <img src="https://razorpay.com/docs/build/browser/assets/images/shopify-widget-theme-editor.jpg" alt="Shopify theme editor page" width="800" />
</Info>

6. Click **Apps**. The **Razorpay Affordability Widget** app appears.
   <img src="https://razorpay.com/docs/build/browser/assets/images/aff-shopify-rzp-widget-add.jpg" alt="The affordability widget app appears in the apps sections" width="800" />

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.
   <img src="https://razorpay.com/docs/build/browser/assets/images/shopify-widget-save.jpg" alt="Save the widget settings" width="800" />

## Successful Activation

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

<img src="https://razorpay.com/docs/build/browser/assets/images/default-widget1-v2.jpg" alt="Glimpse of the default widget" width="400" />

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

## Next Steps

Once you successfully integrate the widget on your Shopify store, you can choose to [customise the widget](/docs/payments/payment-gateway/emi²/widget/shopify/customise) 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/).
</Info>

### Related Information

[Affordability Widget FAQs for Shopify](/docs/payments/payment-gateway/emi²/widget/faqs#shopify)