Working With Product Variants When Building a Shopify Theme

Shopify Product variants can be a complex task to work with when building your Shopify theme. They can include things like deep links, option selectors, and more.

If you don’t know how to go about it, consider hiring an agency specializing in Shopify theme development for your online store. Just like TheGenieLab, we can help you get the functionality you want while saving you the hassle of doing it yourself. In the store setup, there are Shopify Apps, metatags, you have to add products, and at times add a custom product.

Deep links

Product variants are different variations of a product that are available for purchase. Sometimes, a store owner prioritizes certain variants for greater visibility on the product page.

Using deep links when working with product variants is a great way to make it easy for customers to add a specific variant to their carts. This can be helpful during fast-paced sales events like BFCM.

Before you can use a deep link, you need to set up your app with the right information. The details can vary per platform, but typically include the Android App Scheme and Team ID.

Once you have these details entered, you’ll need to register your delegate in Airship and set a DeepLinkListener on UAirship. This callback will be called when a user clicks on a deep link in your app.

Once you have your delegate set up, you can test your links to see how they work in your app. To test your deep links, you can copy the tracking link URL from the Manage Links page and send it to a device that doesn’t have your app installed.

Variants on the product page

Product variants can help drive more sales by offering buyers the option to choose from different combinations of size, color, or style. For example, one buyer might be interested in two bars of soap of different scents or three pillows with different colors that match their living room.

In eCommerce solutions, such as Shopify, it is important to display the options available for a particular product in an intuitive and compact way. This helps customers quickly find the exact item they want and avoid decision paralysis.

Variants can be added to products using a variety of methods, including JSON, Liquid, or JavaScript. Regardless of the method, it is important to ensure that when a customer selects a variant, the product media and price are updated.

Variants on the collections page

Working with product variants when building a Shopify theme is a great way to create a unique and compelling shopping experience for your customers. They make it easier for shoppers to find products based on their preferences, and they provide an excellent opportunity for customers to share word-of-mouth about your store with friends.

When you have many different variants, it can be hard to show them all on your collections page. However, it is possible to do so with a few simple edits to your theme’s code.

In the theme editor (Customize), go to the Product section and replace the Variant option for swatches with the name of the options you want to display as swatches. Note that you must use the exact name of the product option in this field - it will not accept any other type of option name.

Variants on the product detail page

Product variations are important for your Shopify theme because they can make it easy for customers to see, select, and purchase products that have different attributes. They can be as simple as color selections or as complex as multiple-size options.

If you sell products that have multiple variants, you’ll want to design the product detail page accordingly. For example, if you have a cotton shirt in several different colors and sizes, use the same variation theme to list all of them on one page.

You can also create a Variant Swatch or a Variant Photo to display the different colors, patterns, and styles available for the item on the product detail page. The Variant Swatch will replace the main product picture, while the Variant Photo will show a smaller image on top of the primary product image.

Once you’ve set a product to have variants, you can update those variants at any time on the product details page. However, if you decide to remove a variant from your inventory, it will permanently delete the product.

Conclusion

While Shopify variants are a reasonably simple concept, the challenge is how they get to be used to fit your business model. Your information hierarchy from collections management, how products are interrelated, and how they are displayed affect the user experience making your eCommerce store unique. Variants are used to process your orders and fulfill them too. If you are looking to get assistance in setting up your Shopify store, or configuring applications from the Shopify Apps store - feel free to reach out to us at wish@thegenielab.com