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

[Jayesh-Agarwal]

Hello

I want to give dropdown option to change size variant in cart page.

My website url : www.jagstore.in

[ZestardTech]

@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.

2. 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:

 <!-- Check if the product has a "Size" option -->
      {% assign has_size_option = false %}
      {% for option in item.product.options_with_values %}
        {% if option.name == 'Size' %}
          {% assign has_size_option = true %}
        {% endif %}
      {% endfor %}

      <!-- Display the size dropdown if the product has a "Size" option -->
      {% if has_size_option %}
        <form method="post" action="/cart/change.js" class="size-dropdown-form" data-cart-item-id="{{ item.key }}" id="size-form-{{ item.index }}">
          <input type="hidden" name="id" value="{{ item.key }}" />
          <label for="size-variant-{{ item.key }}">Size:</label>
          <select name="properties[Size]" id="size-variant-{{ item.key }}" onchange="updateSize(this)">
            {% for option in item.product.options_with_values %}
              {% if option.name == 'Size' %}
                {% for value in option.values %}
                  <option value="{{ value }}" {% if item.properties['Size'] == value %}selected{% endif %}>
                    {{ value }}
                  </option>
                {% endfor %}
              {% endif %}
            {% endfor %}
          </select>
        </form>
      {% endif %}

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

<script>
  function updateSize(selectElement) {
    const form = selectElement.closest('form');
    const formData = new FormData(form);

    // Send AJAX request to Shopify to update the cart
    fetch('/cart/change.js', {
      method: 'POST',
      body: formData,
    })
    .then(response => response.json())
    .then(data => {
      // You can optionally update the UI or reload the cart to reflect the changes
      console.log(data); // Optionally log the updated cart details
      location.reload(); // Reload to apply the changes
    })
    .catch(error => {
      console.error('Error updating the cart:', error);
    });
  }
</script>

[Jayesh-Agarwal]

Hello

I did as per your instructions. Size is not updated. Kindly check below screenshot for reference

[ZestardTech]

Hello,

Can you provide me with store access so I can check and provide the exact solution?

Email id : rajesh.zestard@gmail.com

[DitalTek]

Hi @Jayesh-Agarwal 

You can do that, but instead change variant you need remove the item need change and add new item into cart.

To achieve your expected you need customize so much code logic on cart page also user experience.