> ## 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 Razorpay Trusted Business Widget on Shopify

> Enhance brand trust, boost conversions, and display Razorpay Trusted Business widget on your Shopify website's product page.

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

<CardGroup cols={1}>
  <Card title="Razorpay Trusted Business Widget on Shopify Changelog" href="/docs/payments/changelog#widgets">
    Discover new features, updates and deprecations related to Razorpay Trusted Business Widget on Shopify (since Jan 2024).
  </Card>
</CardGroup>

Integrate Razorpay Trusted Business (RTB) widget into your Shopify website's product pages.

<a href="https://apps.shopify.com/razorpay-trusted-badges" target="_blank" rel="noopener noreferrer" style={{display:'inline-block',background:'#1463f1',color:'#fff',fontWeight:700,padding:'12px 22px',borderRadius:'4px',textDecoration:'none',boxShadow:'0 3px 13px rgba(0,0,0,0.09),0 1px 5px rgba(0,0,0,0.14)',margin:'12px 0'}}>Download Plugin</a>

## Get Started

Follow the [integration steps](#integration-steps) to integrate the RTB on your [Shopify](https://www.shopify.in/) website.

## Prerequisites

* Sign up for a [Razorpay account](https://dashboard.razorpay.com/signup).
* Sign up for a [Shopify account](https://www.shopify.in).

## Integration Steps

Follow these steps to proceed with the integration:

<CardGroup cols={3}>
  <Card title="1. Build Integration" href="/docs/payments/widgets/trusted-business/rtb-widget-shopify#1-build-integration">
    Install the plugin.
  </Card>

  <Card title="2. Test Integration" href="/docs/payments/widgets/trusted-business/rtb-widget-shopify#2-test-integration">
    Test the RTB widget.
  </Card>

  <Card title="3. Go-Live Checklist" href="/docs/payments/widgets/trusted-business/rtb-widget-shopify#3-go-live-checklist">
    Check the go-live checklist.
  </Card>
</CardGroup>

### 1. Build Integration

Follow the below steps to install the plugin:

<AccordionGroup>
  <Accordion title="Install the Plugin">
    <Info>
      **Handy Tips**

      If you are an existing Razorpay user, you can directly begin the integration process from step 4.
    </Info>

    1. Create a [Razorpay Account](https://dashboard.razorpay.com/signup).
    2. Submit your KYC, and if we need any further clarification, we will reach out to you on WhatsApp, SMS and email. Once our team completes KYC verification and you are enabled to accept payments, we will send a confirmation on WhatsApp, SMS and email.
    3. Log in to your [Shopify account](https://www.shopify.in).
    4. **Install** [Razorpay Trusted Business](https://apps.shopify.com/razorpay-trusted-badges) from the Shopify app store.
           <img src="https://razorpay.com/docs/build/browser/assets/images/shopify-rtb-app-install.jpg" class="click-zoom" alt="Shopify RTB App Install" width="600" />

    <Info>
      **Handy Tips**

      If you have multiple stores, select the store for which you want to install the RTB widget.
    </Info>

    5. After installing the app, you will be directed to your Shopify store and asked to enter your Razorpay Live API Key ID. This step is necessary to verify your eligibility for the RTB badge. Know how to [generate API Keys](/docs/api/authentication#generate-api-keys) from the Dashboard.
    6. After getting your Live API Key ID, go to your Shopify store, enter your live key and click **Save**. If you are eligible, you will be redirected to your theme page.
           <img src="https://razorpay.com/docs/build/browser/assets/images/live-api-key-id.jpg" alt="Live api key id" width="600" />
    7. Perform the following steps on the theme page:
       1. Select the **Default product** from the drop-down list.
       2. Click **Add block** under **Product information** from the left menu.
              <img src="https://razorpay.com/docs/build/browser/assets/images/rtb-widget-product-page-add-block.jpg" class="click-zoom" alt="Shopify default product page add block" width="800" />
       3. Select the **rtb-widget** to insert the RTB widget in your product page.
              <img src="https://razorpay.com/docs/build/browser/assets/images/rtb-widget-product-page-widget.jpg" class="click-zoom" alt="Shopify default product page-widget" width="800" />
    8. The RTB widget appears on your product page. You can drag and drop it to relocate, depending on your requirements. Click **Save** at the top right of your screen after adjusting.
           <img src="https://razorpay.com/docs/build/browser/assets/images/rtb-widget-product-page.jpg" class="click-zoom" alt="Shopify RTB product screen" width="800" />
    9. Visit your website, access one of the product pages, and preview the widget to see how it appears to your buyers.

    This completes your integration.
  </Accordion>
</AccordionGroup>

### 2. Test Integration

You can now preview and test the widget on the page where you integrated it. Follow the checklist:

* **Widget Rendering**: Confirm that the RTB widget renders correctly on the decided location of the desired page.
* **Widget Interaction**: Interact with the widget to verify that users can click the widget to access additional information on the RTB website.
* **Responsive Design**: Resize the browser window or access the page on different devices to test the widget's responsiveness.
* **Widget Loading**: Ensure the widget loads quickly and smoothly without causing any delays or disruptions on the page it is integrated.

### 3. Go-live Checklist

After previewing and testing the widget on your Shopify Dashboard, you must replace the test mode API keys with the live mode API keys. You can generate the [live mode API keys](/docs/api/authentication#live-mode-api-keys). from the Dashboard.

Your customers can view the widget on your website. After they click the widget, it redirects them to the RTB website to access more information.

* Here is a glimpse of the default widget:

<AccordionGroup>
  <Accordion title="On Web">
    <img src="https://razorpay.com/docs/build/browser/assets/images/rtb-widget-desktop.jpg" alt="View the RTB widget on desktop" width="800" />
  </Accordion>

  <Accordion title="On Mobile">
    <img src="https://razorpay.com/docs/build/browser/assets/images/rtb-widget-mobile.jpg" alt="View the RTB widget on mobile" width="300" />
  </Accordion>
</AccordionGroup>

* Here is a glimpse of the RTB webpage:

<AccordionGroup>
  <Accordion title="On Web">
    <img src="https://razorpay.com/docs/build/browser/assets/images/rtb-widget-website-desktop.jpg" alt="Desktop view of the RTB website for more information" width="500" />
  </Accordion>

  <Accordion title="On Mobile">
    <img src="https://razorpay.com/docs/build/browser/assets/images/rtb-widget-website-mobile.jpg" alt="Mobile view of the RTB website for more information" width="300" />
  </Accordion>
</AccordionGroup>

## Support

Queries: If you have queries, raise a ticket on the [Razorpay Support Portal](https://razorpay.com/support/).
