How to Add Shopify Variants

Aug 20, 2020

864 Dmitriy Parhomenko

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.

ecommerce development

Build a custom Shopify store with BelVG

Can't configure variants yourself? We can help!

Contact us

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

 

shopify product variants configuration

 

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

 

add variants on shopify

 

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' %}

 

shopify product variants configure

 

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.

 

add more shopify variants than the default

 

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.

 

shopify ui generator tool use

 

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

 

shopify variants custom options

 

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

 

change custom template for shopify 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.

 

shopify variants customization

 

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.

 

duplicate shopify variants for different options

 

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.

 

hide shopify 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“.

 

how to hide options in product page shopify

 

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:


hide unavailable shopify variant

 

Here we go! Now only related options are displayed:

 

link shopify related options

 

How to show variants as separate products

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

 

how to separate shopify product variants

 

  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:


separate shopify product variants by category

 

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.

 

shopify product options sorted by color

 

ecommerce development

Build a custom Shopify store with BelVG

Can't configure variants yourself? We can help!

Contact us
Vlad Yunusov

Partner With Us

Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Vlad

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *