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 add an attribute selector on product listing

This tutorial will show you how to add an attribute selector on product listing in Shopify.

Shopify. How to add an attribute selector on product listing

  1. Log into your Admin panel and navigate to Online Store -> Themes.

  2. Select Edit HTML/CSS option:

    shopify_how_to_add_an_attribute_selector_on_product_listing-1

  3. Open product-listing-item.liquid or product-grid-item.liquid under Snippets tab.

  4. Look for the following code:

    {% include "snippet-add-to-cart" %} 

    Replace it with the code:

    <input type="submit" value="Buy now" />
      <form action="/cart/add" method="post" style="text-align:center;">
      <select name="id">
      {% for variant in product.variants %}
      {% if variant.available %}
      <option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
      {% else %}
      <option disabled="disabled">{{ variant.title }} - Sold Out</option>
      {% endif %}
      {% endfor %}
      </select>
      <button type="submit" class="btn btn-cart">Add to cart</button>
      </form>

    shopify_how_to_add_an_attribute_selector_on_product_listing-2

  5. Save this file and check your site.

Feel free to check the detailed video tutorial below:

Shopify. How to add an attribute selector on product listing