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.
- URL
- /products/<handle>?variant=<ID>
- JSON
- /products/<handle>.js > variants[].id
- Liquid
- product.selected_or_first_available_variant.id
- Plan
- Every plan
- Last checked
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.
How to use it
- Open https://your-store.com/products/<handle>.js and find the variant by its title or SKU.
- Or select the option on the product page and copy the number after ?variant= in the address bar.
- In theme code, use product.selected_or_first_available_variant for the current variant and loop product.variants for all of them.
- Use the ID in cart permalinks, /cart/add forms and variant deep links.
Code
variant-id.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# 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
Written by Lintel. MIT license: free to use in your own store and in client work.
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
- Checked on a Shopify store on the date shown. Shopify changes its admin often; if a step looks different, the idea usually still works.
- Examples use placeholder IDs and your-store.myshopify.com. Replace them with your own.
- MIT license for the code snippets.
Need this built, tested and maintained for your store? See Shopify development.
