Product Builder app installation instructions

To complete Product Builder's integration within your storefront, there are a few manual installation steps that need to be completed - to ensure that the app is working correctly. 

The app completes Part 1- the Automatic Installation - independently when you first install the app.

Part 2 - the Manual Installation - is how the app fully integrates into your chosen theme and needs some help from you to complete.

Without completing these steps your customers won't be able to checkout, so it's vital that all of these steps are followed.

We have built in a checking tool to make certain that everything is installed correctly, and you're ready to start building your products.

Before you begin the installation process we strongly recommend that you make a duplicate of your cart template liquid file and call it "cart-template--pb-backup.liquid".

The file your theme uses to power the cart, should be identified in the 'installation' section of the app.

This step will make the uninstallation process really easy if you decide to uninstall the app in the future, whilst helping to reduce any unintentional impacts on your theme. 

If you have any issues with this process or need any clarification, please contact us at support@agile.haus.


1. Begin by navigating to your Theme's Code Edit Menu (Online Store → Actions → Edit Code) in the Shopify Admin 

2. Start by making a duplicate/backup of  ' sections/cart-template.liquid', 'sections/cart.liquid' or whichever file your theme uses to power the cart (it should be identified in the 'installation' section of the app) and create a 'cart-template--pb-backup.liquid' file.

3. Now that you have a backup, we can safely edit the original.

4. Carry out the find and replace instructions detailed in the app. You will need to search for specific text snippets (beware: there may be more than 1 instance of each snippet in the code!), and replace them with the ones needed for Product Builder to work correctly:


5. Now we will need to install the 3 code 'snippets'.

Insert this code snippet to the first line of that file:

{% include 'cart.pb' %}

Product Builder - Manual Installation - Step 3.

6. Search for form and look for a line that should contain action="/cart" (using Command/Control + F on the keyboard to bring up the search function will massively help in this) and insert  a fresh line immediately below it, with the below:  

{{ pb_inside_cart }}

Product Builder - Manual Installation - Step 4.

7. Find {% for item in cart.items %}and insert this code directly after that line:

{% include 'cart-item.pb', item: item %}


Product Builder - Manual Installation - Step 5

8. Save these changes.

9. Open the Product Builder app in your Shopify Admin and go to Installation → Click "Check" to make sure the separate products code has been installed correctly, to your current theme.

You should receive two green ticks.

If not, you will receive an error message in the lower box, to show you what step has been missed.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.