Welcome to Eight Docs

How to Install Bundle Builder on a Theme

Before creating multiple SKU bundles, you need to make some changes to your Shopify theme. This article shows you how to open and edit your Shopify theme. It takes about 10 minutes to complete this task. After that, you can start building multiple SKU bundles. 

 

Getting ready

Make sure you install Bundle Builder on your store. If you are unsure how to install the app, read this article.  It gives you step-by-step instructions.

 

Make a copy of your current theme. Just in case. If something does go wrong, you can quickly restore your original settings.

a-1.png

  1. Log in to Shopify.
  2. On the side menu, click Online store. 
  3. Click Themes.
  4. Go to the Current theme box.
  5. Click the Actions button.
  6. Click Duplicate on the drop-down menu.

a-2.png

  • Shopify places a copy of that theme in your Theme library.

 

Installing the app

With a copy of your theme saved, it’s time to install the app on your Shopify theme.

 

  1. Click Apps on the side menu.
  2. On the Apps page, click Bundle Builder.

a-3.png

  1. On the next page, click the Settings menu tab and then Installation.

a-4.png

  1. On the next page, locate the Theme box. Our example shows the Taste theme. Your theme could be different.
  2. Click Check.

a-5.png

  • If you are new to Bundle Builder, let the app finish checking your theme and go to step 6.

 

If you are a regular user, the app might find Bundle Builder on your theme. That means you can stop here. The installation process is complete, and you are ready to create multiple SKU bundles. Click here to learn how. 

 

  1. Click the Install app button.

a-6.png

  • When the app stops, the Bundle Builder installation is complete. That means you can create single SKU bundles for your store right now. Click here to learn how. <<add link>>
  • If you want to create multiple SKU bundles, go to the next step. 

 

  1. Scroll down past the blue box to the peach box.

a-7.png

  • Read the text in the blue box if you need more information about multiple SKU bundles. Do not click any buttons in the blue box. Scroll down to the peach box.



Copying and pasting

The next step is to copy and paste code into your Shopify theme. To complete this step, you’ll be moving back and forth between two browser tabs.

 

All the copy and paste instructions you need to complete this step are in the peach box. In most cases, you will replace existing code with new code. In some cases, you will insert code rather than replace it. We highlight those cases below.

 

Before you start

There are many theme options for Shopify stores. The code you need to replace or add is a little different for each theme. The example below shows code examples for one theme. 

 

Even though the themes are slightly different, the way you change code is the same.

 

  • Find the required action, click the link to open the theme page, copy the code, search the code, and then replace or insert it.



Step 1

Start with the first line. 

This text reminds you to make a copy of the theme. Hopefully, you did that already.

a-8.png

Step 2 

  1. Look for the required action. In this example, we have to replace code on a theme page.
  2. Click the link to open the theme page. A new browser tab opens automatically.
  3. Come back to the first browser tab with the peach box and click the current code to make a copy. 
  4. Go to the new browser tab and paste that code into the search tool. (see below)
  5. Come back to the peach box and copy the new code. (see below)

a-9.png


Search tool

Go to the browser with the theme page and open the in-page search tool. 

 

  1. Click Control+F (Command+F on a Mac). The search tool displays.
  2. Paste the current code into the search tool. 

a-10.png

  • The search tool highlights every instance of this code. (We blurred that code because it is slightly different for each Shopify theme.)

b-1.png


Copying and pasting

 

  1. Go back to the first browser tab with the peach box.
  2. Click to copy the new code.
  3. Go back to the new browser tab with the theme page.
  4. Paste the new code over each line of the old code. 
  1. Repeat steps for each piece of code in #2 of the peach box.
  2. Click Save.

 

Please note - there will be instances where you will replace the existing code with new code, and instances where you will insert new or remove existing code - please double check, to ensure you are replacing/adding/removing as required. 

 

Checking your work

  1. When the copying and pasting work is over, click the Recheck installation status button.

b-7.png

  • After checking your work, the app removes the correct changes from the peach box. The app shows the remaining changes you need to make if any.

b-8.png

  1. Complete all changes.
  2. Click the Recheck installation status button again.

b-9.png

  • When complete, the app removes the peach box and shows a green box with a checkmark. Now you are ready to create multiple SKU bundles.

 

Create a test bundle

Now you’re ready to create your first bundle. We suggest you create one bundle to test your theme and see how the products display in your store. Learn how to create a bundle here.



Starting again

Let’s say you make a few mistakes, broke the code in the theme, and your store is a mess. That's easy to fix. Restore a copy of the original theme and start over. 

 

  1. Click Home on the side menu.
  2. Scroll down and click Online store.
  3. Click Themes.
  4. Scroll down to the Theme library.
  5. Locate the original copy of the current theme.
  6. Click the Actions button.
  7. Click Publish.
  1. Click Publish again in the confirmation pop-up window.

b-10.png

  • Shopify installs the original theme on your store. Now you are ready to install multiple SKU bundles on the theme.





Was this article helpful?