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. 

Start by making a duplicate of your theme - Important:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Important - Don't skip this step. A backup is necessary for this customization. 

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

1

Add code to bottom of your Javascript file

Begin by verifying which version of Pipeline you're running and which file to edit for the Javascript code. Use this article to find out which version and file to open:

Where to add Javascript code in your theme

Code to add:

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

Edits to product-form file

From the Snippets folder, open product-form.liquid:

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:

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>

Next,

Add the following code to the bottom of product-form.liquid:

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

Example:

Save the file.

3

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.

In the  Filter translations box, type-in unavailable:

unavailable

Scroll down to the Products / Product section:

Change the text Unavailable to:

Make a selection

Example:

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:

Optional: Additional style note:

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

Example:

Code:

/* -- code to change disabled button background color -- */
.btn.disabled {background-color: #f1f1f1;}
/* - end - */

Use any valid hex color code - Change #f1f1f1 to any hex color:

http://www.colorhexa.com/web-safe-colors

Where to add the code:

Where to add CSS in your theme

Optional: Remove the price when an item is sold out

You can add this style code to hide the price from the button when a product is sold out:

/* -- code to hide price in add to cart button when sold out -- */
.btn.disabled .unicode, .btn.disabled .buttonPrice{ display:none;}
/* - end - */

/* -- code to make sold out button black with white text -- */
.btn.disabled {background-color: #111111; color: #ffffff; font-weight: bold;}
/* - end - */

Where to add CSS in your theme

Example Result:

Pipeline: Related Articles