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:

Verify your shop is using the Page cart type:

Page Cart Only: This customization will not work for the modal pop-up cart type. This only works with the page cart type. If you use a cart drawer or pop-up, then you will need to change your cart style to Page in the theme editor. Add a product to the cart in the theme preview, and then click the Cart page tab in the theme editor to view your cart settings.
How to change cart type

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:
Create a gift-wrap 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 image to open larger version and then use right-click to save to your computer):

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:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

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:

Add a few blank lines **above** the closing </form> line:

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

{% include 'gift-wrapping' %}

Example:

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.

Still need help? Contact Us Contact Us