Compatibility: All Shopify 2.0 FREE themes ONLY. Works from lower version to version 11
You can add some styles to your sold out variant pills or variant dropdown. The sold out design in variant pills is grayed out and with a slashed. For the variant dropdown, a out of stock text next to the variant option is added. See images below.
Variant Pills
Variant Dropdown
What you are buying:
- Grayed out variant pills, and out of stock text is added in variant dropdown
- Works with multiple variant options (one to three variant options)
- Works with variant pills or dropdown
- Updates with the variant changes
What makes our code better:
- We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
- We do not leave or add codes use to advertise for our website
- Our code is mobile friendly
Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away.
To start:
1. From your Admin Page, click Online Store > Themes >Actions > Edit code
2. In the Section folder, open the main-product.liquid
3. Find the {%- when 'variant_picker' -%} and the {%- when 'buy_buttons' -%}.
NOTE: If you see {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}, you need to find the Snippet folder and open the product-variant-picker.liquid instead.
4. Replace the code in the middle or the code inside product-variant-picker.liquid with the code below. Make sure to click SAVE.
<style> .js.product-form__input label { overflow: hidden; } .out-of-stock { opacity: 0.5; position: relative; } .out-of-stock:after { content: ""; background: #d1d1d1; height: 3px; width: 100%; position: absolute; rotate: 160deg; left: 0px; top: 50%; } </style> {%- unless product.has_only_default_variant -%} {% assign currentVariant = product.selected_or_first_available_variant %} {% assign _not_available = '' %} {%- for variant in product.variants -%} {% assign variantTitle = variant.title | split: ' / ' %} {%- if variant.available == false %} {% case variant.options.size %} {% when 1 %} {% assign newTitle = variant.title | downcase | handleize | append: ',' %} {% assign _not_available = _not_available | append: newTitle %} {% when 2 %} {% if currentVariant.option1 == variantTitle[0] %} {% assign newTitle = variantTitle[1] | downcase | handleize | append: ',' %} {% assign _not_available = _not_available | append: newTitle %} {% endif %} {% when 3 %} {% if currentVariant.option1 == variantTitle[0] %} {% assign _first_tier = variantTitle[1] | downcase | handleize | append: ',' %} {% assign first_tier = first_tier | append: _first_tier %} {% endif %} {% if currentVariant.option2 == variantTitle[1] %} {% assign _sec_tier = variantTitle[2] | downcase | handleize | prepend: ',' %} {% assign sec_tier = sec_tier | append: _sec_tier %} {% endif %} {% assign _not_available = _not_available | append: sec_tier %} {% endcase %} {% endif %} {%- endfor -%} {% assign not_available = _not_available | split: ',' %} {%- if block.settings.picker_type == 'button' -%} <variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }} > {%- for option in product.options_with_values -%} <fieldset class="js product-form__input"> <legend class="form__label">{{ option.name }}</legend> {%- for value in option.values -%} {% assign handled_value = value | downcase | handleize %} <input type="radio" id="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" name="{{ option.name }}" value="{{ value | escape }}" form="{{ product_form_id }}" {% if option.selected_value == value %} checked {% endif %} > <label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" class="{% if not_available contains handled_value %}out-of-stock{% endif %}" > {{ value }} </label> {%- endfor -%} </fieldset> {%- endfor -%} <script type="application/json"> {{ product.variants | json }} </script> </variant-radios> {%- else -%} <variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }} > {%- for option in product.options_with_values -%} <div class="product-form__input product-form__input--dropdown"> <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}"> {{ option.name }} </label> <div class="select"> <select id="Option-{{ section.id }}-{{ forloop.index0 }}" class="select__select" name="options[{{ option.name | escape }}]" form="{{ product_form_id }}" > {%- for value in option.values -%} {% assign handled_value = value | downcase | handleize %} <option value="{{ value | escape }}" {% if option.selected_value == value %} selected="selected" {% endif %} > {{ value }} {% if not_available contains handled_value %}- out of stock{% endif %} </option> {%- endfor -%} </select> {% render 'icon-caret' %} </div> </div> {%- endfor -%} <script type="application/json"> {{ product.variants | json }} </script> </variant-selects> {%- endif -%} {%- endunless -%} <noscript class="product-form__noscript-wrapper-{{ section.id }}"> <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}"> <label class="form__label" for="Variants-{{ section.id }}"> {{- 'products.product.product_variants' | t -}} </label> <div class="select"> <select name="id" id="Variants-{{ section.id }}" class="select__select" form="{{ product_form_id }}" > {%- for variant in product.variants -%} <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} {% if variant.available == false %} disabled {% endif %} value="{{ variant.id }}" > {{ variant.title }} {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %} - {{ variant.price | money | strip_html }} </option> {%- endfor -%} </select> {% render 'icon-caret' %} </div> </div> </noscript> |
5. Next, open the global.js under the Asset folder.
6. Find the if (source && destination) destination.innerHTML = source.innerHTML;
Please see the image for placement
7. Below the code, place the code below. Make sure click SAVE.
let notAvailableHTML = html.querySelector('variant-radios'); if(html.querySelector('variant-selects')) { notAvailableHTML = html.querySelector('variant-selects'); } this.innerHTML = notAvailableHTML.innerHTML; |
That is it (",)