Sold Out Variant

Sold Out Variant

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

Sold Out Variant Design

One Time Purchase!

$14.99
Only
Shipping calculated at checkout.
Refresh after a purchase

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  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

sold out pills

 

Variant Dropdown

Sold out image dropdown

What is Sold Out Variant?

Refers to a product variation that is no longer available for purchase. It could be due to limited stock, discontinuation, or other reasons.

Why use Sold Out Variant?

 

  • Clear Communication: It informs customers immediately that a particular product variant is unavailable, preventing confusion and frustration.
  • Customer Guidance: It can redirect customers to alternative options or encourage them to sign up for notifications when the product is back in stock.
  • Inventory Management: It helps you keep track of your inventory levels and avoid overselling.
  • Marketing Opportunities: You can use sold-out variants to create a sense of urgency or exclusivity, potentially driving sales of other products.
  • Improved User Experience: By providing clear information about product availability, you enhance the overall shopping experience for your customers.

    • Additional Considerations:

    Display Clear "Sold Out" Messages:

    • Use prominent and easily noticeable "Sold Out" labels or messages.
    • Consider using a different color or font to make the message stand out.

    2. Provide Alternative Options:

    • Suggest similar or complementary products that are available.
    • This can help customers find suitable replacements and continue their shopping experience.

    3. Offer Backorder Options:

    • Allow customers to pre-order sold-out items and receive them when they are back in stock.
    • This can help you build anticipation and generate future sales.

    4. Implement a Notification System:

    • Provide customers with the option to sign up for notifications when a sold-out item becomes available again.
    • This can foster customer loyalty and increase the likelihood of future purchases.

    5. Track Sold-Out Variants:

    • Monitor which variants are frequently sold out to identify popular products.
    • Use this information to adjust your inventory and product offerings accordingly.

    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

    Steps on how to add Sold Out Variant:

     

    Step #1. Open your code editor

    From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code

    Step #2. In section folder

    In the Section folder, open the main-product.liquid. 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. 

    Step #3. Replace the code

    Replace the code in the middle or the code inside product-variant-picker.liquid  with the code below. Make sure to click SAVE.

    Step #4. Open the global.js

    Next, open the global.js under the Asset folder. 

    Find the  if (source && destination) destination.innerHTML = source.innerHTML;

    Please see the image for placement

    sold out code

    Step #5. Place code 

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

     

    Step #6. Customize theme

    Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme. Make sure to SAVE once you are done customizing.

     

    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. 

     

    Conclusion

    Effectively handling sold-out variants is essential for maintaining customer satisfaction and maximizing sales in your Shopify store. By implementing clear communication, providing alternative options, and offering backorder or notification features, you can create a positive shopping experience even when products are temporarily unavailable.

    Copied!
    Back to blog

    Leave a comment