Limit variant selection on ResourcePicker

Shopify Apps
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:


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

![BrunoSS_0-1657285334455.png|1254x1298](upload://5qIOxO6s4riOV8xcs1I38KhwitC.png)

If I set my component like this:

```javascript

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|1260x1166](upload://4U4s1Xm1FQx6jGnmS9piL8KHp4s.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?
1 Like