Shopify Variants Are Now Publishable Per Channel. Here's What Breaks in Your Hydrogen Storefront If You Ignore It.

Shopify made ProductVariant independently publishable on May 7. Variants now have channel-level visibility — separate from the parent product.

This is not a checkbox change. It's a data model change.

If your Hydrogen storefront ships a variant picker, a B2B catalog, a multi-market filter, or any read against the Storefront API that assumes "if the product is published, every variant is published" — that assumption is now wrong.

Variants default to published on every existing channel, so nothing breaks immediately. But the moment a merchant starts using the new control (per-channel variant gating, B2B-only colorways, retail-vs-wholesale SKUs), every storefront and channel app that ignored it shows ghost variants, breaks add-to-cart, or surfaces SKUs the merchant explicitly hid.

Here is what changes, and what your Hydrogen storefront has to do about it.

What Actually Changed

Before May 7, ProductVariant had no independent publication state. A variant inherited its parent product's channel visibility. If Product was published to "Online Store" and "Hydrogen", every variant rendered on both surfaces.

After May 7, ProductVariant is a Publishable interface implementer. The schema now exposes:

productVariant.publishedOnPublication(publicationId: ID!): Boolean!
productVariant.publicationCount: Int!
productVariant.resourcePublications(first: Int!): ResourcePublicationConnection!
Mutations: publishablePublish, publishableUnpublish (already existed for Product, now accept ProductVariant IDs)

Default behavior: every existing variant is set published on every channel where its parent product is published. No silent unpublishing. But merchants can now unpublish a specific variant from a specific channel without touching the product.

The merchant-facing UI for this is rolling out in the Admin variants editor. Channel apps that read product feeds, and any storefront pulling variants via Storefront API, need to start respecting the per-variant publication state — not just the product's.

Why This Matters For Hydrogen

Hydrogen storefronts query variants through the Storefront API. Today most variant picker components look like this:

const product = useLoaderData<typeof loader>();

return (
  <VariantSelector
    variants={product.variants.nodes}
    handle={product.handle}
  />
);

typescript

That product.variants.nodes query returns every variant attached to the product. Pre-May 7, that was correct because variant visibility tracked product visibility. Post-May 7, this is the bug: some of those variants may be unpublished on the channel the buyer is hitting.

The Storefront API will eventually filter this for you on most channels — but not on B2B, not on draft channels, not on custom apps, and not on the Admin API queries some Hydrogen apps still make. You need to handle it explicitly.

Where It Breaks

Five concrete failure modes in Hydrogen storefronts. We have seen variants of all of these in production audits.

1. Variant Pickers Show Ghost Options

A merchant unpublishes the "XS Black" variant from the storefront channel (it's now wholesale-only). Your Storefront API query still returns it because your selection set doesn't check publishedOnPublication. The picker renders "XS Black", the buyer selects it, add-to-cart calls Cart API with a variant ID the buyer was never supposed to see.

Best case: confusing UX. Worst case: a wholesale SKU shows up in retail order data and tanks your AOV reporting.

2. B2B Catalogs Leak Retail Variants

You built B2B gating by checking customer.companyContactProfiles. The query that fetches product variants for B2B buyers returns the full variant set. Now retail-only variants — sizes, colors, pack counts that should never appear in wholesale — show up in B2B picker UI.

The fix: filter variants by the B2B publication's ID at query time.

3. Multi-Market Stores Show Variants Not Available in This Market

If you sell jewellery in EU markets but only certain materials in US, you've been doing this with Market and Markets-aware pricing. Now merchants can also unpublish specific variants from specific market-linked publications. Your loader needs to respect the market's publication ID, not just the product's overall visibility.

4. Channel Apps and Feed Builders Send Stale Data

Any app you wrote that reads product data and pushes to a third-party feed (Google Shopping, Meta, TikTok Shop, custom price comparison) now needs to filter unpublished variants per-channel before sending. The app may be syncing variants the merchant unpublished from that exact channel.

Shopify's note on this is direct: "Channels that don't use Shopify's product feed need to implement support for ProductVariant publication." If your channel app reads Product from the Admin API and assumes all variants are published — you're shipping bad data.

5. Storefront MCP / UCP Endpoints Expose Unpublished SKUs

Your storefront is now an agent endpoint via MCP/UCP. Agents query the catalog. If your MCP implementation doesn't filter by per-variant publication state, ChatGPT and Gemini will recommend products at SKUs that don't exist on the channel the buyer is shopping from.

This is the silent killer. Humans see the ghost variant, get confused, leave. Agents see it, recommend it to a customer, and you watch a checkout fail in real time.

How to Handle It in Hydrogen

Three patterns we use on production stores.

Pattern 1: Filter Variants in the Loader

In a route loader, query both the product and check each variant's publication state on the current channel:

export async function loader({params, context}: LoaderFunctionArgs) {
  const {storefront, publicationId} = context;

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

  const visibleVariants = product.variants.nodes.filter(
    (variant) => variant.publishedOnPublication
  );

  return json({product: {...product, variants: {nodes: visibleVariants}}});
}

typescript

The publishedOnPublication field in your GraphQL query needs to be parameterized with the current publication ID — typically the Hydrogen storefront's own. Pin it once in your context, not per-route.

Pattern 2: Add Publication Check to Variant Selector UI

Even after loader filtering, if a variant slips through (third-party data merge, stale cache, etc.), your variant picker should fail closed:

function VariantSelector({variants}: {variants: ProductVariant[]}) {
  const validVariants = variants.filter(v => v.availableForSale && v.publishedOnPublication);
  if (!validVariants.length) return <OutOfStock />;
  return <VariantPicker variants={validVariants} />;
}

typescript

Pattern 3: Audit Your Channel Apps

If you ship any app that reads variants from Admin API and writes elsewhere (feed exports, ERP sync, fulfillment provider, custom dashboard) — add a publication check on every variant read. Default to filtered unless you have an explicit reason to include unpublished variants.

A two-line check now is cheaper than a ghost-variant outage during BFCM.

What This Slots Into

Variant-level publishing is not a one-off feature. It is the same trajectory as everything else Shopify shipped this quarter:

Storefront Catalog MCP implementing UCP (April 22) — agents read your catalog directly
Agentic Storefront default-on for US merchants (March 24) — AI traffic up 11x YoY
Web Bot Auth enforcement (May 7) — Shopify gates which agents reach your data
ProductVariant Publishable (May 7) — variant-level control over what every channel sees

The shape: Shopify is making the commerce graph more expressive, more agent-aware, and more channel-aware — all at the variant level. Custom backends and "fully decoupled" stacks have to rebuild this themselves. Hydrogen storefronts inherit it for free, if the storefront actually respects the new fields.

That last part is on you.

We have shipped Hydrogen variant pickers, B2B gating, and multi-market filters under load — happy to scope a per-variant publication audit on your storefront. Talk to us →

How to Get Started

If you are scaffolding a new Hydrogen storefront and want the variant picker, B2B gating, and Storefront API patterns already correct for the May 7 schema change:

npx @weaverse/cli@latest create --template=pilot

bash

Pilot is Weaverse's flagship Hydrogen theme — variant picker patterns updated for the May 2026 schema, B2B and multi-market gating wired in, and Storefront MCP support baked in.

For AI coding agents (Claude Code, Cursor, Copilot, Windsurf, Gemini CLI), install Weaverse's open-source Hydrogen Skills:

npx skills add Weaverse/shopify-hydrogen-skills

bash

Your agent gets up-to-date Hydrogen 2026.4 patterns including the new variant publication checks.

The Bottom Line

ProductVariant being Publishable per channel is a small schema change with a long blast radius. Default behavior keeps existing stores working — but the moment a merchant uses the new control, every Hydrogen variant picker, B2B catalog, multi-market filter, and channel app that ignored it starts shipping bad data.

The fix is three lines in a loader, one filter in a variant selector, and an audit pass on any channel app you wrote. Less than a sprint, total.

The cost of skipping it is ghost variants in production, agent recommendations that 404 at checkout, and B2B leakage. Pay the sprint.