How to Add Shopify Variants

In your Shopify store, you can add, display and edit different product variants. This article will provide you with all the information you need to configure custom variants, exceed default capabilities to add more variants and options, hide them if necessary and show variants as separate products. Improve your store with the proven-to-work tips from the BelVG developers!

Shopify custom variants
How to add variants on Shopify
How to add more Shopify variants and options than the default ones
How to add one Shopify variant or in bulk & add option to existing variant
How to hide Shopify variants
How to show variants as separate products

Shopify custom variants

By default, on Shopify one product can be presented in three different options. You can select them from the presets offered in the Shopify admin (like size, color, etc.) or set the custom options that you need. The product options, in their turn, can be split into option values: small, medium or large sizes, different colors or material types, and so on. Besides that, you can add text, image and other options to a product using Shopify apps only. And one specific combination of different option values makes up one product variant.

How to add variants on Shopify

On Shopify, you can add only 100 variants and not more than 3 options to one product. No matter what Plan you use, it is a default setting for all stores on this platform.

When creating a product, you can also create product variants:

1. In the variants section, click Add variant.
2. Enter a name for the option.
3. In the parameter values field, enter the parameter value followed by a comma, for example: S, M, L

 

 

How to add more Shopify variants and options than the default ones

The limit of variants and options can be increased only by using an app from the Shopify App Store.

You can configure your theme code to extract line properties to get custom requirements from your customers if you need to sell a product that has more than 100 variants or 3 options.

Important! Don’t forget to save all your files after you change them.

Let’s see how you can create a new product page template:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Templates directory, click Add a new template.
4. Choose product from the drop-down menu, and give your template a name “custom“.

 

 

5. Click Create template. It creates a copy of your product.liquid template with the name product.custom.liquid.

6. Find the following line of code:  {% section 'product-template' %} and replace it with: {% section 'product-custom-template' %}

 

 

7. In the Sections directory, click Add a new section.

8. Give your new section file a name “product-custom-template”. Click Create section.

9. Delete all of the default code so that the file is empty. Copy all of the content from your product-template.liquid file and paste it into your new product-custom-template file.

 

 

10. You can add as many custom form fields to your product page as you need. You can use the Shopify UI Elements Generator tool to easily generate the HTML and Liquid code for each form field that you want to add to your cart page.

 

 

11. The result code from the generator is inserted into a new product-custom-template template in a desired place.

 

 

12. To display this template, you need to change it for the product.

 

 

How to add one Shopify variant or in bulk & add option to existing variant

To add one variant, you have to click in the Variants section Add variant.

 

 

To add variants in bulk, you need to duplicate the variant where you want to add a new option. For example, you need to create product variants with a new size S. To do this, you need to select the Size L > More action > Duplicate variants (..in another size) > Write a new size > Save.

 

 

How to hide Shopify variants

To avoid displaying unavailable combinations of options when a client selects one of the options, you should link these options.

 

 

Follow these steps to link options:

1. Go to Online Store > Themes.
2. Click Actions > Edit code.
3. Under Snippets, click the link Add a new snippet.
4. Give your new snippet a name “linked-product-options“.

 

 

5. In your new snippet file, paste the following code:

6. Go to the theme.liquid file.

7. Before the closing </body> tag, you need to paste the following code:

 

Here we go! Now only related options are displayed:

 

 

How to show variants as separate products

Now let’s separate products according to color variants on the category page:

 

 

1. Open the collection-template.liquid file in the Section folder.
2. Find the following line of code: <ul class=”grid grid–uniform{% if collection.products_count > 0 %} grid–view-items{% endif %}”>
3. And inside the ul tag delete the whole code and paste this one:

 

4. Create a new product-card-grid-variants.liquid snippet in the Snippet folder.

5. Insert the following code there:

Well done! The category page now has its products separated by color.