If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Shopify. How to make the product options required

This tutorial will show how to make the product options required before the product can be added to Shopify cart.

Shopify. How to make the product options required

If you do not want to let customers add the product to cart until the option value is selected (for example size specification), please perform the following steps.

We strongly recommend backing up the theme before making the changes so you could rollback the changes by clicking on Online Store > Themes > Download theme file:

Shopify_How_to_make_the_product_options_required_1

  1. Log into your admin panel and navigate to Online Store > Themes > Edit HTML/CSS > Snippets > Add a new snippet:

    Shopify_How_to_make_the_product_options_required_2

  2. Name the snippet snippet-add-to-cart and press Create a snippet:

    Shopify_How_to_make_the_product_options_required_3

    If you already have this snippet, miss this step and steps 3, 6.

  3. Paste this code to the snippet area and Save:

    <form method="post" action="/cart/add">
        {% if product.available %}
            {% if product.variants.size == 1 %}    
                {% for variant in product.variants limit:1 %}
                    <input type="hidden" name="id" value="{{ variant.id }}" />
                    <button class="btn btn-cart" type="submit">Add to cart</button>
                {% endfor %}
            {% else %}
                <a class="btn" href="{{ product.url }}" title="Choose options">Choose options</a>
            {% endif %}
        {% else %}
            <button class="btn btn-cart btn-disabled" disabled="disabled">Unavailable</button>
        {% endif %}
    </form>

    Shopify_How_to_make_the_product_options_required_3

  4. Add one more snippet by pressing Create a snippet, name it as pick-an-option, paste this code hosted on GitHub. and Save.

  5. Open theme.liquid and paste this code before the closing </body> tag:

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

    Shopify_How_to_make_the_product_options_required_4

  6. Select Snippets > widget-sidebar-products.liquid and add this code before </div> </li>:

    <div class="product_links">
            {% include "snippet-add-to-cart" %}         
    	<a class="btn quick_view_btn" href="{{ product.url }}"> <span class="fa fa-eye"></span></a>
    </div>

    Shopify_How_to_make_the_product_options_required_5

  7. Make sure to save the changes in all the files and refresh the site to see the changes.

    Now your customers will need to select the product option before adding it to cart:

    Shopify_How_to_make_the_product_options_required_6

Feel free to check the detailed video tutorial below:

Shopify. How to make the product options required