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.
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.
Output:
Conclusion:
In this blog, we learned How to use resource picker using the Shopify app bridge API in the Shopify remix app.
Do you have any questions or need further assistance? Let us know in the comments!
Thanks for the valuable information
do you have any article for how can I show the selected products including the all of product data (e.g. title, handle, id, images)
You have a picker variable (as per our example) that stores the selected product data (like title, image, handle, etc.).