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.
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
From your Shopify admin, click Products (or press
Click Add product.
Create a gift-wrapping product just as you would any other 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.
- Click Save product.
Creating a menu
Now you need to create a menu to point to your gift-wrap product.
From your Shopify admin, click Online Store, and then click Navigation (or press
Click Add menu.
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:
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.
Click Save menu.
Creating a new code snippet
Now you must create a new code snippet for the new gift-wrap feature.
From your Shopify admin, click Online Store, and then click Themes (or press
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.
4. Open a new browser tab.
5. You now have 2 options, depending on how you want to charge for gift wrapping:
- to add a flat charge per order, follow this link and copy the code.
- to add a charge that is multiplied by the amount of items in the order, follow this link and copy the code.
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.
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:
If you're not sure where to add the code, paste it just before this closing tag:
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:
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