Top

Product Builder Install Instructions

Warning!

This article requires technical knowledge and prior experience with liquid code. If you are not comfortable with this, Email our Support Wizards for help.

Before you begin, review Notes Before Installing Apps. This article will help get you prepared and answers many common questions.

Select each step below to view the instructions.

  1. From "Shopify Admin", select Apps.

    Select Apps 

  2. Select Visit Shopify App Store.

    select visit shopify app store 

  3. Enter Product Builder in the "Search Bar".

    enter Product Builder in the search bar 

  4. Select Product Builder.

    select Product Builder 

  5. Select Get.

    Select Get 

  6. Select Install app.

    Select Install app 

  7. Select Approve Charge.

    Select Approve Charge 

Note: If any of these files or code already exists, you can skip the step.

  1. Duplicate themes, to create a backup copy.
  2. From "Shopify Admin", select Online Store.

    select online store 

  3. Select Actions.

    Select Actions 

  4. Select Edit code.

    Select Edit code 

  5. Under "Snippets", find these two 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.

      select save 

    6. Repeat steps 5a – d for each missing snippet file.
  7. Under "Assets", select bold.css. If it doesn't exist:

    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 from the dropdownbox.

      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.

      select save 

Note: If any of this code already exists, you can skip the step.

  1. From "Shopify Admin", select Online Store.

    select online store 

  2. Select Actions.

    Select Actions 

  3. Select Edit code.

    Select 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.

     select save

  1. From "Shopify Admin", select Online Store.

    select online store 

  2. Select Actions.

    Select Actions 

  3. Select Edit code.

    Select 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:

    {% include 'bold-cart' %}

    add on first line

  6. Find:

    {% 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 add:

    {{ bold_edit_in_cart }}

    add this code

  8. Find:

    {% for item in cart.items %}

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

    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:

    {{ bold_row_data }}

    anywhere else inside the container tag outside any other attribute.

    add this attribute

  11. Wrap the image tag with this code:

    {% if bold_builder_img_src != blank %}
    <img src="{{ bold_builder_img_src }}" alt="{{ bold_builder_img_alt }}" />
    {% else %} 
    
    <!-- Original Image Code --> 
    
    {% endif %}

    It should look like this:

    image tag 

  12. If there is any code that looks like this, remove it or comment it out.

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

    comment out code

  13. Find the line containing:

    item.product.title

    Add:

    {{ bold_item_properties }}

    after it.

    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 a great spot.

    properties code

  14. Find the line beginning with either:

    <input type="number"

    or:

    <input type="text"

    Can't find this code?

    find the line 

    1. Add:

      {{ bold_qty_class }}

      to the class of the quantity box.

      Note: If there is no class, add it.

      add variable 

    2. Add:

      {{ bold_qty_attr }}

      anywhere else inside the input tag.

      add variable 

  15. Find the remove code, it will vary by theme but 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:

      {{ bold_remove_class }}

      to the class of the remove button.

      Note: If there is no class, add it.

      add variable 

    3. Add:

      {{ bold_remove_attr }}

      anywhere else inside the tag.

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

      add variable 

  16. Replace any instances of

    item.price

    with:

    bold_item_price

    replace instances 

  17. Replace any instances of:
    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

  18. Select Save.

    select save 

Note: If any of this code already exists, you can skip the step.

  1. From "Shopify Admin", select Online Store.

    select online store 

  2. Select Actions.

    Select Actions 

  3. Select Edit code.

    Select Edit code 

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

    select customer/order.liquid 

  5. Add this code:

    {% for line_item in order.line_items %}

    under the line:

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

    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.

    select save 

  1. From "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.

    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.

    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.

    select save 

That's it!