Sold Out Variant

Sold Out Variant

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility: All  Shopify 2.0 FREE themes  ONLYWorks 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

sold out pills


Variant Dropdown

Sold out image 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.

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

sold out code

7. Below the code, place the code below. Make sure click SAVE.


That is it (",)

Back to blog

Leave a comment