Installing Product Bundle Snippets 🚀

Note: This article applies to Vintage themes only. If you are using an Online Store 2.0 theme, please refer to this article:

Giftship App Block and Onboarding Guide

If you are on the Giftship Standard plan, or higher, and would like to use the product bundle feature and box builder features, some code installation in your theme is required.

Please note: This is an advanced tutorial, and should be completed by a qualified web developer familiar with HTML and Liquid. If you are not working with a developer, and would like us to handle this for you, we can do so for a flat fee of $100 USD. Payment can be made by navigating to the following url: https://shop.gist-apps.com

In order to install the snippets to enable Giftship’s bundle pricing on the cart page, and checkout, please follow the below instructions:

Step 1: Snippet Upload

Verify Giftship’s snippets are uploaded into your theme by navigating to Shopify Admin -> Online Store -> “Your Theme” -> Actions -> Edit Code. In the left hand bar, you should see 3 files under the snippets section.

If the 3 files are not there, navigate to Giftship’s dashboard, by going to Admin -> Apps -> Giftship and run the “Performance Utility”:

Step 2: Snippet Installation

Next, verify that each snippet has been included in the correct location in your theme. If you have a Handlebars.js cart, please refer to How To Implement Product Bundle Snippets With Handlebars.js Cart for more information

Snippet 1:

First, you’ll need to locate the line of code that looks like the below excerpt:

{% for item in cart.items %}

This is usually found in your templates/cart.liquid file, or your sections/cart-template.liquid file.

Right after this line of code, ensure that the following snippet is there:

{%- include 'giftship-cart-item' with item -%}

If it is not there, paste it directly beneath, so that your code looks like this:

Please note: If you are using a template which is loaded inside of a “render” liquid tag, you can not use an “include” tag here. In this case, you will need to copy the contents of the snippets/giftship-cart-item.liquid file, and paste it in the same location mentioned above.

Once the snippet (or snippet contents) are in place, you will need to change your price display inputs with the variables set in the snippet.

First, find the variable that displays the single item price, and replace it with {{ giftship_price }}. Then, find the variable that displays the line price, and replace it with {{ giftship_line_price }}.

The item price variable might look like any of the below:

// Before
{{ item.price }}
{{ item.final_price }}
{{ item.price | money }}
{{ item.final_price | money }}

// After 
{{ giftship_price }}
{{ giftship_price }}
{{ giftship_price | money }}
{{ giftship_price | money }}

The line price variable might look like any of the below:

// Before
{{ item.line_price }}
{{ item.final_line_price }}
{{ item.line_price | money }}
{{ item.final_line_price | money }}

// After
{{ giftship_line_price }}
{{ giftship_line_price }}
{{ giftship_line_price | money }}
{{ giftship_line_price | money }}

Once your variables are swapped out, click save.

You may also want to total the cart price based on the bundle contents as well. This can be done as follows:

{% assign giftship_subtotal = 0 %}

{% for item in cart.items %}

{% include 'giftship-cart-item' with item %}

{% assign giftship_subtotal = giftship_line_price | plus: giftship_subtotal %}

{% endfor %}

Once that is in place, you will need to replace your subtotal price variable with the following:

{{ giftship_subtotal }}

Snippet 2:

The second snippet is normally found on the same page, however, it is for the “line item properties”, which contain the product information about your bundle.

Find the link of code that looks like the below excerpt:

{% for p in item.properties %}

Directly above this line, paste the following snippet of code. If your cart item variable name is not item, you will need to adjust the last “item” name as appropriate.

{%- render 'giftship-cart-item-properties', item: item -%}

Once complete, your code should look like this:

Click save.

Snippet 3:

The third snippet is found in your layout/theme.liquid file, right above the closing “</head>” html tag.

First, find the closing “head” tag in your HTML, and verify that the below snippet is located directly above it. It may say include, or render, however, both do the same thing.