Integrate Affordability Widget With Shopify

Prerequisites

• Create a

  Razorpay account

  .
• Generate the

  API keys

  from the

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

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.

Next Steps

Once you successfully integrate the widget on your Shopify store, you can choose to

Related Information