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:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

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

1

Add code to bottom of your javascript file

Open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

Add the following code to the very bottom of your Javascript file, this will vary depending on which version of Pipeline you're running: 

Which version of Pipeline am I using?

Pipeline 4 - If you're working with a draft theme, open this file:

assets/theme.js

Quick link if your theme is live/published Pipeline 4:  
assets/theme.js

Earlier versions of Pipeline, you'll be opening this file:

assets/shop.js.liquid

Quick link if the theme is live/published and an earlier version of Pipeline:
assets/shop.js.liquid

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

If Pipeline is published, use this link:

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

Pipeline 4: Open this file:

Pipeline 4 if your theme is live/published used this link:
https://shopify.com/admin/themes/current?key=snippets/product-form.liquid&line=18

Earlier versions of Pipeline: Use the same file you have open - 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 (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 snippets/product.liquid

Paste the following code at the very bottom snippets/product.liquid (Pipeline 4 and Earlier versions):

If Pipeline is published, use this link:
snippets/product.liquid

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

Pipeline 4 - If you're working with a draft theme, open this file:

You'll be opening this file:

assets/theme.scss.liquid

Quick link if the theme is live/published:
assets/theme.scss.liquid

Earlier versions of Pipeline - If your theme is older than Pipeline 4 open this file for draft themes:

You'll be opening this file for earlier versions of Pipeline:

assets/style.scss.liquid

Quick link if the theme is live/published and an earlier version of Pipeline:
assets/style.scss.liquid

Add the code to the very bottom of the file on a new line after all other code. Make a couple blank lines before pasting the code snippet. 

Save the file after adding your code.


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:

Add the following code to the very bottom of this file on a new line:
assets/style.scss.liquid

Pipeline 4 or higher, use this link instead:

assets/theme.scss.liquid

/* -- 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 - */

Save the file.

Example Result:

Still need help? Contact Us Contact Us