How to give dropdown option to change size variant in cart page (Dawn Theme)

Topic summary

A Shopify store owner wants to add a dropdown menu in the cart page that allows customers to change product size variants directly, rather than removing and re-adding items.

Proposed Solutions:

  • One contributor provided detailed code snippets to add to the main-cart-items.liquid file, including JavaScript for handling variant changes via AJAX requests
  • Another user cautioned that this requires significant customization, as the typical approach involves removing the old item and adding a new variant to the cart rather than updating in place

Current Status:

  • The store owner attempted the code implementation but reported it didn’t work as expected (size not updating)
  • The original code contributor requested store access credentials to troubleshoot and provide a working solution
  • The discussion remains unresolved and ongoing, pending further technical assistance
Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.

@Jayesh-Agarwal ,

Step-by-Step Guide to Adding a Size Variant Dropdown in Shopify Cart:

1. Access Your Shopify Theme Code:- Login to Shopify Admin:

Navigate to your Shopify admin panel.

  • Go to Themes:
    In the Shopify admin, click on Online Store and then Themes.
  • Edit Theme Code:
    Under your current theme, click Actions > Edit Code.

  1. Locate and Edit the Cart Section:- Find the Cart Template:
    In the Sections folder, locate the main-cart-items.liquid file. This file typically handles the items displayed in the cart.
  • Add the Size Variant Form:
    Scroll to the bottom of the file and paste the following code just before the closing {% endfor %} or where appropriate based on your theme structure:

      {% assign has_size_option = false %}
      {% for option in item.product.options_with_values %}
        {% if option.name == 'Size' %}
          {% assign has_size_option = true %}
        {% endif %}
      {% endfor %}

      
      {% if has_size_option %}
        
      {% endif %}

Add this code to the same file before starting the schema.


1 Like