Support product variants
Products can be broken up into a maximum of three options, and a single combination of those options is a variant. For example, if a t-shirt comes in sizes S
, M
, and L
, and colors Black
, White
, and Red
, then S/Black
would be a variant of that product.
In this tutorial, you'll learn how to support product variants in your theme.
To support product variants, you'll use the following:
- The
product
object - The
variant
object
Implementing product variants
Anchor link to section titled "Implementing product variants"To support variants in your theme, you need to implement the following components:
- Variant deep link handling: A variant can be linked to directly, so you should ensure that the product information is updated for the "selected" variant when a variant is referenced in a product link.
- Variant selectors: You should build a variant selector to allow customers to easily browse the available variants of a product. Selecting a variant should update the page with variant-specific information.
You might want to add these components to a section that can be included in a JSON product template, or a Liquid product template.
Variant deep link handling
Anchor link to section titled "Variant deep link handling"Variant deep links are product links that contain a ?variant=[variant-id]
query parameter, where [variant-id]
is the ID of the associated variant. This allows you to link directly to a variant. You can add this functionality to a section that can be included in a JSON product template, or a Liquid product template.
When variants are deep-linked, you can access which variant is linked through the selected_variant
attribute of the product
object. However, a product link won't always contain a deep-linked variant. In these cases, you can default to the selected, first available, or first variant through the selected_or_first_available_variant
attribute.
After you identify the variant that you want to display, you need to ensure that the following product elements reflect it:
- Product media
- Product price
- Variant selector
The following example assigns a default variant using product.selected_or_first_available_variant
, populates a basic media and price display based on that variant, and selects that variant in a basic variant selector.
Variant selectors
Anchor link to section titled "Variant selectors"You can use a single variant selector where each option represents a variant. However, products may have more than one option. For a better buyer experience and to avoid future compatibility issues, we recommend that you present each of these options separately in the UI. To achieve this, you can use the product.options_with_values
object to generate a selector for each option. You can then use JavaScript to update the state when a new option value is selected.
Variant selectors should be added to a section that can be included in a JSON product template, or a Liquid product template. They can also be included in product grid or product quick view snippets to allow customers to view variants on other pages, like collections.