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. Duplicate themes, to create a backup copy.
  2. From "Shopify Admin", select Apps.
  3. Select Visit Shopify App Store.
  4. Enter Product Builder in the "Search Bar".
  5. Select Product Builder.
  6. Select Get.
  7. Select Install app.
  8. Select Approve Charge.

Note: If any of these files or 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 HTML / CSS.

    select edit html / css 

  4. Under "Snippets", find these two files.
    • bold-cart.liquid
    • bold-cart-item.liquid

    find these files 

  5. 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.
  6. 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 HTML / CSS.

    select edit html / css 

  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 }}

    Step3-5.png 

  6. Select Save.

     select save

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

    select online store 

  2. Select Actions.

    select actions 

  3. Select Edit HTML / CSS.

    select edit html / css 

  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 to container tag 

  10. Add {{ bold_row_data }} anywhere else inside the container tag outside any other attribute.

    add variable

  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. Add {{ bold_item_properties }} after the line containing item.product.title.

    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.

    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.

    Step6-15.png 

  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 HTML / CSS.

    select edit html / css 

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

    select customer/order.liquid 

  5. Add this code under the line {% for line_item in order.line_items %}:
    {% 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 variable

  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 variable

  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!

Have more questions? Submit a request