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

Edit your product page template

Pipeline 4 users - You can skip this step and proceed to Step 3. This is only for earlier versions of Pipeline:

In the Code Editor, edit snippets/product.liquid

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

Find and replace in your product page

The file you open in this step will depend on your version of Pipeline. 

For Pipeline 4 and higher, open this file:

For Pipeline 3 or earlier, use the same file you have open from Step 2 - snippets/product.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>

Save the file.

4

Add code to the bottom snippets/product.liquid

Paste the following code at the very bottom snippets/product.liquid (All versions of Pipeline):

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

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:

Still need help? Contact Us Contact Us