Tutorial: How to add a Make a Selection feature to your variant drop-downs

Result:

Shopify has a support document for adding variant drop-down menus to your product page. This is helpful as it forces the buyer to select a variant before adding to cart. 

Shopify's article:

https://help.shopify.com/themes/customization/products/how-to-add-a-pick-an-option-to-drop-downs

Note: Shopify has recently changed this document. Please follow the steps below instead of using the Shopify article. This tutorial works with Pipeline 2.2 and higher. 

Here's how to use the above article with Pipeline:

1

Add code to bottom of your shop.js.liquid file

In your Code Editor, edit assets/shop.js. If Pipeline is published, use this link:

https://myshopify.com/admin/themes/current/?key=assets/shop.js.liquid&line=9999

At the very bottom of this file, add a couple blank lines and then paste this code at the end (Important: do not mix with any other code):

/* -- code for Make a Selection option -- */
$(document).ready(function() {
  if( typeof(productOptions ) != "undefined" ){
    for(i=0;i<productOptions.length;i++) {
      $('.single-option-selector-product:eq('+ i +')')
      .filter(function() {
        return $(this).find('option').length > 1
      })
      .prepend('<option value="">Pick a ' + productOptions[i][i] + '</option>')
      .val('')
      .trigger('change');
    }
  }
});
/* - end - */

Save your file.

2

Edit your product page template

In the Code Editor, edit snippets/product.liquid. If Pipeline is published, use this link:

https://myshopify.com/admin/themes/current/?key=snippets/product.liquid&line=25

Find this line:

{% assign current_variant=product.selected_or_first_available_variant %}

Use the Find feature on the right code area (Command-F on Mac or Control-F in Windows). Find this string:

assign current_variant

that should be on line number 25 or 26.

Replace the entire line with this:

{% assign current_variant = product.selected_variant %}

Save the file.

3

Part 2 find and replace in your product page

Use the Find feature (Command-F on Mac or Control-F in Windows) and search for:

option value

Example (the Find feature will highlight the result in yellow):

Replace the entire line (line 110 in 2.2, line 142 in 2.4, 156 in 3.x):

Old code:

<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}{% unless variant_avialable %} - {{ 'products.product.sold_out' | t }}{% endunless %}</option>

With this New code:

<option value="{{ value | escape }}">{{ value }}{% unless variant_avialable %} - {{ 'products.product.sold_out' | t }}{% endunless %}</option>

Save the file.

4

Add code to the bottom 

Paste the following code at the very bottom of snippets/product.liquid. If Pipeline is published, use this link:

https://myshopify.com/admin/themes/current/?key=snippets/product.liquid&line=9999

 <script>
 var productOptions = [];
  {% for option in product.options %}
   var optionObj = {};
   optionObj[ {{ forloop.index0 }} ] = "{{ product.options[forloop.index0] }}";
   productOptions.push(optionObj);
  {% endfor %}
 </script>

Save the file.

5

Change the Add to cart button language settings

You can change the language settings for the Add to cart button so that products do not appear as "Unavailable" before a selection is made.

  • From your Shopify admin, click Online Store, and then click Themes.
  • Click Actions, and then click Edit language.

  1. In the Filter translations box, start typing

    unavailable

     to show the "Unavailable" translation:

    type unavailable
  2. Scroll down to the "Products / Product" section, change the text  Unavailable

    Make a selection

    Unavailable translation
  3. Click Save.

Now you'll have: 

After both variants in this example are selected, then the add to cart becomes activated and the quantity options are added:


Additional style note:

If you find the disabled button too dark you can try this:

On a new line, add the following code to the very bottom of assets/style.scss.liquid. If Pipeline is published, use this link:

https://myshopify.com/admin/themes/current?key=assets/style.scss.liquid&line=9999

.btn.disabled {background-color: #f1f1f1;}

Result:

Still need help? Contact Us Contact Us