Continue selling out of stock but I want variants to be crossed out

Store Design
, , ,

Topic summary

A user wants to display strikethrough styling on out-of-stock product variants while keeping “continue selling when out of stock” enabled, so customers can still purchase items with extended delivery times.

Solution Provided:

  • Another user (@namphan) requested the store link and the product-variant-options.liquid file code
  • Modified code was provided that successfully adds strikethrough to unavailable variants while maintaining purchase functionality
  • The original poster confirmed the solution works perfectly

Similar Request:

  • A second user (@user1668) using the Minimog theme and a preorder app has the same requirement
  • They want sold-out variants to show strikethrough while the preorder app allows continued sales
  • @namphan explained that each theme has different code structure and requested collaborator access to implement the solution
  • The user has sent a collaboration request and is awaiting implementation

Key Technical Detail:
The fix involves modifying the Liquid template file that renders variant options, specifically targeting the styling of unavailable variants while preserving their selectable state.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
5

Dear @namphan

Here is the code for the product-variant-options.liquid file:

{% comment %}
Renders product variant options

Accepts:

  • product: {Object} product object.
  • option: {Object} current product_option object.
  • block: {Object} block object.
  • picker_type: {String} type of picker to display

Usage:
{% render ‘product-variant-options’,
product: product,
option: option,
block: block
picker_type: picker_type
%}
{% endcomment %}
{%- liquid
assign product_form_id = ‘product-form-’ | append: section.id
-%}

{%- for value in option.values -%}
{%- liquid
assign swatch_focal_point = null
if value.swatch.image
assign image_url = value.swatch.image | image_url: width: 50
assign swatch_value = ‘url(’ | append: image_url | append: ‘)’
assign swatch_focal_point = value.swatch.image.presentation.focal_point
elsif value.swatch.color
assign swatch_value = ‘rgb(’ | append: value.swatch.color.rgb | append: ‘)’
else
assign swatch_value = null
endif

assign option_disabled = true
if value.available
assign option_disabled = false
endif
-%}

{%- capture input_id -%}
{{ section.id }}-{{ option.position }}-{{ forloop.index0 -}}
{%- endcapture -%}

{%- capture input_name -%}
{{ option.name }}-{{ option.position }}
{%- endcapture -%}

{%- capture input_dataset -%}
data-product-url=“{{ value.product_url }}”
data-option-value-id=“{{ value.id }}”
{%- endcapture -%}

{%- capture label_unavailable -%}

{{- ‘products.product.variant_sold_out_or_unavailable’ | t -}}

{%- endcapture -%}

{%- if picker_type == ‘swatch’ -%}
{%- capture help_text -%}
{{ value | escape }}
{{ label_unavailable }}
{%- endcapture -%}
{%
render ‘swatch-input’,
id: input_id,
name: input_name,
value: value | escape,
swatch: value.swatch,
product_form_id: product_form_id,
checked: value.selected,
visually_disabled: option_disabled,
shape: block.settings.swatch_shape,
help_text: help_text,
additional_props: input_dataset
%}
{%- elsif picker_type == ‘button’ -%}
<input
type=“radio”
id=“{{ input_id }}”
name=“{{ input_name | escape }}”
value=“{{ value | escape }}”
form=“{{ product_form_id }}”
{% if value.selected %}
checked
{% endif %}
{% if option_disabled %}
class=“disabled”
{% endif %}
{{ input_dataset }}

<label for=“{{ input_id }}” {% if option_disabled %} class=“variant-option-out-of-stock” {% endif %}>
{{ value }}
{{ label_unavailable }}

{%- elsif picker_type == ‘dropdown’ or picker_type == ‘swatch_dropdown’ -%}

{% if option_disabled -%} {{- 'products.product.value_unavailable' | t: option_value: value -}} {%- else -%} {{- value -}} {%- endif %} {%- endif -%} {%- endfor -%}