# Get a variant ID from the storefront

> Find a Shopify variant ID without the admin: the ?variant= URL, /products/<handle>.js, a console one-liner and selected_or_first_available_variant in Liquid.

Page: https://lintelagency.com/resources/shopify-tricks/variant-id-from-storefront

## In short

You don’t need admin access to find a variant ID. Open /products/<handle>.js and every variant is listed with its id, or select an option on the product page and read the ?variant= number many themes write to the URL. In Liquid, product.selected_or_first_available_variant.id gives the variant from ?variant= or the first available one, and variant.url builds a direct link to it.

## Facts

- **URL:** /products/<handle>?variant=<ID>
- **JSON:** /products/<handle>.js > variants[].id
- **Liquid:** product.selected_or_first_available_variant.id
- **Plan:** Every plan
- **Last checked:** 2 November 2026

## How to use it

1. Open https://your-store.com/products/<handle>.js and find the variant by its title or SKU.
2. Or select the option on the product page and copy the number after ?variant= in the address bar.
3. In theme code, use product.selected_or_first_available_variant for the current variant and loop product.variants for all of them.
4. Use the ID in cart permalinks, /cart/add forms and variant deep links.

## Code

### variant-id.liquid

```liquid
{%- comment -%}
  The variant to use in a product template: the one in ?variant= if present,
  otherwise the first available. product.selected_variant is nil when the
  URL has no ?variant=.
{%- endcomment -%}
{%- assign current_variant = product.selected_or_first_available_variant -%}

<input type="hidden" name="id" value="{{ current_variant.id }}">

{%- comment -%} A link to one specific variant, e.g. in a size guide or email. {%- endcomment -%}
<a href="{{ current_variant.url }}">{{ product.title }} – {{ current_variant.title }}</a>

{%- comment -%} All variants with their IDs, for a custom picker. {%- endcomment -%}
<select name="id">
  {%- for variant in product.variants -%}
    <option value="{{ variant.id }}" {% if variant == current_variant %}selected{% endif %} {% unless variant.available %}disabled{% endunless %}>
      {{ variant.title }}
    </option>
  {%- endfor -%}
</select>
```

### ways.txt

```text
# 1. Product JSON: every variant with its id
https://your-store.com/products/example-product.js

# 2. The variant in the URL: pick an option on the product page and many
#    themes write it to the address bar
https://your-store.com/products/example-product?variant=12345678901234

# 3. Browser console on a product page
fetch(location.pathname + '.js').then((r) => r.json()).then((p) => console.table(p.variants.map((v) => ({id: v.id, title: v.title, sku: v.sku}))))

# Use the ID for
cart permalink   https://your-store.com/cart/12345678901234:1
deep link        https://your-store.com/products/example-product?variant=12345678901234
```

## Limits and edge cases

- product.selected_variant is nil when the URL has no ?variant=; selected_or_first_available_variant always returns one.
- Not every theme updates the address bar when an option changes; the .js URL always works.
- Variant deep links can also use ?option_values=<option value IDs> on themes that support it.
- A product without options still has one variant with its own ID.

## Questions

### How do I find a Shopify variant ID on the storefront?

Add .js to the product URL and read variants[].id, or select the variant and copy the ?variant= number from the URL.

### How do I link to a specific variant on Shopify?

Use /products/<handle>?variant=<variant ID>; in Liquid, variant.url builds it.

### What is the difference between selected_variant and selected_or_first_available_variant?

selected_variant is only set when the URL has ?variant=. selected_or_first_available_variant falls back to the first available variant.

## Shopify documentation

- [Variants and deep links](https://shopify.dev/docs/storefronts/themes/product-merchandising/variants)
- [Liquid variant object](https://shopify.dev/docs/api/liquid/objects/variant)
- [Product API reference](https://shopify.dev/docs/api/ajax/reference/product)

## Related

- [Find product, variant and customer IDs](https://lintelagency.com/resources/shopify-tricks/find-product-variant-customer-ids)
- [Cart permalinks: links that fill the cart](https://lintelagency.com/resources/shopify-tricks/cart-permalinks)
- [Product .js, cart.js and the other JSON URLs](https://lintelagency.com/resources/shopify-tricks/product-js-and-json-endpoints)
- [Featured product Shopify section](https://lintelagency.com/resources/shopify-sections/featured-product)

License: MIT. Free to use in your own store and in client work.