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

Disclaimer: This is an intermediate to advanced tutorial which requires you to modify the theme code and add Liquid code. If you're unfamiliar with these type of modifications, we strongly advise that you hire a small task agency or Shopify Expert to make the modification. Invisible themes does not provide any warranty or further support for this code. Use this code at your own risk. The code provided below is only a suggestion. You are responsible for any and all code customizations made to your theme and for making backups. Be sure to have a good working backup available in the event any errors are made or your theme stops functioning. 

Result:

Or with swatches turned off:

Side note:

Newer versions of Broadcast (as of 1.6) have an option to display variant options in boxes. This provides the shopper with a more visual representation of what options are available. This is not related to the following tutorial but an option to consider instead:

For that functionality, please update to the latest version of Broadcast

Tutorial How to:

1

Make a duplicate of your theme

Important: Don't skip this step.

From your list of themes, use the Actions link and choose Duplicate:

We strongly recommend that you make the tutorial code changes with your draft version of the theme (copied version) and not the live theme that's running your store. 

2

Edit product.liquid from the snippets folder

After you've made a duplicate of your theme, use the Edit code option from the duplicated version:

In the Code Editor, from the Snippets folder, open product.liquid:

Scroll to the very bottom of the file (Command and the down arrow on Mac) and add the following code:

Click to view code

Example after:

Paste that entire code block to the bottom of product.liquid. 

Save the file:

3

Edit theme.js from the assets folder

From the assets folder, open theme.js

Scroll to the very bottom of the file (use Command-downarrow on Mac) and add the following code:

Click to view code

Example after:

Paste the entire code block to the bottom of theme.js.

Save the file:

4

Edit the Add to Cart button text

The next step requires us to change the text for the Add to Cart (ATC) button in the Language Editor. Once you've done the above code changes, the ATC button will ready "unavailable" for all products. To change that, open the Language Editor:

In the filter bar, type-in:

unavailable

Scroll down to the Products / Product section:

Change the text Unavailable to:

Make a selection

Example after:

Finally save the Language Editor change (Top Right)

Save:

Notes

You are ready to test your theme. Open a product page and verify that the code changes are working correctly. Once you are happy with the change, you can then publish the draft theme to make it live.

Swatches: To turn off swatches and have all the select boxes displayed as dropdown selections like:

Use the Theme Editor to change the Theme settings -> Product grid and uncheck the swatches option:

Uncheck swatches option:

Newer versions of Broadcast will need both unchecked:

Part 2: QuickView

In order to have this functionality in QuickView, there is additional code that needs to be added. You will also need to turn OFF endless scroll as that conflicts with this modification (endless scroll is the continuous scroll effect on collection pages). Turning off will enable pagination for your collection pages. 

Be sure the first part is working correctly. 

Next, in Theme settings, Layout:

Uncheck:

Save the Theme Editor settings. 

1

Edit theme.js againfrom the assets folder

From the assets folder, open theme.js

Use the Find (Command-F on Mac or Control-F in Windows) and find the following string:

var onClose

Find this line:

Add a couple blank lines ABOVE that line of code and then paste the following code snippet in that area right above that line:

Click to view code

Example after:

Save the file:

2

Edit product-quick-view.liquid from the snippets folder

From the snippets folder, open product-quick-view.liquid:

Scroll to the very bottom and add the following code snippet to the bottom of the file:

Click to view code

Paste code from that link at the very bottom of the file:

Example after adding code:

Save the file:

Result in QuickView:

Or if you have swatches turned off, both variant options: