Product Builder Install Instructions

We offer a few different options to help you complete this installation on your store:

  1. The ability to request a professional installation from our team
  2. A step-by-step guide on completing this manually

Before you start we highly recommend creating a Duplicate version of your Shopify theme to ensure you have a copy without our code installation.

 Caution

As of February 19th, 2021, Product Builder is unavailable for new installations. If you are currently using Product Builder, you will be able to continue using the app as your account will now be grandfathered.

 


 

Request a Product Builder Install

This option creates a ticket request with our installation team, which is then scheduled to be completed by our experts. By selecting this option, you will be asked to confirm which theme you would like this code installation completed on.

All of these requests are completed manually on a rotational basis. You will receive an email notification upon completion.

  1. From the Shopify admin, select Apps.
  2. Select Product Builder.
  3. Select Liquid Installation.

    Select Liquid Installation

  4. Select Yes Please. Install the Liquid for me.

    Select Yes Please, Install the Liquid for Me

  5. Enter the name of the theme that you would like this code to be installed on.

    Enter your theme name

  6. Enter an additional note for our installs team. (optional)

    Enter additional notes

  7. Select Looks Good! Send Away.

    Select Looks Good! Send Away

 


 

Manual Install

Step 1: Add Snippet Files

  1. Duplicate your theme to create a backup copy. (optional)
  2. From the Shopify admin, select Online Store.

    Select_Online_Store.png

  3. Select Actions.

    Actions

  4. Select Edit code.

    Edit code

  5. Under Snippets, find these three files.
    • bold-cart.liquid
    • bold-cart-item.liquid
    • bold-variant.liquid

    find these files

  6. For any that don't exist:
    1. Select Add a new snippet.

      add a new snippet

    2. Enter the correct snippet name.

      enter a snippet name

    3. Select Create snippet.

      select create snippet

    4. Copy and paste the code found in each of these links into their respective files:

      copy and paste the code

    5. Select Save.
    6. Repeat steps 5a – d for each missing snippet file.
  7. Under Assets, select bold.css. If it doesn't exist, please follow steps 7a - g below.

    select bold.css

    1. Select Add a new asset.

      select add a new asset

    2. Select Create a blank file.

      select create a blank file

    3. Enter the correct asset name.

      enter asset name

    4. Select .css.

      select css

    5. Select Add asset.

      select add asset

    6. Copy and paste the code found here: bold.css

      copy and paste code

    7. Select Save.

 


 

Step 2: Edit theme.liquid

  1. From the Shopify admin, select Online Store.

    Select_Online_Store.png

  2. Select Actions.

    Actions

  3. Select Edit code.

    Edit code

  4. Under Layout, select theme.liquid.

    select theme.liquid

  5. Copy and paste this code directly above the </head> tag:

    {{ 'bold.css' | asset_url | stylesheet_tag }}

    copy and paste this code

  6. Select Save.

 


 

Step 3: Edit cart.liquid

  1. From the Shopify admin, select Online Store.

    Select_Online_Store.png

  2. Select Actions.

    Actions

  3. Select Edit code.

    Edit code

  4. Under Templates, select cart.liquid.

    Note: If your theme uses sections, you may have to select cart-template.liquid under Sections instead.

    Select cart.liquid

  5. On the first line, add the following code:

    {% include 'bold-cart' %}

    add on first line

  6. Find the following code:

    {% for item in cart.items %}

    and add this code directly after:

    {% include 'bold-cart-item' with item %}

    add this code

  7. On the last line of this file, add the following code:

    {{ bold_edit_in_cart }}

    add this code

  8. Find the following code and look for the first <tr>, <ul>, <div> or <li> after it.

    {% for item in cart.items %}

    find line

  9. Within the class attribute in the container tag, add:

    {{ bold_row_class }}

    Note: If there is no class, add it.

    add this class

  10. Add the following code anywhere else inside the container tag outside any other attribute:

    {{ bold_row_data }}

    add this attribute

  11. If there is any code that looks like the following, remove it or comment it out.

    {% if property_size > 0 %}
    <div class="cart__meta-text">
    {% for p in item.properties %}
    {%- if p.first.first == '_' -%}{%- continue -%}{%- endif -%}
    {% unless p.last == blank %}
    {{ p.first }}: {% comment %} Check if there was an uploaded file associated {% endcomment %} {% if p.last contains '/uploads/' %} <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a> {% else %} { p.last }} {% endif %} {% endunless %} {% endfor %} </div> {% endif %}

    Note: To comment it out, enter <!-- before the code and --> after it.

    comment out this code

  12. Find the line containing:

    item.product.title

    Add the following code directly after it:

    {{ bold_item_properties }}

    Note: This can be added anywhere you would like the list of selected options to appear. Immediately above or below the code you commented out in step 12 is recommended.

    properties code

  13. Find the line beginning with either:

    <input type="number"

    or:

    <input type="text"

    Can't find this code?

    find the line

    1. Add the following code to the class of the quantity box:

      {{ bold_qty_class }}

      Note: If there is no class, add it.

      add variable

    2. Add the following code anywhere else inside the input tag:

      {{ bold_qty_attr }}

      add variable

  14. Find the remove code. This will vary by theme, but it should contain the word remove and look similar to this:

    <a href="/cart/change?line={{ forloop.index }}&quantity=0"

    find the code

    1. Replace the code within the quotations in the href attribute with:

      {{ bold_remove_href }}

       replace the code

    2. Add the following code to the class of the remove button:

      {{ bold_remove_class }}

      Note: If there is no class, add it.

      add variable

    3. Add the following code anywhere else inside the tag:

      {{ bold_remove_attr }}

      Note: If there is an onclick within the remove line, this needs to be deleted.

      add variable

  15. Replace any instances of

    item.price

    with:

    bold_item_price

    replace instances

  16. Replace any instances of:
    item.line_price

    with:

    bold_item_line_price

    Note: Depending on how your theme was created, it may only have either item.price or item.line_price. Do not worry if your theme doesn't have both.

    replace instances

  17. Select Save.

 


 

Step 4: Edit customers/order.liquid

  1. From the Shopify admin, select Online Store.

    Select_Online_Store.png

  2. Select Actions.

    Actions

  3. Select Edit code.

    Edit code

  4. Under Templates, select customer/order.liquid.

    select customer/order.liquid

  5. Add this code:

    {% include 'bold-cart-item' with line_item, bold_order:order %}

    under the following line:

    {% for line_item in order.line_items %}

    add this code

  6. Find:

    {% for line_item in order.line_items %}

    and look for the first <tr>, <ul>, <div> or <li> after it.

    look for container tag

  7. Within the class attribute in the container tag, add:

    {{ bold_row_class }}

    Note: If there is no class, add it.

    add this class

  8. Add:

    {{ bold_item_properties }}

    immediately after the line containing:

    line_item.title

    Note: This can be added anywhere you would like the list of selected options to appear.

    add this attribute

  9. Replace any instances of:

    line_item.price

    with:

    bold_item_price

    replace code instances

  10. Replace any instances of:

    line_item.line_price

    with:

    bold_item_line_price

    Note: Depending on how the theme was created, it may only have either item.price or item.line_price. Do not worry if your theme doesn't have both.

    replace instances

  11. Select Save.

 


 

Step 5: Edit Email Notifications

  1. From the Shopify admin, select Settings.

    select settings

  2. Select Notifications.

    select notificatons

  3. Select Order confirmation.

    select order confirmation

  4. Copy the Order confirmation code and overwrite the existing code.

    copy and paste code

  5. Select Save.

    select save

  6. Select Notifications.

    select notificatons

  7. Select Shipping confirmation.

    select shipping confirmation

  8. Copy the Shipping confirmation code and overwrite the existing code.

    copy and paste the code

  9. Select Save.
  10. Select Notifications.

    select notifications

  11. Select Shipping update.

    select shipping update

  12. Copy the Shipping update code and overwrite the existing code.

    copy and paste the code

  13. Select Save.
  14. Select Notifications.

    select notificatons

  15. Select New order.

    select new order

  16. Copy the New order code and overwrite the existing code.

    copy and paste the code

  17. Select Save.

 


 

Code Removal

If you would like to remove the liquid code from your theme, the liquid code can be removed by deleting the snippet files, asset files, and the code includes mentioned in the instruction steps above.

You can otherwise request a code removal by contacting our Merchant Success team.

And you can remove the app from your by following this guide: Uninstall an App from Your Store

 

Note: If you are experiencing issues with performance on the storefront with Product Builder after completing the steps above, we recommend requesting an expert installation, as your theme may require further liquid code changes. See previous step Request a Product Builder Install for more information.

Was this article helpful?
0 out of 7 found this helpful