Installation

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.

There are 2 steps to this process:

Part 1- the Automatic Installation - Independently when you first install the app. This is automatic and no action needs to be taken by the merchant.

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

We have built in checking tool to confirm that everything is installed correctly, to help with the manual installation.

Without completing these steps, your customers won't be able to use the checkout, so it is important that all of these steps are followed.

Preparation Steps

Before you begin the installation, 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, please contact us at support@agile.haus.

Installation Steps

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)

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.

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