Retrieve a Product in Storefront

In this guide, you'll learn how to retrieve a product and its details in the storefront.

How to Retrieve a Product in Storefront?#

There are two ways to retrieve a product:

• Retrieve a product by its ID. This method is straightforward and useful when you only have access to the product's ID.
• Retrieve a product by its handle field. This is useful if you're creating human-readable URLs in your storefront.

Retrieve a Product by ID#

To retrieve a product by its ID, send a request to the Retrieve Product API route:

The response has a product field, which is a product object.

Retrieve a Product by Handle#

To retrieve a product by its handle, send a request to the List Products API route passing the handle query parameter:

Retrieve Translated Product#

By default, Medusa returns the product's original content (such as title and description).

If you support localization in your storefront, you can set the locale to retrieve product information based on the customer's preferred language.

You can set the locale using one of the following methods:

• Use the JS SDK's setLocale method. The JS SDK will automatically include the locale in subsequent requests.
• Pass the locale query parameter to the List Products API route.
• Set the x-medusa-locale header in the API request to the List Products API route.

For example:

The returned product will have the same structure as described in the products schema, but fields such as title and description will be in the specified locale:

Code
1{2  "id": "prod_123",3  "title": "Chemise Exemple",4  "description": "Ceci est une description en français.",5  // other product fields...6}

If translations aren't available for the selected locale, or no locale is selected, the product's original content is returned.

Retrieve in Server-Side Environments#

For server-side environments (such as server components or server actions in Next.js), you can set the locale using cookies to persist the selected locale across requests.

Learn more in the Storefront Localization guide.

Features in Product Details Page#

On a product details page, you typically want to allow customers to choose a variant, see its price, and add it to the cart.

The following guides will help you add these features to your storefront:

• Select a variant
• Show variant price
• Retrieve variant's inventory quantity
• Add a product to the cart