Cart: Add a Gift Wrap option

This tutorial is based on Shopify's article on adding a gift wrap option to your cart:

https://help.shopify.com/en/themes/customization/cart/add-gift-wrap-option

These are the Pipeline specific instructions to help you add the customization. Please note, our support staff cannot support this type of customization. Please follow the instructions carefully and also refer to the Shopify article if you have any questions. 

Example:

How to:

1

Create a gift-wrap product

First, you will create your gift-wrap option as a product:

1. From your Shopify just as you would create any other product:

• You can use your product description to explain what materials will be used to gift-wrap the items.
• Give your gift-wrap product the price that you want to charge for the service. If you want gift wrapping to be free, then set the price of your gift-wrap product to be $0.
• You can upload an image for the product to show your customers what a gift-wrapped order will look like.

Here are some sample images you can use for the product image - Click the links to view image and download:

https://github.com/whistlerbrad/shopify-images/blob/master/gift-07.jpg

https://github.com/whistlerbrad/shopify-images/blob/master/gift-08.jpg

https://github.com/whistlerbrad/shopify-images/blob/master/gift-13.jpg

Save the product after creating.

2

Create a menu (required)

Important: This step is required or the code will not work. Please do not skip this step. 

Next, you will create a menu that points to your gift-wrap product:

From the Shopify Admin -> Navigation:

Choose Add menu to create a new menu:

Call the menu:

Gift wrapping

Make sure on the handle area, the correct handle is assigned:

gift-wrapping

Next, create a new menu item - Click on Add menu item:

in the Link area, type-in gift:

That will find the product you created in the first step. Use the Add button to complete:

Save the menu. 

3

Create a code snippet

The next step requires you to create a new code snippet in the Code Editor. Open your code editor:

Before beginning - Create a duplicate of your theme. This is important as we will be adding to your cart.liquid file which is critical to your theme. If there's an error, your cart will not function correctly. A duplicate/backup is necessary when performing code modifications like this. 

After making a duplicate, rename the backup theme to easily identify it as a backup before this customization. If you're working on a draft theme, you can use the Actions menu for that theme in your list. 

Choose Edit Code from your Theme Editor:

In the Snippets directory, click Add a new snippet:

Call the new snippet:

gift-wrapping

Complete by using the Create snippet button. 

Next, in the code area on the right, paste all the code from this file:

Click to view code

Open that link -> Copy all the code -> Paste into your new Snippet file. 

Save the gift-wrapping snippet. 

4

Include the snippet in your cart template

The next step is to include the gift-wrapping snippet in your cart.liquid file. This will add the gift wrapping option into your cart page for the customer.

In the  Templates directory, open cart.liquid:

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) and search for:

/form

That will help you find this line:

Next, we will add some new code above the closing </form> line. To help with that, add a few blank lines above the closing </form> line:

Then, paste the following code into the new area (above the </form> line):

Click to view code

Example:

Optional: You can clean-up the alignment of the new code and remove extra blank lines:

Save the file. 

Finished

Your store will now be ready to use the new feature. To test, add any product to the cart and look for the new option at the bottom of the page:

Once the checkbox is selected, the gift product will be added to the cart:

Observations

I've noticed the code from Shopify does time-out. If you're testing and take too long on the cart page, the cart will empty the products and return you to a blank cart screen. Also, you won't be able to test this in the Theme Editor. Be sure to only test from a preview page of the theme. The theme editor doesn't support the gift wrap script.

Again, please make a duplicate of your theme before you start. We cannot be responsible for your customizations nor can we support this Shopify customization.