Product Builder Install Instructions

Follow

Warning!

This article requires technical knowledge and prior experience with liquid code. If you are not comfortable with this, Request a Product Builder Installation 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.

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.

    Actions

  4. Select Edit code.

    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.

    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.

    select save

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

    select online store

  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:

    {% 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.

    {% 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 out code enter <!-- before the code and --> after it.

    comment out this 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.

    Actions

  3. Select Edit code.

    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!

Next Steps:

0 out of 7 found this helpful

Comments

0 comments

Please sign in to leave a comment.