Setting up a Gift Box

Metafields Editor app

Setting up a Gift-Box requires adding a metafield to the Gift-Box Product. Install the Metafields Editor app in your shop. This free app allows editing metafields on products. The application is already installed to your shop.

Create the Gift-Box Product

The Gift-Box product is set up like a normal product, but has its template set to product.build_a_box and its type set to Build-a-Box. This setting is made in the bottom right of the product edit page, under Template

The handle of this Gift-Box Product must match the corresponding Gift-Box Custom Collection (see below), and if it is changed the collection handle must be changed to match (normally the handles of products/collections are created automatically from their name).

The Product type must be set to Build-a-Box

Create the corresponding Gift-Box Collection

Each Gift-Box product needs a Custom Collection, which contains the pool of products the customer can select from to put together their giftbox.

This Custom Collection is connected to its Gift-Box product by having the same handle, with prefix bbox-. The easiest way to do that is to give it the same name as the product, with the prefix "BBOX: ". Handle is a internal id used by Shopify to track products. To edit a handle for a product, click on the link Modify title tag and url while editing a product.

So, if you created a Gift-Box Product named My Awesome Giftbox, create a Custom Collection named BBOX: My Awesome Giftbox. The product handle will be my-awesome-giftbox and the collection handle will be bbox-my-awesome-giftbox.

Add product choices to the Gift-Box

You do this by adding products to the Gift-Box Custom Collection created in the previous step. These are the products the customer can choose fromto create their Gift-Box

Use the Metafields Editor to set the number of products the Gift-Box can contain

• go to the Gift-Box Product in shopify admin.
• there should be a link Edit Metafields, at the top. When you click that the Metafields Editor should open with the Gift-Box Product selected
• click Add New Metafield
• set the namespace field to build_a_box
• set the key field to num_items
• set the Value type to integer
• set the Value field to the number of products a customer is allowed to choose for the Gift-Box.
• click Save

Troubleshooting

• Gift-Box editor won't let user add products / Gift-Box editor lets user add too many products:
  • check that the namespace, key and value type of the Gift-Box Product metafield are correct, and that the value is set to the correct quantity
• Gift-Box editor shows no products
  • Check that the Gift Box Custom Collection has products added to it
  • Check that the Gift Box Custom Collection has the correct name/handle
• Gift-Box editor does not display when Gift-Box product is clicked
  • check that the Gift Box Product has its template set to product.build_a_box
  • check that the template, javascript, and css files are intact.

Files used in Gift-Box

(files in bold are new, other files are existing files that were modified)

• assets/build-a-box.css.liquid
• assets/trash.gif
• assets/webify.build-a-box.min.js
• layout/theme.liquid: should include build-a-box.css
• snippets/build-a-box-products.liquid
• snippets/build-a-box-product-info.liquid
• snippets/build-a-box-choices.liquid
• snippets/product-form.liquid: adds data-product-id="{{ product.id }}" to the add-to-cart button
• snippets/product-thumbnail.liquid: uses {% unless product.type == "Build-a-Box" %} to turn off quick shop button for Gift-Boxes
• templates/cart.liquid: uses custom properties to display Gift-Box contents
• templates/product.build_a_box.liquid