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

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

Jayesh-Agarwal
Shopify Partner
39 0 7

Hello

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

My website url : www.jagstore.in

 

Screenshot_20250110-103550.jpg

Replies 4 (4)

ZestardTech
Shopify Partner
6059 1083 1451

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

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Jayesh-Agarwal
Shopify Partner
39 0 7

Hello

I did as per your instructions. Size is not updated. Kindly check below screenshotScreenshot_20250110-164705.jpg for reference

ZestardTech
Shopify Partner
6059 1083 1451

Hello,

 

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

 

Email id : rajesh.zestard@gmail.com

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

DitalTek
Shopify Partner
845 100 120

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.

- You can please Like and Accepted Solution if my suggestion helpful.
- And you want to hire developer Theme or App Shopify => Feel free to send me a DM or contact to us via Email | WhatApp