sold out variant

Store Design
, , ,
1

I’m using the Impulse theme on Shopify. I want that when I have a product with size variants (Small, Medium, Large), and for example, the Small size goes out of stock, instead of it disappearing, it should remain visible with a strikethrough line on it.

my website: www.heeriye.pk

2

Hey @sitarakhalid ,

Hope you’re doing great :slightly_smiling_face:

Here’s how to implement this customization:

Step 1: Locate the Variant Selector Files

In your Shopify admin, go to Online Store > Themes > Actions > Edit Code. You’ll need to find these files:

  • snippets/product-form.liquid or sections/product-template.liquid
  • assets/theme.css or assets/theme.scss.liquid

## Step 2: Modify the Variant Selector Liquid Code

Look for the variant selector loop in your product form file. It should look something like this:

{%- for option in product.options_with_values -%}
  {%- for value in option.values -%}
    <!-- existing variant option code -->
  {%- endfor -%}
{%- endfor -%}

Replace or modify this section with:

{%- for option in product.options_with_values -%}
  <div class="selector-wrapper js product-form__item">
    <label class="product-form__label">{{ option.name }}</label>
    <div class="variant-input-wrapper">
      {%- for value in option.values -%}
        {%- liquid
          assign variant_available = false
          for variant in product.variants
            if variant.option1 == value or variant.option2 == value or variant.option3 == value
              if variant.available
                assign variant_available = true
                break
              endif
            endif
          endfor
        -%}
        <input 
          type="radio" 
          id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}" 
          name="{{ option.name | handleize }}"
          value="{{ value | escape }}"
          class="variant-input{% unless variant_available %} variant-input--unavailable{% endunless %}"
          {% if option.selected_value == value %}checked{% endif %}
        >
        <label 
          for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
          class="variant-label{% unless variant_available %} variant-label--unavailable{% endunless %}"
        >
          {{ value }}
        </label>
      {%- endfor -%}
    </div>
  </div>
{%- endfor -%}

## Step 3: Add CSS Styling

Add this CSS to your theme’s stylesheet (usually assets/theme.css or assets/theme.scss.liquid):

/* Style for unavailable variants */
.variant-label--unavailable {
  text-decoration: line-through !important;
  color: #999 !important;
  opacity: 0.6;
}

/* Ensure unavailable variants are still clickable but styled differently */
.variant-input--unavailable + .variant-label--unavailable {
  cursor: not-allowed;
  background-color: #f5f5f5;
  border-color: #ddd;
}

/* When unavailable variant is selected */
.variant-input--unavailable:checked + .variant-label--unavailable {
  background-color: #e0e0e0;
  color: #666 !important;
  text-decoration: line-through !important;
}

/* For button-style variants */
.variant-input--unavailable + .variant-label--unavailable {
  position: relative;
}

.variant-input--unavailable + .variant-label--unavailable::after {
  content: " (Out of Stock)";
  font-size: 0.8em;
  color: #999;
  font-weight: normal;
}

## Step 4: Update JavaScript (if needed)

If your theme uses JavaScript for variant selection, you may need to modify the JavaScript to allow selection of out-of-stock variants. Look for files like assets/theme.js or assets/product-form.js and ensure the variant selection logic doesn’t prevent clicking on unavailable variants.

## Alternative Simpler Approach

If the above seems complex, you can try this simpler CSS-only approach by adding this to your theme’s CSS:

/* Force show hidden variants and add strikethrough */
.variant-input[disabled] + label,
.variant-input:disabled + label {
  display: inline-block !important;
  text-decoration: line-through !important;
  color: #999 !important;
  opacity: 0.6;
  cursor: not-allowed;
}

/* Show disabled options in dropdowns */
select option:disabled {
  color: #999 !important;
  text-decoration: line-through;
}

This will work like a charm. Feel free to reach out if you’ve any more questions.
Cheers!
Shubham | Untechnickle

3

Hi @sitarakhalid that is an advanced theme customization because of the code modifications required.

For some themes there may be pre-existing tutorials found by spending time searching or DIY’ing from provided code.

‌‌‌‌:warning: :bomb: Always backup themes before changing files :bomb: :warning:‌

Meanwhile if you need this customization, or to repair it, then contact me for services.
Contact info in forum signature below :down_arrow: :down_arrow: :down_arrow:.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

4

its work but i want some styling. I want to show like this

Screenshot attached below

5

Hello @sitarakhalid

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the live theme and then click Actions > Edit code.

  • Search theme.css

  • Insert the provided CSS code at the end of the file and save the changes.

.variant-wrapper .variant-input-wrap label.disabled:after
{
    border-color: #000;
}
.variant-wrapper .variant-input-wrap label.disabled
{
    color: #000;
}

Please hit Like and Mark it as a Solution if you find our reply helpful.