Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
I need some help, I have this code below for gift wrapping option in cart on prestige theme.
I want to find a way to change the style of this? The box is too far to the left and not inline with the order notes box or products. I would also like to change the colour of the box?
<div class="drawer__gift-wrapping{% if cart.item_count == 0 %} hidden{% endif %}">
{% render 'gift-wrapping' %}
</div>
{% if linklists.gift-wrapping.links.size > 0 and linklists.gift-wrapping.links.first.type == 'product_link' %}
<div id="is-a-gift" style="clear: left; margin: 30px 0" class="clearfix rte">
<p>
<input id="gift-wrapping" type="checkbox" name="attributes[gift-wrapping]" value="yes" {% if cart.attributes.gift-wrapping %} checked="checked"{% endif %} style="float: none" />
<label for="gift-wrapping" style="display:inline; padding-left: 5px; float: none;">
Need your jewelry gift wrapped?
</label>
</p>
<p>
<label style="display:block" for="gift-note">Gift message (free and optional):</label>
<textarea name="attributes[gift-note]" id="gift-note">{{ cart.attributes.gift-note }}</textarea>
</p>
</div>
{% assign id = linklists.gift-wrapping.links.first.object.variants.first.id %}
{% assign gift_wraps_in_cart = 0 %}
{% for item in cart.items %}
{% if item.id == id %}
{% assign gift_wraps_in_cart = item.quantity %}
{% endif %}
{% endfor %}
<style>
#updates_{{ id }} { display: none; }
</style>
<script>
Shopify.Cart = Shopify.Cart || {};
Shopify.Cart.GiftWrap = {};
Shopify.Cart.GiftWrap.set = function() {
var headers = new Headers({ 'Content-Type': 'application/json' });
var request = {
method: 'POST',
headers: headers,
body: JSON.stringify({ updates: { {{ id }}: 1 }, attributes: { 'gift-wrapping': true } })
};
fetch('/cart/update.js', request)
.then(function() {
document.dispatchEvent(new CustomEvent('product:added', {
bubbles: true,
detail: {
variant: {{ id }},
quantity: 1
}
}));
});
}
Shopify.Cart.GiftWrap.remove = function() {
var headers = new Headers({ 'Content-Type': 'application/json' });
var request = {
method: 'POST',
headers: headers,
body: JSON.stringify({ updates: { {{ id }}: 0 }, attributes: { 'gift-wrapping': '' } })
};
fetch('/cart/update.js', request)
.then(function() {
document.dispatchEvent(new CustomEvent('product:added', {
bubbles: true,
detail: {
variant: {{ id }},
quantity: 0
}
}));
});
}
// If we have nothing but gift-wrap items in the cart.
{% if cart.items.size == 1 and gift_wraps_in_cart > 0 %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.remove();
});
// If we have more than one gift-wrap item in the cart.
{% elsif gift_wraps_in_cart > 1 %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.set();
});
// If we have a gift-wrap item in the cart but our gift-wrapping cart attribute has not been set.
{% elsif gift_wraps_in_cart > 0 and cart.attributes.gift-wrapping == blank %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.set();
});
// If we have no gift-wrap item in the cart but our gift-wrapping cart attribute has been set.
{% elsif gift_wraps_in_cart == 0 and cart.attributes.gift-wrapping != blank %}
document.addEventListener("DOMContentLoaded", function(){
Shopify.Cart.GiftWrap.set();
});
{% endif %}
// When the gift-wrapping checkbox is checked or unchecked.
$(document).ready(function() {
$(document).on('change', '[name="attributes[gift-wrapping]"]', function(event){
console.log('changes');
if (event.target.checked) {
Shopify.Cart.GiftWrap.set();
} else {
Shopify.Cart.GiftWrap.remove();
}
});
});
</script>
{% else %}
<p style="clear: left; margin: 30px 0" class="rte">
You attempted to add a gift-wrapping script to your shopping cart, but it won't work because you don't have
a link list with handle <code>gift-wrapping</code> which, in turn, contains a link
to your gift-wrapping product. Please review the steps outlined
<a href="https://shopify.dev/tutorials/customize-theme-add-gift-wrap-option" target="_blank" rel="noopener noreferrer nofollow">here</a>.
</p>
{% endif %}
Hi @SHome,
Please send me the gift card link, I will check it for you.
Hello 👋,
We have a couple of Gift app options here that will get everything working out of the box, if you need to add a gift wrapping option (upsell or not), plus many more gifting features.
The app to handle that is Giftship, seen here: https://apps.shopify.com/giftship
And if you are looking to sell digital gift cards with gifting and deliverability options, our other app Gift Card Pro helps automate that process: https://apps.shopify.com/gift-card-pro
Please let me know if you'd like to go over anything. I'd be happy to help and jump on a Zoom call at anytime.
- Tim
Gist Applications
I have inserted this on the shop notee.dk, where we use the Prestige theme. Sadly I can't figure out how to get the page to refresh if the gift wrapping is selected.
Do you know how I can ensure that the page refreshes so the cost is included in the price?
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