Shopify themes, liquid, logos, and UX
Hello
I want to give dropdown option to change size variant in cart page.
My website url : www.jagstore.in
Step-by-Step Guide to Adding a Size Variant Dropdown in Shopify Cart:
<!-- 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>
Hello
I did as per your instructions. Size is not updated. Kindly check below screenshot for reference
Hello,
Can you provide me with store access so I can check and provide the exact solution?
Email id : rajesh.zestard@gmail.com
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.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025