Get customers to choose an option

Caution

Vintage themes aren't available in the Theme Store. Vintage themes don't have the features included in Shopify's Online Store 2.0 themes, and Shopify free vintage themes don't receive updates except security fixes.

Note

If you use a free theme from Shopify, then you can contact Shopify Support for help with this tutorial. It requires 15 minutes of design time. Learn more about the Shopify Design Policy.

Note

This customization is for vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.

• Find out your theme's architecture version
• Explore Online Store 2.0 theme customizations

When a customer visits a product page in your online store, the first available variant is selected by default. You can use the Get customers to choose an option customization to deactivate the auto-selection of the first available variant. This way the customer is prompted to manually select a variant before one displays.

If you use the Get customers to choose an option customization, then your theme might not display a product price until your customer selects a variant. Products with variants don't have a featured price and the price that's displayed is determined by the variant that's selected.

Sectioned and non-sectioned themes

Note

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme lets you drag and drop to arrange the layout of your home page, and a non-sectioned theme doesn't.

To figure out whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.

If you are using a sectioned theme, click the Sectioned themes button and follow the instructions. If you are using an older, non-sectioned theme, click the Non-sectioned themes button and follow the instructions.

Steps for Sectioned themes

Select your theme

The steps for this customization vary depending on your theme. Click the button for your theme before following the instructions below:

Steps for Non-sectioned themes

Add prompts to your variant drop-down menus

1. In the Snippets directory, click Add a new snippet.
2. Name your new snippet pick-an-option.
3. In your new snippet file, paste this code hosted on GitHub.
4. Click Save.
5. In the Layout directory, click theme.liquid.
6. Find the closing </body> tag near the bottom of the file. On a new line right above the closing </body> tag, paste the following code:

{% render 'pick-an-option' %}

1. Click Save.
2. Find the file that contains the add to cart form. It will have an action attribute set to /cart/add. It should be in one of these four files:
   • the product.liquid template under Templates
   • the theme.liquid layout under Layout
   • the product.liquid snippet under Snippets
   • the single-product.liquid snippet under Snippets
3. Find this code inside the form:

  <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Or find this code inside the form:

  <option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Replace the code with the following code block:

<option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

If you use Minimal, Pop, or Supply, then find all occurrences of this code:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Replace the code with the following code block:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

If you use any other Shopify vintage theme, then find this code:

{% assign current_variant = product.selected_or_first_available_variant %}

Replace the code with the following code block:

{% assign current_variant = product.selected_variant %}

Click Save.

Change the Add to cart button language settings

You can change the language settings for the Add to cart button so that products don't display as Unavailable before a customer selects a product.

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click ... > Edit default theme content.
3. In the Filter items search bar, start typing unavailable to display the Unavailable translation.
4. Replace the text Unavailable with Make a selection.
5. Click Save.