How to Use Resource Picker using Shopify App Bridge API in Shopify Remix App?

How to Use Resource Picker using Shopify App Bridge API in Shopify Remix App

Shopify App Bridge is a powerful framework that enables Shopify app developers to build seamless embedded apps within the Shopify Admin. One of its useful components is the Resource Picker, which allows users to select products, collections, or other store resources effortlessly.

Shopify Development Services

In this guide, we will explore how to use the Resource Picker in a Shopify Remix App with the Shopify App Bridge API.

Steps to Use Resource Picker using Shopify App Bridge API in Shopify Remix App:

Step 1: Need to check App Bridge is added to app

To use this feature you need to check that the app bridge is integrated in your Shopify remix app or not in package.json file.

Step 2: Create a code file for it

After checking the app bridge API version, you need to generate a code file that will be executed in the app.

import React, { useState } from "react";
import { Button } from "@shopify/polaris";
const ProductPicker = () => {
     const handleOpenPicker = async (type) => {
          try {
               const picker = await shopify.resourcePicker({
                    type: 'product',
                    multiple: type === 'y',
                    filter: {
                         variants: false,
                    },
               });
          } catch (error) {
               console.error("Error opening product picker:", error);
          }
     };
     return (
         <>
             <Button onClick={() => handleOpenPicker("y")}>Select Products</Button>
         </>
     );
};

export default ProductPicker;

Using the above code you can use the Shopify app bridge resource picker for selecting products and other things in your app.

Shopify SEO

Output:

Conclusion:

In this blog, we learned How to use resource picker using the Shopify app bridge API in the Shopify remix app.

Hire Shopify Developers

Do you have any questions or need further assistance? Let us know in the comments!

Previous Article

Gemini Statistics: Latest Facts and Figures (2025 Edition)

Next Article

How to Build a Custom Delivery Options Function in Shopify?

Write a Comment

Leave a Comment

Your email address will not be published. Required fields are marked *

Get Connect With Us

Subscribe to our email newsletter to get the latest posts delivered right to your email.
Pure inspiration, zero spam ✨