Shopify Product Variants: Manage out-of-stock products

A customer contacted SoftwareSupp regarding the problem on the product page on Shopify. Product variants of out-of-stock items were still displayed as available. It led to confusion and unsatisfied customers, who were unable to get purchased goods. A Shopify expert was hired to fix the issue and prevent losing more clients.

Goal: Blocking a non-existing product variant to avoid customers choosing an unavailable combination of size and color.

Client: RoyalPets

Project's scope:‍

• Improvement of user experience by customizing Shopify theme
• Modifications in script’s logic and code
• Corrections of displaying options without making changes in the website’s code
• Final recommendations

Technology stack: Shopify, JavaScript

Project's time: 12h

What are Shopify product variants

Products often come in different sizes, shapes, colors, etc. Moreover, assume a brown dog bedding in size “L” is sold out, but the same color is still available in other sizes. These are product variants. It’s different options for one item that customers might choose between. Store owners can easily add or edit them when using Shopify. Product variants are an essential option for giving clients a varied offer and customizing their shopping experience.

Why Shopify product variants are important

There are over 25 million e-commerce stores around the world. According to BuiltWith Web Technology Usage Report, almost 4 million are using Shopify. Customers have a lot to choose from. They have different preferences, so diversifying products is a minimum that sellers should do. If you want to stay in the game, give clients several choice options.

Improvement of customer satisfaction as main goals of the Shopify Product Variants project

E-satisfaction is one of the most important factors determining business success. Without face-to-face contact with the seller, customers rely on them for other reasons. For example, trust. In e-commerce, it really takes a little time to lose client’s confidence. It might be a lack of secure payments, “About us” page, contact information or no reviews of the store. The User Experience design, in general, significantly impacts customer loyalty.

In this case, what caused the dissatisfaction, were issues with showing unavailable product variants. Consider the following scenario: you have finally purchased the product you have been haunting for a long time. Instead of the e-mail confirming the package was sent, you receive the information that the shipping time will extend because it’s out of stock. How would you react? Most likely, request a refund and look for a different store. This is exactly what most of the customers would do. 

Unfortunately, purchasing unavailable products is still very common. Due to the lack of an automated ordering system or website issues, online retailers suffer from lost clients in this process. In this case, the Shopify expert found a simple solution to improve displaying product variants. It allowed the development of options in a way that complies with the Shopify specification without generating additional costs.

Shopify developer's tasks:

• Customization of modified theme to activate the script that displays the variant
• Implementation of new script logic
• Modifications in the script code displaying product variants
• Hiding the display of unavailable options

The latest research from 2020 shows that the average conversion rate on e-commerce stores that leads to purchases is 2.86%. It’s extremely difficult to convince customers to buy products online. This is why Shopify business owners must ensure that the shopping process goes smoothly. Otherwise, it might cost them the shutdown.

Reason of displaying unavailable product variants

After checking how the Shopify product variants were configured​,​ it turned out that they were created incorrectly. It was the main reason why unavailable options were displayed. As an experiment, changes were made to one product page with the original “Debut” theme. The expert followed steps from the documentation available on Shopify. Product variants were properly added to the product page, and the next step was to see how they could be easily applied to the rest.

In this case, the original Shopify template – Debut – was modified by a client. Because of that, adjustments to displaying non-existing product variants were impossible. As it turned out, the whole product page template, with 800 lines of code, was changed. It included the logic of displaying “Color” and “Size” variants that needed to be modified. Only that would block showing unavailable options to customers.

Improvements of Shopify product variants

After checking other product pages, the perfect solution was to adjust the template, so the store logic itself excluded the unavailable variants. With the existing theme, using the same script logic for other products, was impossible.

However, changing the template was not an option in this case. After evaluating the Shopify theme the customer used, the expert proposed an easy way to improve displaying product variants. He decided that the best option was to customize the modified theme – Debut – and activate the script that displays the variant. In the end, there was no need to make changes to the website's code. Instead of this, the script logic was changed. Variants “Color” and “Size” were replaced by “Available options”, where color and size were related according to available options. It helped to avoid generating unnecessary costs and reworking the product page​.

The result of the project

Because of the modified template, the project was extended. There were many items and no possibility to integrate the created script. As a result, the expert had to improve all products in the store manually.

The project was completed, and the "Available options" logic with the number of available products was implemented on all product pages. Depending on the selected option, the product variant will be added or removed on the product page automatically. Additionally, when the stock of a certain variant is 0, it will be displayed next to it.

Final recommendations

After analyzing the website, the expert recommended changing the Shopify theme. In this scenario, the best and simplest option would be to restore to the original "Debut" template. The logic to block unavailable variants is ready; thus, restoring would take less time.

Of course, the template must be adjusted and filled with content. It'd take additional work, but implemented functionality would be beneficial.

While working on fixing product variants, the expert noticed that the page speed was very slow.  A terrible code optimization resulted in the poor performance of the website. Restoring the original "Debut" template would significantly increase page load speed.

Summary

Shopify product variants are one thing, but there’s a lot more that can go wrong. To maintain a high conversion rate, you must systematically revise your store. If you’re not a specialist, it’s recommended to take the UX audit of the website if you have never done it before. Even if you did, you should still optimize the store. Especially in terms of the final step of purchase, which is a payment. Adding Google Tag Manager to the Shopify checkout page might help avoid issues and improve customers' journey to maintain high sales.