Default variant on PDP load?

[zamson]

I'm selling products in my store with multiple sizes (S, M, L, etc.). The smallest size (S) is often out of stock. How can I set the default size to "M" without rearranging the options?

What's the best way to do this? 🙇🏽‍♂️

[blittle]

Update the logic here to pick a default variant. By default it just picks the "first variant": https://github.com/Shopify/hydrogen/blob/main/templates/skeleton/app/routes/products.%24handle.tsx#L57

[meisbellajack]

This is a common issue for merchants who don't want to mess with their natural size order (S, M, L) but want to avoid showing an Out of Stock message the moment a customer lands on the page.

In 2026, there are two primary ways to handle this without physically dragging your variants around in the Shopify admin.

1. The Deep Link Method (Easiest)
By default, Shopify loads the first variant in your list. However, you can force the page to load M by using a URL Parameter. When you link to your product from your homepage or collections, simply add ?variant=ID to the end of the URL.

• How it works: Find the unique ID for your Medium variant and use that as your primary link.
• The Result: The customer lands on the page with M already selected, but they can still see S above it in the list.

2. The JavaScript Auto-Select (Theme Customization)
If you want M to be selected even when someone types your URL directly, you can add a small script to your theme.js or a Custom Liquid block. This script runs as the page loads, checks if M is available, and automatically triggers the selection.

• How it works: It looks for the size selector, finds the value M, and simulates a click.
• The Result: Your natural order (S, M, L) is preserved, but the selection jumps to M instantly.

A Better Way: Smart Defaulting
While these manual fixes work, they aren't smart. If M also goes out of stock, your manual script might select a broken option.

This is where Misk Variant & Product Options really shines for high-volume stores. Instead of hard-coding a default, our app can be configured to automatically select the first in-stock variant regardless of its position. Since Misk is a Native App Embed, this selection happens instantly without the flicker or lag you get with standard JavaScript hacks.

It keeps your UI clean, preserves your S-M-L sorting for the customer, and ensures they always see a Buy Now button instead of a Sold Out message the second the page loads.

Would you like me to help you find the specific variant_id for your Medium size, or should we look at how to implement the First In-Stock logic?