---
title: getSelectedProductOptions
description: The `getSelectedProductOptions` returns the selected options from the Request search parameters. The selected options can then be easily passed to your GraphQL query with [`variantBySelectedOptions`](https://shopify.dev/docs/api/storefront/2025-01/objects/product#field-product-variantbyselectedoptions).
api_version: 2025-01
api_name: hydrogen
source_url:
  html: https://shopify.dev/docs/api/hydrogen/2025-01/utilities/getselectedproductoptions
  md: https://shopify.dev/docs/api/hydrogen/2025-01/utilities/getselectedproductoptions.md
---

# get​Selected​Product​Optionscomponent

The `getSelectedProductOptions` returns the selected options from the Request search parameters. The selected options can then be easily passed to your GraphQL query with [`variantBySelectedOptions`](https://shopify.dev/docs/api/storefront/2025-01/objects/product#field-product-variantbyselectedoptions).

## Props([request](#props-propertydetail-request)​)

### Parameters

* request

  Request

  required

### Returns

* SelectedOptionInput\[]

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  import {getSelectedProductOptions} from '@shopify/hydrogen';

  export async function loader({request, params, context}) {
    const selectedOptions = getSelectedProductOptions(request);

    const {product} = await context.storefront.query(PRODUCT_QUERY, {
      variables: {
        handle: params.productHandle,
        selectedOptions,
      },
    });

    return {product};
  }

  const PRODUCT_QUERY = `#graphql
    query Product($handle: String!, $selectedOptions: [SelectedOptionInput!]!) {
      product(handle: $handle) {
        title
        description
        options {
          name
          values
        }
        selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {
          ...ProductVariantFragment
        }
      }
    }
  `;
  ```

  ##### TypeScript

  ```tsx
  import {getSelectedProductOptions} from '@shopify/hydrogen';
  import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';

  export async function loader({request, params, context}: LoaderFunctionArgs) {
    const selectedOptions = getSelectedProductOptions(request);

    const {product} = await context.storefront.query(PRODUCT_QUERY, {
      variables: {
        handle: params.productHandle,
        selectedOptions,
      },
    });

    return {product};
  }

  const PRODUCT_QUERY = `#graphql
    query Product($handle: String!, $selectedOptions: [SelectedOptionInput!]!) {
      product(handle: $handle) {
        title
        description
        options {
          name
          values
        }
        selectedVariant: variantBySelectedOptions(selectedOptions: $selectedOptions, ignoreUnknownOptions: true, caseInsensitiveMatch: true) {
          ...ProductVariantFragment
        }
      }
    }
  `;
  ```

## Related

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/hydrogen/2025-01/components/variantselector)

[VariantSelector](https://shopify.dev/docs/api/hydrogen/2025-01/components/variantselector)