Add to cart button ignores selected variant

Store Design
, , , ,

Topic summary

A developer is building a custom Liquid snippet to display complementary products with add-to-cart functionality on product pages. They’re using Dawn theme’s buy buttons (via {% render 'buy-buttons' %}) to enable popup cart functionality without page redirects.

The Problem:
The add-to-cart button consistently adds only the first product variant, regardless of which variant is selected in the dropdown menu.

Technical Details:

  • The form includes a <select> dropdown for variant selection (when multiple variants exist)
  • Each option contains the correct variant.id value
  • The buy-buttons snippet is rendered within the form

Current Status:
The issue remains unresolved. The developer is seeking suggestions on how to properly pass the selected variant ID to the rendered buy-buttons component.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’m developing a custom Liquid snippet for product pages to display two complementary products and provide a mechanism to add them to the cart.

I’ve successfully implemented this using the classic product form, but to avoid a page redirect, I’m utilizing the render function to incorporate the buy buttons from the Dawn theme, enabling the use of the popup cart.

However, I’m encountering an issue: the current implementation only adds the first variant of the product to the cart. I’m unable to resolve this and would greatly appreciate any suggestions.

Here is the code for the product form:

          <form method="post" action="/cart/add" accept-charset="UTF-8" class="form" enctype="multipart/form-data" novalidate="novalidate" data-type="add-to-cart-form">
            <!-- Variant selection -->
            {% if product.variants.size > 1 %}
            <select name="id" class="variant-select">
              {% for variant in product.variants %}
              <option value="{{ variant.id }}">
                {{ variant.title }}
              </option>
              {% endfor %}
            </select>
            {% endif %}
            <!-- Add to cart button -->
            {% render: 'buy-buttons' %}
          </form>