All things Shopify and commerce
I want to show all the options for the products on my collection page and add them to the cart. I have already displayed the product options, but I'm unable to figure out how to add them to the cart. I am stuck here. Can someone tell me how I can do this? I have attached a screenshot below.
Screenshot : https://prnt.sc/5gU4HL3uiuE9
#liquid code
{% for option in product.options_with_values %}
<div class="product-option">
<label for="option-{{ option.name | handleize }}">{{ option.name }}</label>
<select id="option-{{ option.name | handleize }}" name="options[{{ option.name }}]">
{% for value in option.values %}
{% if value.available %}
<option
value="{{ value }}"
{% if value == option.selected_value %}
selected
{% endif %}
>
{{ value }}
</option>
{% else %}
<option
disabled
value="{{ value }}"
{% if value == option.selected_value %}
selected
{% endif %}
>
{{ value }} (Out of Stock)
</option>
{% endif %}
{% endfor %}
</select>
</div>
{% endfor %}
<!-- Add to Cart Button -->
<div class="add-to-cart-btn">
<button id="add-to-cart-button" type="button">Add to Cart</button>
</div>
We have two ways.
1st with a product form, described here:
https://shopify.dev/docs/storefronts/themes/architecture/templates/product#the-product-form
2nd with JavaScript, Fetch API described here:
https://shopify.dev/docs/api/ajax/reference/cart
I want the variants that are displayed on the product page to also appear on the collection page under each product, as shown in the screenshots. The functionality should be the same, such as matching the correct variant, etc. I have displayed them, but how can I make them match?
screenshot : https://prnt.sc/R6czjTIVnVO3 , https://prnt.sc/MJ4YBlu9D2i3
It's showing 'product_id.js not found
Yes, product_id is numeric .
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn 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, 2025