Overview

In Shopify, a ProductVariant node is the specific purchasable option combination. Every Shopify product has at least one variant.

type ProductVariant {
  id: ID!
  title: String!
  sku: String
  barcode: String
  price: MoneyV2!
  compareAtPrice: MoneyV2
  availableForSale: Boolean!
  selectedOptions: [SelectedOption!]!
  inventoryItem: InventoryItem
  image: Image
}

Liquid Theme Access

In Liquid, a variant object is accessed via product.variants or product.selected_or_first_available_variant:

{% assign current_variant = product.selected_or_first_available_variant %}

<span class="price">{{ current_variant.price | money }}</span>
{% if current_variant.compare_at_price > current_variant.price %}
  <s class="compare-price">{{ current_variant.compare_at_price | money }}</s>
{% endif %}

Developer Takeaway

Variant Option Matching: When writing custom JavaScript variant pickers in Liquid or headless react storefronts, match user selection against the selectedOptions array (e.g. { name: "Color", value: "Black" }) rather than string parsing variant titles.