How to add a gift-wrap option to Shopify cart page

You can offer a gift wrapping service to your customers on the cart page of your online store. For customers who want their order wrapped, you can charge either a flat rate, or charge on a per product basis.

Step 1: Create a gift-wrap product

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

1. From your Shopify admin, go to Products.

2. Click Add product.

3. Create a gift-wrap product 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.

4. Click Save product.

Step 2: Create a menu

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

1. From your Shopify admin, go to Online Store > Navigation.

2. Click Add menu.

3. Name your menu Gift wrapping, so that the handle that’s assigned to the menu is gift-wrapping:

4. Add the gift-wrap product to the menu:

  • In the Menu items section, give your new link any Name you like.
  • For Link, select Product.
  • Select your gift-wrap product from the drop-down menu:

5. Click Save menu.

Step 3: Create a code snippet

To create a code snippet for the gift-wrap option:

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

3. In the Snippets directory, click Add a new snippet.

4. Name your snippet gift-wrapping and click Create snippet. Your snippet file will open in the code editor.

5. In this step, you will paste some code into your new gift-wrapping snippet file. The code you paste depends on how you want to charge your customers for the gift wrapping service:

To add a flat rate charge per order

To add a flat rate charge for gift wrapping, paste this code hosted on GitHub.

To add a charge that is multiplied by the number of products in the order

With this option, if there are three products in the order, then the gift wrap charge will be multiplied by three. To add a charge that is multiplied by the number of products in the order, paste this code hosted on GitHub.

6. Click Save.

Step 4: Include the snippet in your cart template

To include the gift-wrapping snippet in your cart template:

1. In the Sections directory, click cart-template.liquid. If your theme doesn’t have a cart-template.liquid, then click cart.liquid in the Templates directory.

2. Find the closing </form> tag in the code. On a new line above the closing </form> tag, paste the following code:

2. Click Save.

DEMO

Note: You need to load jQuery library before the scripts.

Source: Shopify

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *