Shopify themes, liquid, logos, and UX
Hello,
As part of a new service I want to offer my customers, I want to add a drop down menu to my cart page so people can select a greetings card with their order. The dropdown menu will need to include a list of all the cards available and the price of each card. This price should then be added to the order total.
I am using the Taste Theme and this is the website address: www.batchedcookies.co.uk.
Can this be done? Any advice would be greatly appreciated.
Many thanks,
Liam
@liambeauchamp hope you are well
Modify cart.liquid or cart-template.liquid
<div class="cart-greeting-card">
<label for="greeting-card">Add a Greeting Card:</label>
<select id="greeting-card" name="greeting_card">
<option value="">Select a card</option>
{% for product in all_products %}
{% if product.tags contains 'greeting-card' %}
<option value="{{ product.id }}" data-price="{{ product.price }}">{{ product.title }} - {{ product.price | money }}</option>
{% endif %}
{% endfor %}
</select>
<button id="add-greeting-card" type="button">Add to Cart</button>
</div>
<script>
document.getElementById('add-greeting-card').addEventListener('click', function() {
var select = document.getElementById('greeting-card');
var productId = select.value;
if (productId) {
fetch('/cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify({
items: [{
id: productId,
quantity: 1
}]
})
}).then(response => {
return response.json();
}).then(data => {
location.reload(); // Refresh the cart page to show the updated cart
}).catch((error) => {
console.error('Error:', error);
});
} else {
alert('Please select a greeting card.');
}
});
</script>
Thank you so much for your detailed response, but unfortunately it didn't work. I added the code in the cart-drawer.liquid file as that was the closest to the two that you mentioned above, but I had no luck. If this is the wrong section to be adding it to, please do let me know.
Many thanks,
Liam
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