From Shopify Wiki

As a shop-owner, you would like to offer your customers the option of having their order gift-wrapped on the cart page.

Gift-wrap doesn't come without some sort of gift note, so you want to show your shoppers a text box to type in their personalized gift message as well.

To begin with, let's create a gift-wrap product. That's right, we will create a product for this. That product can be free, or not, depending on if you want to charge extra money to gift-wrap orders. Your choice. The price of that product will be your gift-wrap charge.

Creating your gift-wrap product

The price of our gift-wrap product will be the gift-wrap charge. If you don't want to charge anything for that service, go ahead and set the price of your gift-wrap product to 0.00. Let the title, handle, description, product type and vendor of your gift-wrap product be whatever you like. Use some product images to show what gift-wrapped items will look like. Use the product description to explain what materials will be used to gift-wrap the items. Be descriptive.

Creating a link list to point to your gift-wrap product

Detour for web designers

Pretty much any type of content in Shopify can be accessed in your Liquid templates using that content's handle. For example, you can access a page by its handle like so:

pages.about-us

We will need some way to grab our gift-wrap product in a Liquid snippet we're about to create. Unfortunately, Shopify does not not allow us to 'grab' a product by its handle. This won't work if the handle of our product is gift-wrap:

products.gift-wrap

There's no such thing as a products object in Shopify.

The preferred way to grab a product is to create a link to it. You could also add the product to a special collection and point to your product in the following manner:

collections.special-collection-handle.products.first

But why use yet another collection for this? Use a link list.

Cutting to the chase

Go to your Navigation page in your shop admin.

Add a link list. Call it Gift-wrap. Don't call your link list any other name.

Note: A link list ≠ link. Do add a link list, not a link.

To your Gift-wrap link list, add a link. Select Product in the Links to drop-down, and select your gift-wrap product.

Important

The name of your link can be anything. The title of your product can be anything.

For the whole shebang to work, though, make sure that your link list handle is gift-wrap. Nothing else matters. To edit the link list handle (if you need to), click on Edit link list.

The way our Liquid snippet will get a hold of our gift-wrap product will be like so:

linklists.gift-wrap.links.first.object

If you're a Shopify hacker, you may be interested in reading more about link.object.

Preparing your cart.liquid template

We will be adding a gift note box to our cart page, as well as a gift-wrap checkbox.

Before we do, let's make sure that our cart.liquid template is kosher. Our implementation depends on it.

Go to Theme → Template Editor.

On the Template Editor page, look under Templates for your cart.liquid template. (The .liquid extension is omitted in that view.)

Click on 'cart' to open cart.liquid in the online code editor.

In the cart form, look for the HTML of the quantity text field. Make sure that the name attribute of that input element is set to updates[{{ item.id }}]. There are some nasty themes in the wild that use updates[].

name="updates[{{ item.id }}]"

Adding a gift note box and a gift-wrap checkbox

In your cart.liquid template, add the following HTML between the opening and closing tags of your cart form:

<div id="gift">
  <label for="note">Gift message (free and optional):</label><br />
  <textarea name="attributes[note]" id="note" rows="4" cols="80">{{ cart.attributes.note }}</textarea>
  <p style="margin-top:0.5em">
    <input type="hidden" name="attributes[wrapping]" value="" />
    <input id="wrapping" type="checkbox" name="attributes[wrapping]" value="yes" {% if cart.attributes.wrapping %} checked="checked"{% endif %} />
    <label for="wrapping" style="display:inline; padding-left: 5px;">
      For {{ linklists.gift-wrap.links.first.object.price | money }} 
      please wrap the products in this order.
    </label>
  </p>
</div>

With this result on your cart page:

Note: the price shown will be the price of your gift-wrap product.

Very mucho importante

You must add the code between the <form...> and </form> tags for things to work.

Creating a gift-wrap snippet

Go to Theme → Template Editor.

On the Template Editor page, look under Snippets and create a new snippet called gift-wrap.

In it, copy the code found in gift-wrap.liquid here:

https://github.com/carolineschnapp/carolineschnapp-gift-wrap

Save.

Including your snippet in cart.liquid

On the Template Editor page, open the template cart.liquid in the online code editor and add the following code at the very top of the file:

{% include 'gift-wrap' %}

Then save.

Test-driving the functionality

Add some products to your cart and check the gift-wrap checkbox on the cart page. The gift-wrap product will be added to the cart and should appear as the last Line item in the cart.

Remove the gift-wrap by un-checking the gift-wrap checkbox. The gift-wrap product should be removed and your cart total updated.

Go to the gift-wrap product page and add it to your cart. If the cart is empty, you will be redirected to an empty cart page. If you add the gift-wrap product to a cart that already contains products, you should end up on the cart page with the gift-wrap checkbox checked.

Demo store

Visit the Gift wrap demo store to see our gift-wrap implementation in action: http://powlowski-schuppe-and-fahey7237.myshopify.com/

Need to charge x dollars per item in the order?

If you want to charge a certain amount of money per item in the order, instead of a fixed amount for the entire order, then use the code in the following gist for your gift-wrap snippet: https://gist.github.com/7d84c7a7f52409c37ae8

Other steps remain unchanged.