Boox Reusable Packaging: Setup Guide

The Boox Reusable Packaging app adds Boox product listing to your store and enables functionality that clearly notes which orders have requested Boox for fulfillment.

This guide will walk you through the steps necessary to finish the setup process and we are always happy to help with any part of this process or answer any questions, so please contact us at: support@boox.eco

Making the Boox Reusable Packaging product available in your online store

After installing the app, we need to make the product available to your online store's sales channel so it can be added to the cart when a customer opts-in to getting their order fulfilled in a reusable package.

  • From your store's admin page, click on Products in the navigation list on the left side of the page
  • All of your products are listed here, so lets use the Filter products search bar located at the top of this list to search for "Boox"
  • Click on the search bar and type in "Boox" and it will automatically start searching. You should see a product called "Boox Reusable Packaging" near or at the top of the product list:
boox reusable packaging product listing
  • Click on the "Boox Reusable Packaging" product to open the product details page
  • On the right side of this page you should see a white box with the title Product status. In the middle of the Product status section is an area with the title "Sales channels and apps" and right next to that is a blue link that says "Manage" -- click Manage:
product page with sales channels and apps circled
  • A small window will pop up. Check the Online Store checkbox then click Done:
sales channels and apps pop-up window
  • At the top of the product page you should now see a bar that says "Unsaved changes" with two buttons on the right side. Click the Save button

Adding the opt-in checkbox to your store's cart page(s)

After making the Boox Reusable Packaging product available in your store, we can now add the opt-in checkbox to your store's cart page.

The following steps are more technical in nature and require you to make edits to the code for your store's theme. If you would like help, or have questions or concerns, please contact us at: support@boox.eco

  • From your store's admin page, click on Online Store in the navigation list on the left side of the page
  • NOTE: We recommend duplicating your current store's theme and making edits to the copy, since any edits to your current theme will go live immediately
  • In the Current theme section of the Themes page, you should see your theme and an Actions button. Click Actions, then in the dropdown list, select Duplicate:
current theme action menu dropdown with "Duplicate" circled
  •  A copy of your theme will be added to the Theme library section on this same Themes page. Scroll down and locate your duplicated theme. It will likely have the name "Copy of [Your Theme Name]". Our theme is called "Narrative", so our duplicated theme appeared as "Copy of Narrative"
  • If you wish to rename your duplicated theme, you can use the Action menu button in the section with the name of your duplicate theme and select Rename. We have renamed our duplicated theme "Narrative with Boox" so it's easier to know which theme has our code changes
  • Click on the Action menu button and select Edit code from the dropdown list:
theme library action menu open with edit code circled
  •  Depending on the type of checkout option(s) your theme uses, you may need to paste the Boox opt-in snippet in more than one file. Keep in mind your theme may contain multiple checkout options and therefore multiple cart types. Here are the most common types and files:
    1. The Main Cart uses "cart.liquid" or "cart-template.liquid" files
    2. Header Carts use "header.liquid"
    3. Modal Carts use "cart-modal.liquid" or "ajax-cart-template.liquid"
    4. Drawer Carts use "cart-drawer.liquid" or "ajax-cart-template.liquid"
  • All of these files are organized into folders, similar to how your computer has folders with files inside of them. The two folders where the most common files that contain code for the various cart types are called Templates and Sections:
templates and sections folder list with arrows pointing to them
  • It is possible that some of the files for your store's cart may also be located in the Snippets folder, but for now we are going to focus on looking for our files in the Sections folder. Click on the Sections folder
  • A list of files will appear below the folder. Our theme "Narrative" contains two types of carts: the standard cart (a cart page) and a drawer cart. The standard cart code is located in "cart-template.liquid":
sections folder open with cart-template.liquid file circled
  • Click on the file name to open it. You should see that the section to the right now shows the open file with all of the code it contains.This section with all of the code written in it is called the "code editor" and we'll be referring to this section as the "code editor" going forward
  • Remember, you may have a different set of files for the cart types your theme uses. We will walk through a couple of examples, but are always happy to help if you get stuck or have questions
  • The "code editor" works like a word processor, so you can copy, paste, search and type in it just like you normally would in a document
  • Click on the "code editor" section -- you should see that as you click on this section, lines of code are highlighted
  • Next, we need to search through the code to find the appropriate place to paste a code snippet.The fastest way to do that is to search using Ctrl + F, if you are working on a Windows computer, or Command + F if you are working on a Mac
  • Use Ctrl + F or Command + F on your keyboard and a search box should appear in the top-right section of the "code editor":
code editor with search bar open and subtotal text
  • Type in the word "subtotal" and you should automatically be taken to the section of code where this word appears, as in the example above
  • Highlight and copy the following snippet (Ctrl + C on Windows and Command + C on Mac), as the next step will be pasting this into the "code editor":
<div class="boox-checkout-ui"></div>
  • All of the elements that contain the word "subtotal" should be highlighted. We want to paste the snippet we copied in the previous step above the elements that have "subtotal" in them:
code with an arrow pointing to a line of code
  • Now that we've made this change, we need to be sure and click Save in the toolbar above the search box we used earlier:
code editor save button with arrow pointing to save
  • Great! Now we can preview our changes and make sure that everything looks right and is working as expected
  • Along the top-right side of the Theme code page are some buttons. Click on the Preview button:
theme editor buttons with arrow pointing to preview button
  • A new window should open for us to preview your store
  • Add one of your products to the cart, then go to the cart page -- typically, a View cart button appears after adding a product to the cart
  • Once on the cart page, you should see the opt-in checkbox and text located above the "Subtotal":
cart page with opt in checkbox circled
  • Now is a good time to make sure that the checkbox works, so let's click the "Ship my order in a reusable package" checkbox
  • You should observe that the Boox Reusable Packaging product is added to your cart
  • Un-checking the checkbox should remove the Boox Reusable Packaging product from your cart
  • If the checkbox works the way we've described, let's continue. Otherwise, please contact us so we can help you troubleshoot at: support@boox.eco
  • Our particular theme also contains a Drawer Cart, so we will need to add our snippet to that file as well
  • If your theme only has one cart type and you've already made and tested that change and are happy with the results, skip ahead to the next section. Otherwise, Head back to the Theme code page
  • The Drawer Cart file our theme uses is called "cart-drawer.liquid" and is located in the Snippets folder. If your theme also has a Drawer Cart, click on the Snippets folder in the left navigation section of the Theme Code page and find "cart-drawer.liquid"
  • Note: Your theme's drawer cart may use a different file name and it may be located in a folder other than Snippets. Refer to the list of other possible file names above
snippets folder open with arrow pointing to cart-drawer.liquid file name
  • We are going to perform the same steps as above, so refer to those bullets if you need more details
  • Once you've clicked on the appropriate file, search the page for "subtotal"
  • When you have located the section of code that has "subtotal" in it, copy the snippet and paste it above that section
<div class="boox-checkout-ui"></div>
code block with arrow pointing to a single line of code
  • Be sure to click the Save button in the section abotve the search bar
  • Click Preview above and make sure that the snippet appears in the drawer cart the way you expect it to:
drawer cart with opt-in checkbox circled
  • Radical! You did an amazing job. Let's move on to the next section where we put through a test order

Placing a test order

 You accomplished a lot in the previous sections. We're giving you a wi-five and encourage you to reward yourself with a little break and maybe a light snack or a cup of coffee or tea.

The final step is to test that everything works together, from the checkbox on the cart page to the Additional Details and Notes that are added to an order when a customer opts-in to receiving their order in a reusable package.

  • There are three ways to place a test order:
    1. using Shopify's Bogus gateway
    2. using a real payment provider, and then immediately cancelling or refunding the order
    3. using Shopify Payments
      • You can read about these options in more detail and learn how to place a test order here. Once you're done there, head back to these instructions
      • In the previous steps we previewed the changes you made to your duplicated theme. We're going to use this same "preview" window to create an order
      • If you have items in your cart from the previous steps, go ahead and remove them now
      • Next, add a product from your catalog to your cart, then go to the cart page
      • Check the opt-in checkbox and observe that the Boox Reusable Packaging product has been added to your cart
      • Proceed to checkout and complete all the steps to generate an order in your store
      • Head back to your store's Admin page. Your window may still open on the Theme code page, but in either case, in the left navigation list, click on Orders
      • Locate the order you just put through in the list and click on it to open the details
      • On the Order details page, you should see the items that you ordered on the left and on the right you should see a white box with Notes, with "Fulfill order in a Boox" and Additional Details with "Ship in a Boox.":
      order details page with notes and additional details sections circled
      You rock. So far, you made the Boox Reusable Packaging product available in your online store, made edits to your theme's code like a wiz and put through a test order to make sure everything works.
      The last step is to publish your duplicate theme with all your changes when you're ready to go live and make the opt-in checkbox available to your customers:

      • Head back to your admin panel
      • In the left navigation menu, click on Online Store
      • Scroll down to the Theme library section and locate your duplicate theme
      • Click on the Actions button and select Publish:
      theme library section with action dropdown opened and Publish circled

      We thank you, the planet thanks you and soon, your customers will to.