Add a gift-wrap option and message box to your cart page

Follow this example to offer optional gift wrapping on the cart page automatically.

Caution

A gift-wrapping option cannot be added to the Lookbook theme. If you use any of the themes Brooklyn, Classic, Launchpad, Pop, Simple, Solo, or Supply, you will be able to proceed with this tutorial, but first you will need to disable the Ajax cart in your theme because the gift-wrap functionality will only work on your Cart page at the URL /cart. So head over to your Customize theme page, and in the Cart page section set the Cart type to Page.

Creating a gift-wrap product

  1. From your Shopify admin, click Products (or press G P P):

    Products

  2. Click Add product.

  3. Create a gift-wrapping product just as you would any other product:

Gift wrap product

  • You can use your product description to explain what materials will be used to gift-wrap the items.
  • Give your gift-wrapping product a price according to what you want to charge for the service. If you don't want to charge anything, set the price of your gift-wrapping product to zero.
  • Upload an image for the product. Your customers will appreciate seeing what their gift-wrapped purchase will look like.
  1. Click Save product.

Now you need to create a menu to point to your gift-wrap product.

  1. From your Shopify admin, click Online Store, and then click Navigation (or press G W N).

  2. Click Add menu.

  3. For the purposes of this example, you should name your link list Gift wrapping so that the handle that's generated is gift-wrapping. If you really want to use another name, go ahead, but be sure to edit the handle manually so it reads gift-wrapping:

Gift wrap linklist

  1. In the Menu items section, give your new link any name you like. Use the drop-down menus to point the menu at your gift-wrap product.

  2. Click Save menu.

Creating a new code snippet

Now you must create a new code snippet for the new gift-wrap feature.

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

2. On the Edit HTML/CSS page, click the Snippets folder, then click Add a new snippet.

3. Call your snippet gift-wrapping and click Create snippet. Your snippet will automatically open in the online code editor.

Gift wrap 3

4. Open a new browser tab.

5. You now have 2 options, depending on how you want to charge for gift wrapping:

Caution

We don't have a tutorial for providing a gift-wrap option for each item in the cart, so that some items get gift-wrapped and not others.

6. When you've copied the code, return to your Theme Editor page.

7. In the online code editor, paste the code.

8. Click Save to save your new code snippet.

Including the new snippet in your cart template

Now you must edit your cart.liquid template to include your new code snippet.

1. Under the Templates folder, locate and click on cart.liquid to open it in the online code editor.

2. In the cart.liquid file, you need to include the gift-wrapping snippet exactly where you want the gift-wrapping checkbox and gift note text box to appear.

Caution

Your snippet must be included inside your cart form, that is, anywhere between the opening <form> and closing </form> tags. Otherwise, the optional gift note will not be captured with the order.

Use the following code to include the snippet:

{% include 'gift-wrapping' %}

If you're not sure where to add the code, paste it just before this closing tag:

</form>

3. Click Save.

Testing the customization

To see your gift wrapping option at work in your shopping cart, click Live preview at the top of your Theme Editor page. Add a product to your store and take a look at the cart to see the gift wrap option and message box. If you're not happy with the placement, try including the snippet at a different location in cart.liquid.

You should also try removing the gift-wrapping by un-checking the box. The gift-wrapping product should be removed and your cart total updated.

View the gift wrap option on an order

If a customer adds the gift wrapping option to their order, it will show on the order's history page under Additional details:

Gift wrap order

Troubleshooting

If the gift wrapping isn't working, you're probably also seeing this javascript error:

Can't find variable jQuery

In this case, it's likely that your theme places the script call for jQuery in the footer area of theme.liquid. Move your script call for jQuery to the head section to fix the problem.

Visiting the demo store

Visit the Gift wrapping demo store to see our gift-wrapping implementation in action: http://maggio-reinger-and-leuschke5939.myshopify.com/cart

Want to discuss this page?

Visit the Shopify Community