{"id":26520,"date":"2020-08-20T10:40:35","date_gmt":"2020-08-20T08:40:35","guid":{"rendered":"https:\/\/belvg.com\/blog\/?p=26520"},"modified":"2025-02-11T13:14:55","modified_gmt":"2025-02-11T11:14:55","slug":"shopify-variants","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/shopify-variants.html","title":{"rendered":"How to Add Shopify Variants"},"content":{"rendered":"\n

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!<\/p>\n

<\/p>\n

Shopify custom variants
\n<\/a>How to add variants on Shopify
\n<\/a>How to add more Shopify variants and options than the default ones
\n<\/a>How to add one Shopify variant or in bulk & add option to existing variant
\n<\/a>How to hide Shopify variants
\n<\/a>How to show variants as separate products<\/a><\/p>\n

Shopify custom variants<\/h2>\n

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<\/a> only. And one specific combination of different option values makes up one product variant.<\/p>\n

<\/a>
\"ecommerce

Build a custom Shopify store with BelVG<\/h3>

Can't configure variants yourself? We can help!<\/p>Contact us<\/span><\/a><\/div><\/div><\/div>\n

How to add variants on Shopify<\/h2>\n

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.<\/p>\n

When creating a product, you can also create product variants:<\/p>\n

    \n
  1. In the variants<\/strong> section, click Add variant<\/strong>.<\/li>\n
  2. Enter a name for the option.<\/li>\n
  3. In the parameter values<\/strong> field, enter the parameter value followed by a comma, for example: S, M, L<\/li>\n<\/ol>\n

     <\/p>\n

    \"shopify<\/p>\n

     <\/p>\n

    How to add more Shopify variants and options than the default ones<\/h2>\n

    The limit of variants and options can be increased only by using an app from the Shopify App Store<\/a>.<\/p>\n

    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.<\/p>\n

    Important! Don’t forget to save all your files after you change them.<\/strong><\/p>\n

    Let’s see how you can create a new product page template:<\/p>\n

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

       <\/p>\n

      \"add<\/p>\n

       <\/p>\n

      5. Click Create template<\/strong>. It creates a copy of your product.liquid<\/strong> template with the name product.custom.liquid<\/strong>.<\/p>\n

      6. Find the following line of code:  {% section 'product-template' %}<\/code> and replace it with: {% section 'product-custom-template' %}<\/code><\/p>\n

       <\/p>\n

      \"shopify<\/p>\n

       <\/p>\n

      7. In the Sections<\/strong> directory, click Add a new section<\/strong>.<\/p>\n

      8. Give your new section file a name “product-custom-template”. Click Create<\/strong> section<\/strong>.<\/p>\n

      9. Delete all of the default code so that the file is empty. Copy all of the content from your product-template.liquid<\/strong> file and paste it into your new product-custom-template<\/strong> file.<\/p>\n

       <\/p>\n

      \"add<\/p>\n

       <\/p>\n

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

       <\/p>\n

      \"shopify<\/p>\n

       <\/p>\n

      11. The result code from the generator is inserted into a new product-custom-template<\/strong> template in a desired place.<\/p>\n

       <\/p>\n

      \"shopify<\/p>\n

       <\/p>\n

      12. To display this template, you need to change it for the product.<\/p>\n

       <\/p>\n

      \"change<\/p>\n

       <\/p>\n

        \n
      1. \n<\/ol>\n

        How to add one Shopify variant or in bulk & add option to existing variant<\/h2>\n

        To add one variant, you have to click in the Variants<\/strong> section Add variant<\/strong>.<\/p>\n

         <\/p>\n

        \"shopify<\/p>\n

         <\/p>\n

        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<\/strong> > More action<\/strong> > Duplicate variants (..in another size)<\/strong> > Write a new size<\/strong> > Save<\/strong>.<\/p>\n

         <\/p>\n

        \"duplicate<\/p>\n

         <\/p>\n

        How to hide Shopify variants<\/h2>\n

        To avoid displaying unavailable combinations of options when a client selects one of the options, you should link these options.<\/p>\n

         <\/p>\n

        \"hide<\/p>\n

         <\/p>\n

        Follow these steps to link options:<\/p>\n

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

           <\/p>\n

          \"how<\/p>\n

           <\/p>\n

          5. In your new snippet file, paste the following code:<\/p>\n

           \r\n<script>\r\nwindow.addEventListener('DOMContentLoaded', function() {\r\n  var Shopify = Shopify || {};\r\n    \r\n  \/\/ Required functionality from depricated options_selection.js\r\n  Shopify.arrayIncludes = function(e, t) {\r\n    for (var n = 0; n < e.length; n++)\r\n        if (e[n] == t) return !0;\r\n    return !1\r\n  }, Shopify.uniq = function(e) {\r\n      for (var t = [], n = 0; n < e.length; n++) Shopify.arrayIncludes(t, e[n]) || t.push(e[n]);\r\n      return t\r\n  }\r\n\r\n  Shopify.optionsMap = {};\r\n\r\n  Shopify.updateOptionsInSelector = function(selectorIndex) {\r\n      \r\n    switch (selectorIndex) {\r\n      case 0:\r\n        var key = 'root';\r\n        var selector = jQuery('.single-option-selector:eq(0)');\r\n        break;\r\n      case 1:\r\n        var key = jQuery('.single-option-selector:eq(0)').val();\r\n        var selector = jQuery('.single-option-selector:eq(1)');\r\n        break;\r\n      case 2:\r\n        var key = jQuery('.single-option-selector:eq(0)').val();  \r\n        key += ' \/ ' + jQuery('.single-option-selector:eq(1)').val();\r\n        var selector = jQuery('.single-option-selector:eq(2)');\r\n    }\r\n    \r\n    var initialValue = selector.val();\r\n    selector.empty();    \r\n    var availableOptions = Shopify.optionsMap[key];\r\n    for (var i=0; i<availableOptions.length; i++) {\r\n      var option = availableOptions[i];\r\n      var newOption = jQuery('<option><\/option>').val(option).html(option);\r\n      selector.append(newOption);\r\n    }\r\n    jQuery('.swatch[data-option-index=\"' + selectorIndex + '\"] .swatch-element').each(function() {\r\n      if (jQuery.inArray($(this).attr('data-value'), availableOptions) !== -1) {\r\n        $(this).removeClass('soldout').show().find(':radio').removeAttr('disabled','disabled').removeAttr('checked');\r\n      }\r\n      else {\r\n        $(this).addClass('soldout').hide().find(':radio').removeAttr('checked').attr('disabled','disabled');\r\n      }\r\n    });\r\n    if (jQuery.inArray(initialValue, availableOptions) !== -1) {\r\n      selector.val(initialValue);\r\n    }\r\n    selector.trigger('change');\r\n    \r\n  };\r\n\r\n  Shopify.linkOptionSelectors = function(product) {\r\n    \/\/ Building our mapping object.\r\n    for (var i=0; i<product.variants.length; i++) {\r\n      var variant = product.variants[i];\r\n      if (variant.available) {\r\n        \/\/ Gathering values for the 1st drop-down.\r\n        Shopify.optionsMap['root'] = Shopify.optionsMap['root'] || [];\r\n        Shopify.optionsMap['root'].push(variant.option1);\r\n        Shopify.optionsMap['root'] = Shopify.uniq(Shopify.optionsMap['root']);\r\n        \/\/ Gathering values for the 2nd drop-down.\r\n        if (product.options.length > 1) {\r\n          var key = variant.option1;\r\n          Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];\r\n          Shopify.optionsMap[key].push(variant.option2);\r\n          Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);\r\n        }\r\n        \/\/ Gathering values for the 3rd drop-down.\r\n        if (product.options.length === 3) {\r\n          var key = variant.option1 + ' \/ ' + variant.option2;\r\n          Shopify.optionsMap[key] = Shopify.optionsMap[key] || [];\r\n          Shopify.optionsMap[key].push(variant.option3);\r\n          Shopify.optionsMap[key] = Shopify.uniq(Shopify.optionsMap[key]);\r\n        }\r\n      }\r\n    }\r\n    \/\/ Update options right away.\r\n    Shopify.updateOptionsInSelector(0);\r\n    if (product.options.length > 1) Shopify.updateOptionsInSelector(1);\r\n    if (product.options.length === 3) Shopify.updateOptionsInSelector(2);\r\n    \/\/ When there is an update in the first dropdown.\r\n    jQuery(\".single-option-selector:eq(0)\").change(function() {\r\n      Shopify.updateOptionsInSelector(1);\r\n      if (product.options.length === 3) Shopify.updateOptionsInSelector(2);\r\n      return true;\r\n    });\r\n    \/\/ When there is an update in the second dropdown.\r\n    jQuery(\".single-option-selector:eq(1)\").change(function() {\r\n      if (product.options.length === 3) Shopify.updateOptionsInSelector(2);\r\n      return true;\r\n    });  \r\n  };\r\n   \r\n  {% if product.available and product.options.size > 1 %}\r\n    var $addToCartForm = $('form[action=\"\/cart\/add\"]');\r\n    if (window.MutationObserver && $addToCartForm.length) {\r\n      if (typeof observer === 'object' && typeof observer.disconnect === 'function') {\r\n        observer.disconnect();\r\n      }\r\n      var config = { childList: true, subtree: true };\r\n      var observer = new MutationObserver(function() {      \r\n        Shopify.linkOptionSelectors({{ product | json }});\r\n        observer.disconnect();\r\n      });  \r\n      observer.observe($addToCartForm[0], config);\r\n    }\r\n  {% endif %}\r\n    \r\n  var selector = jQuery('.single-option-selector:eq(0)');\r\n  selector.trigger('change'); \r\n\r\n  {% if product.options.size == 1 %}\r\n    {% for variant in product.variants %}\r\n      {% unless variant.available %}\r\n        jQuery('.single-option-selector option').filter(function() { return jQuery(this).text().trim() === {{ variant.title | json }}; }).remove();\r\n      {% endunless %}\r\n    {% endfor %}\r\n    jQuery('.single-option-selector').trigger('change');\r\n  {% endif %}\r\n});\r\n<\/script>\r\n<\/pre>\n
          6. Go to the theme.liquid<\/strong> file.<\/p>\n
          7. Before the closing <\/body> tag, you need to paste the following code:<\/p>\n
           {%- if template contains 'product' -%}\r\n    {% render 'linked-product-options' %} \r\n  {%- endif -%}\r\n<\/pre>\n
          \"hide<\/p>\n
           <\/p>\n
          Here we go! Now only related options are displayed:<\/p>\n
           <\/p>\n
          \"link<\/p>\n
           <\/p>\n
          How to show variants as separate products<\/h2>\n
          Now let’s separate products according to color variants on the category page:<\/p>\n
           <\/p>\n
          \"how<\/p>\n
           <\/p>\n
            \n
          1. Open the collection-template.liquid<\/strong> file in the Section<\/strong> folder.<\/li>\n
          2. Find the following line of code: <ul class=”grid grid–uniform{% if collection.products_count > 0 %} grid–view-items{% endif %}”><\/li>\n
          3. And inside the ul tag delete the whole code and paste this one:<\/li>\n<\/ol>\n
            {% for product in collection.products %}\r\n        {% if product.variants.size > 1 %}\r\n        {% for option in product.options %}\r\n           {% if option == 'Color' %}\r\n           {% assign index = forloop.index0 %}\r\n           {% assign colorlist = '' %}\r\n           {% assign color = '' %}\r\n           {% for variant in product.variants %}\r\n           {% capture color %}\r\n           {{ variant.options[index] }}\r\n           {% endcapture %}\r\n             {% unless colorlist contains color %}\r\n             <li class=\"grid__item grid__item--{{section.id}} {{ grid_item_width }}\">\r\n                {% include 'product-card-grid-variants', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}\r\n              <\/li>\r\n                {% capture tempList %}\r\n              {{colorlist | append: color | append: \" \" }}\r\n              {% endcapture %}\r\n              {% assign colorlist = tempList %}\r\n              {% endunless %}\r\n              {% endfor %}\r\n            {% endif %}\r\n          {% endfor %}\r\n        {% else %}\r\n         <li class=\"grid__item grid__item--{{section.id}} {{ grid_item_width }}\">\r\n            {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}\r\n          <\/li>\r\n        {% endif %}\r\n        {% endfor %}\r\n<\/pre>\n
            \"separate<\/p>\n
             <\/p>\n
            4. Create a new product-card-grid-variants.liquid<\/strong> snippet in the Snippet<\/strong> folder.<\/p>\n
            5. Insert the following code there:<\/p>\n
            {% comment %}\r\n    Renders a product card using \"Grid\" style\r\n    Accepts:\r\n    - max_height: {Number} Maximum height of the product's image (required)\r\n    - product: {Object} Product Liquid object (required)\r\n    - show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)\r\n\r\n    Usage:\r\n    {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}\r\n{% endcomment %}\r\n<div class=\"grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card\">\r\n  <a class=\"grid-view-item__link grid-view-item__image-container full-width-link\" href=\"{{ product.url | within: collection }}\">\r\n    <span class=\"visually-hidden\">{{ product.title }}<\/span>\r\n  <\/a>\r\n\r\n  {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}\r\n  {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}\r\n  {%- assign preview_image = variant.image -%}\r\n  {%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}\r\n\r\n  {% unless preview_image == blank %}\r\n    {% include 'image-style', image: preview_image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}\r\n  {% endunless %}\r\n\r\n  <div class=\"product-card__image-with-placeholder-wrapper\" data-image-with-placeholder-wrapper>\r\n    <div id=\"{{ wrapper_id }}\" class=\"grid-view-item__image-wrapper product-card__image-wrapper js\">\r\n      <div style=\"padding-top:{% unless preview_image == blank %}{{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};\">\r\n        <img id=\"{{ img_id }}\"\r\n              class=\"grid-view-item__image lazyload\"\r\n              alt=\"{{ preview_image.alt }}\"\r\n              data-src=\"{{ img_url }}\"\r\n              data-widths=\"[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]\"\r\n              data-aspectratio=\"{{ preview_image.aspect_ratio }}\"\r\n              data-sizes=\"auto\"\r\n              data-image>\r\n      <\/div>\r\n    <\/div>\r\n    <div class=\"placeholder-background placeholder-background--animation\" data-image-placeholder><\/div>\r\n  <\/div>\r\n\r\n  <noscript>\r\n    {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}\r\n    <img class=\"grid-view-item__image\" src=\"{{ preview_image | img_url: image_size, scale: 2 }}\" alt=\"{{ preview_image.alt }}\" style=\"max-width: {{ max_height | times: preview_image.aspect_ratio }}px;\">\r\n  <\/noscript>\r\n\r\n  <div class=\"h4 grid-view-item__title product-card__title\" aria-hidden=\"true\">{{ product.title }} - {{ variant.option2 }}<\/div>\r\n\r\n  {% include 'product-price-listing', product: variant, show_vendor: show_vendor %}\r\n\r\n<\/div><\/pre>\n
            Well done! The category page now has its products separated by color.<\/p>\n
             <\/p>\n
            \"shopify<\/p>\n
             <\/p>\n
            <\/a>
            \"ecommerce
            Build a custom Shopify store with BelVG<\/h3>
            Can't configure variants yourself? We can help!<\/p>Contact us<\/span><\/a><\/div><\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"In your Shopify store, you can add, display and edit different product variants. This article …","protected":false},"author":72,"featured_media":26521,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[474,602],"tags":[],"class_list":["post-26520","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-ecommerce","category-shopify","post_format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t