How to show available options in product cards, using Shopify Liquid

A Shopify available options component makes it easy for customers to see which product variants are currently in stock without opening the product page. In this tutorial, you'll learn how this Shopify Liquid component displays available sizes or other product options directly on collection page product cards, improving product discovery and helping shoppers find the right variant faster. The Highstreet theme supports this feature natively, out of the box, without relying on third party apps.

July 2026 • Shopify tutorial

Why every Shopify store should display available options or sizes in product cards

Customers often browse collection pages before deciding which product to view. Displaying available sizes or product options directly on each product card helps shoppers quickly determine whether a product is likely to meet their needs before clicking through.

Showing available variants also reduces unnecessary product page visits for out-of-stock products, creating a smoother shopping experience while helping customers make faster purchasing decisions.

Step 1: Choose which Shopify product option to display

This component is designed to target any Shopify product option, including sizes, colors, materials, or other variant attributes. The option is selected using the option_label variable, making the component flexible enough to work with virtually any product catalog.

For clothing stores, displaying available sizes is often the most valuable option. Other merchants may prefer to display available colors, capacities, finishes, or lengths depending on the products they sell.

Step 2: Filter available Shopify variants with Liquid

The component loops through the product's options using Shopify Liquid and compares each option against the configured label. Once the correct option is found, it checks every variant to confirm that it's available for purchase.

Unavailable variants and products that require a selling plan are automatically excluded, ensuring customers only see sizes and options they can actually purchase.

Duplicate option values are also removed, preventing repeated labels from appearing when multiple variants share the same size or option value.

Step 3: Link customers directly to the selected variant

Each available size or option can optionally link directly to its corresponding Shopify variant. Instead of landing on the default product page, customers arrive with the correct variant already selected, reducing friction before adding the item to their cart.

If variant links aren't needed, the component can simply display the available options as labels by changing a single configuration setting.

Step 4: Display available options on every product card

The component is positioned at the top of each product card using lightweight CSS. This makes available sizes and options immediately visible while preserving valuable space for product images, pricing, and promotional badges.

Because the layout uses flexible styling, the component adapts naturally to desktop and mobile devices without requiring additional JavaScript.

Step 5: Customize the appearance

The component uses CSS custom properties for colors, spacing, and typography, making it easy to match your Shopify store's branding. Since all styling is self-contained, developers can customize the appearance without affecting other product card components.

Whether you prefer minimalist text labels, badges, or pill-shaped buttons, the component can be adapted to suit almost any storefront design while maintaining excellent performance.

Why this approach is better than using an app

Many Shopify apps add variant selectors or swatches to collection pages, but they often introduce unnecessary JavaScript, increase page load times, and require ongoing subscription fees.

Using Shopify Liquid to display available sizes and options keeps everything native to your theme. The result is a faster storefront that's easier to maintain, easier to customize, and fully integrated with Shopify's product data.

Build better Shopify collection pages with the Highstreet theme

Components like this are part of what makes Highstreet an excellent choice for merchants who want to improve product discovery and increase conversions. Highstreet includes practical, conversion-focused components that help customers find the products they want faster while keeping your storefront lightweight and maintainable.

If you're looking for a fast, flexible Shopify theme that includes production-ready components, clean Liquid architecture, and built-in features that reduce your reliance on third-party apps, explore the Highstreet theme. It's designed to help Shopify merchants build modern, high-converting storefronts with less custom development.

highstreet-theme-available-options-component.liquid {%- comment -%} Description: - Renders product options for the current product. Configuration: - option_label: The option label being targeted, for example: [size]. - use_links: If the component should render links or not, for example: [true]. - product_card_class: The product card class where the component is nested, for example [product-card]. Usage: - The snippet should be rendered inside the product card element, and configured as above. - {%- render 'highstreet-theme-available-options-component', product: product -%} {%- endcomment -%} {%- if product.available -%} {%- liquid assign option_label = 'size' assign use_links = true assign product_card_class = 'product-card' assign available_options = blank assign available_options_string = '' for option in product.options_with_values assign option_name_formatted = option.name | strip | handle assign option_label_formatted = option_label | strip | handle if option_name_formatted == option_label_formatted for product_option_value in option.values if product_option_value.variant.available and product_option_value.variant.requires_selling_plan == false unless available_options_string contains product_option_value.name assign available_options_string = available_options_string | append: product_option_value | append: '--url--' | append: product_option_value.variant.url | append: '--option--' endunless endif endfor break endif endfor assign available_options = available_options_string | split: '--option--' -%} {%- if available_options != blank and available_options.size > 0 -%} {%- style -%} :root { --highstreet-theme-available-options-component--color--foreground: #212121; --highstreet-theme-available-options-component--color--background: #ffffff; --highstreet-theme-available-options-component--color--border: #eeeeee; --highstreet-theme-available-options-component--spacing--extra-small: 5px; --highstreet-theme-available-options-component--spacing--small: 10px; --highstreet-theme-available-options-component--spacing--medium: 20px; --highstreet-theme-available-options-component--spacing--large: 40px; --highstreet-theme-available-options-component--spacing--extra-large: 60px; } .{{- product_card_class }} { position: relative; } .highstreet-theme-available-options-component { position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: var(--highstreet-theme-available-options-component--spacing--extra-small); margin: 0; padding: var(--highstreet-theme-available-options-component--spacing--extra-small); box-sizing: border-box; list-style: none; overflow: auto; scrollbar-width: none; z-index: 1; } .highstreet-theme-available-options-component > li { margin: 0; } .highstreet-theme-available-options-component > li > a, .highstreet-theme-available-options-component > li > div { display: block; margin: 0; color: var(--highstreet-theme-available-options-component--color--foreground); background: var(--highstreet-theme-available-options-component--color--background); padding: var(--highstreet-theme-available-options-component--spacing--extra-small); white-space: nowrap; line-height: 1; } {%- endstyle -%} <ul class='highstreet-theme-available-options-component'> {%- for option in available_options -%} {%- assign option_parts = option | split: '--url--' -%} {%- assign option_label = option_parts[0] -%} {%- assign option_url = option_parts[1] -%} <li> {%- if use_links == true -%} <a href='{{- option_url -}}'> {{- option_label -}} </a> {%- else -%} <div> {{- option_label -}} </div> {%- endif -%} </li> {%- endfor -%} </ul> {%- endif -%} {%- endif -%}