Limit variant selection on ResourcePicker

BrunoSS
Shopify Partner
4 0 1

I am using the ResourcePicker (from "@shopify/app-bridge-react") inside my app to allow my customer to select products from their store. The problem is that I want to restrict the user to select only 1 product or variant, but I can't find an option for that.


Imagine a product structure like this:

- Shirts (product)
    - Red color (variant)
    - Blue color (variant)
- Shoes (product)
    - Red color (variant)
    - Blue color (variant)
- Hat (product without variant)

If I set my component like this:

<ResourcePicker
  resourceType="Product"
  selectMultiple={1}
  showVariants={true}
/>

the customer will see a list in this format and won't be limited to 1 variant:

BrunoSS_0-1657285334455.png

 

If I set my component like this:

<ResourcePicker
  resourceType="ProductVariant"
  selectMultiple={1}
/>


The customer will be limited to 1 selection but he can't tell which product he is selecting (Shirt or Shoe). He will also see "Default Title" to the product without variant:

BrunoSS_1-1657285484725.png

 

What I want is for the customer to be able to select only 1 variant and to be clear which product is that. Anyway to achieve this?


Replies 0 (0)