How to Hide Unavailable Variants in Shopify.

Table of Contents

1. Introduction
2. Understanding the Challenge of Unavailable Variants
3. Why You Should Hide Unavailable Variants
5. Alternative Solutions
6. The Importance of User Experience in E-commerce
7. Conclusion
8. FAQ Section

Introduction

Have you ever experienced the frustration of navigating a cluttered online store, only to find unavailable product variants left on display? As an online retailer, you understand that a seamless shopping experience is crucial to keeping customers engaged and encouraging conversions. When customers are presented with options they can't select—like a size that doesn’t exist for a particular color—it can lead to confusion and even abandonment of their shopping cart.

In the world of e-commerce, every detail matters. Managing product variants efficiently is not just a matter of aesthetics; it directly impacts user experience and sales. This blog post aims to guide you through the essential steps on how to hide unavailable variants in Shopify, ensuring that your customers only see options they can actually purchase. By the end of this post, you will not only understand the technical aspects of implementing this feature but also appreciate its significance in enhancing user experience.

We will explore the challenges posed by displaying unavailable variants, the solutions available, and how to implement custom code in your Shopify theme. Additionally, we will provide insights into the importance of user experience and how proper management of variants can contribute to your brand's success. Let’s dive into the specifics!

Understanding the Challenge of Unavailable Variants

When managing an online store, particularly one with multiple products and options, you might encounter situations where certain combinations of variants do not exist. For example, if you sell T-shirts in various colors and sizes, you might only offer specific sizes for certain colors. The default behavior of Shopify is to display all possible variants—this includes those that are unavailable, which can be frustrating for customers.

The Impact on User Experience

When customers see options that are greyed out or marked as unavailable, it can detract from their shopping experience. It leads to confusion, as they may not understand why they can't select certain options. A well-organized product page that only shows available variants can significantly improve user engagement and reduce the bounce rate.

By hiding unavailable variants, you create a cleaner, more intuitive shopping interface. This not only enhances user experience but also reflects positively on your brand’s reputation.

Why You Should Hide Unavailable Variants

1. Improved User Experience: Customers appreciate a straightforward shopping experience without unnecessary distractions. By showing only available variants, you streamline the decision-making process.

2. Increased Conversion Rates: Reducing confusion on product pages can lead to higher conversion rates. Customers are more likely to complete a purchase when they see options that meet their needs.

3. Enhanced Brand Perception: A well-organized online store reflects professionalism and attention to detail. This can encourage repeat business and customer loyalty.

4. Reduced Customer Inquiries: By clearing up confusion around unavailable variants, you can decrease the number of customer service inquiries regarding product availability.

While Shopify does not provide a built-in feature to hide unavailable variants, you can achieve this functionality by adding a small snippet of custom code to your theme. Below are the steps to implement this solution:

Step-by-Step Guide to Implementing Custom Code

Step 1: Access Your Shopify Admin Panel

1. Log in to your Shopify admin panel.
2. Navigate to Sales Channels > Online Store > Themes.

Step 2: Customize Your Theme

1. Find the theme you want to edit and click on Customize.
2. Select the Product template where you want to hide the unavailable variants.

Step 3: Add Custom Code

1. Within the Product Information section, click on + Add block and select Custom liquid block.
2. Copy and paste the following custom JavaScript code into the Custom liquid field:

<script language="javascript" type="text/javascript">
const pickerType = (document.querySelector('variant-radios')) ? 'radios' : 'selects';
const variantSelects = (pickerType == 'radios') ? document.querySelector('variant-radios') : document.querySelector('variant-selects');
const fieldsets = (pickerType == 'radios') ? Array.from(variantSelects.querySelectorAll('fieldset')) : Array.from(variantSelects.querySelectorAll('.product-form__input--dropdown'));
const productJson = JSON.parse(variantSelects.querySelector('[type="application/json"]').textContent);
let selectedOptions = [];
variantSelects.addEventListener('change', rebuildOptions);
this.rebuildOptions();

function validCombo(inputValue, optionLevel) {
    for(let i = 0; i < productJson.length; i++) {
        if(optionLevel == 1){
            if (productJson[i].option1 == selectedOptions[0] && productJson[i].option2 == inputValue) {
                return true;
            }
        } else {
            if (productJson[i].option1 == selectedOptions[0] && productJson[i].option2 == selectedOptions[1] && productJson[i].option3 == inputValue) {
                return true;
            }
        }
    }
    return false;
}

function rebuildOptions() {
    selectedOptions = fieldsets.map((fieldset) => {
        return (pickerType == 'radios') ? Array.from(fieldset.querySelectorAll('input')).find((radio) => radio.checked).value : Array.from(fieldset.querySelectorAll('select'), (select) => select.value);
    });

    for(let optionLevel = 1, n = fieldsets.length; optionLevel < n; optionLevel++) {
        const inputs = (pickerType == 'radios') ? fieldsets[optionLevel].querySelectorAll('input') : fieldsets[optionLevel].querySelectorAll('option');
        inputs.forEach(input => {
            input.disabled = (validCombo(input.value,optionLevel)) ? false : true;
            if(pickerType == 'radios'){
                const label = fieldsets[optionLevel].querySelector(`label[for="${input.id}"]`);
                label.style.display = (input.disabled) ? "none" : "";
            } else {
                input.hidden = (validCombo(input.value,optionLevel)) ? false : true;
            }
        });
    }

    for (let optionLevel = 1, fieldsetsLength = fieldsets.length, change = false; optionLevel < fieldsetsLength && !change; optionLevel++) {
        if(pickerType == 'radios'){
            if(fieldsets[optionLevel].querySelector('input:checked').disabled === true) {
                change = (fieldsets[optionLevel].querySelector('input:not(:disabled)').checked = true);
            }
        } else {
            if(fieldsets[optionLevel].querySelector('option:checked').disabled === true) {
                change = (fieldsets[optionLevel].querySelector('option:not(:disabled)').selected = "selected");
            }
        }
        if(change) variantSelects.dispatchEvent(new Event('change', { bubbles: true }));
    }
}
</script>

3. Click Save to apply the changes.

Step 4: Test the Changes

1. Refresh your product page to ensure that the unavailable variants are now hidden based on the selected options.
2. Test the functionality by selecting different options to confirm that only available variants are displayed.

By following these steps, you can effectively hide unavailable variants on your Shopify store, providing a cleaner and more user-friendly shopping experience.

Alternative Solutions

If you prefer not to deal with coding, there are alternative approaches to manage unavailable variants:

1. Use Third-Party Apps

Several Shopify apps can help you manage product variants and hide out-of-stock items. Some popular options include:

• Out-of-Stock Police: This app allows you to completely hide out-of-stock products and their variants or simply push them down on the collection pages.
• King Product Options: This app utilizes conditional logic to manage and display product options based on availability.

2. Modify Inventory Settings

If you want a straightforward approach, you can manually adjust the inventory settings for each variant:

1. Go to your Shopify admin panel.
2. Navigate to Products and select the item.
3. In the Variants section, uncheck the option to continue selling when out of stock, and set the stock quantity to zero.

However, keep in mind that this method removes the products completely from visibility, which may not be ideal for all store owners.

The Importance of User Experience in E-commerce

Creating an optimal user experience goes beyond just hiding unavailable variants. It encompasses all aspects of your online store, from design to functionality. A well-designed user experience can lead to higher customer satisfaction, increased loyalty, and ultimately, greater sales.

Collaborating with Experts

At Praella, we specialize in user experience and design, offering data-driven solutions tailored to your specific needs. Our team can help you create unforgettable, branded experiences for your customers. Whether you need web development or strategic consultation, we are here to guide you on your journey to exponential growth. Explore our services at Praella Solutions.

Conclusion

In the competitive landscape of e-commerce, presenting your products in an organized and user-friendly manner can set your store apart from the rest. Hiding unavailable variants in Shopify not only enhances the aesthetic appeal of your product pages but also significantly improves the overall shopping experience for your customers.

By following the steps outlined in this blog post, you can ensure that your customers only see viable options, which in turn can lead to increased conversions and customer satisfaction. Remember, every detail counts in the world of online retail.

If you're looking to further enhance your Shopify store or need assistance with custom solutions, consider reaching out for professional help. Together, we can explore how your business can benefit from strategic planning, web development, and exceptional design services.

FAQ Section

Q1: Can I hide unavailable variants without coding?

Yes, you can use third-party apps like Out-of-Stock Police or King Product Options to manage and hide unavailable variants without needing to code.

Q2: What if I accidentally hide too many variants?

If you notice that too many variants are hidden, you can easily revert the changes by removing the custom code or adjusting the settings in your inventory management.

Q3: Will hiding unavailable variants affect my SEO?

Hiding unavailable variants should not negatively impact your SEO if done correctly. Ensure that your store’s content remains relevant and accessible to search engines.

Q4: How can I improve the overall user experience of my Shopify store?

Improving user experience involves optimizing your site’s design, ensuring fast loading times, streamlining navigation, and providing clear product information. Consider consulting with professionals like Praella to enhance these aspects.

Q5: What other features can I implement to boost sales?

Consider incorporating features such as customer reviews, wish lists, or product recommendations. These can enhance user engagement and drive higher conversion rates.

Incorporating these strategies will not only enhance the efficiency of your Shopify store but also contribute to a more enjoyable shopping experience for your customers.