Top

Product Builder Liquid Install Instructions

How to Set up Product Builder

  1. Install Product Builder
  2. Add Snippet Files
  3. Edit theme.liquid
  4. Edit cart.liquid
  5. Edit customers/order.liquid
  6. Edit Email Notifications

Step 1: Install Product Builder 1.0

  1. From “Shopify Admin”, select Apps.
  2. Select Visit Shopify App Store.
  3. Enter Product Builder in the "Search Bar".
  4. Select Product Builder.
  5. Select Get.
  6. Select Install app.
  7. Select Approve Charge.

Step 2: Add Snippet Files

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

  1. From "Shopify Admin", select Online Store.
  2. Select ...
  3. Select Edit HTML / CSS.
  4. Under "Snippets", find these two files.
    • bold-cart.liquid
    • bold-cart-item.liquid
  5. For any that don't exist:
    1. Select Add a new snippet.
    2. Enter the correct snippet name.
    3. Copy and paste the code found in each of these links into their respective files:
    4. Select Save.
    5. Repeat steps 5a – d for each missing snippet file.
  6. Under "Assets", select bold.css. If it doesn't exist:
    1. Select Add a new asset.
    2. Enter the correct asset name.
    3. Copy and paste the code found here: bold.css.
    4. Select Save.

Step 3: Edit theme.liquid

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

  1. From "Shopify Admin", select Online Store.
  2. Select ...
  3. Select Edit HTML / CSS.
  4. Under "Layout", select theme.liquid.
  5. Copy and paste this code directly above the </head> tag.
    {{ 'bold.css' | asset_url | stylesheet_tag }}
    {% include 'bold-product' with product, hide_action: 'header' %}
  6. Select Save.

Step 4: Edit cart.liquid

  1. From "Shopify Admin", select Online Store.
  2. Select ...
  3. Select Edit HTML / CSS.
  4. Under "Templates", select cart.liquid.

    Note: If your theme uses sections, this may be in cart-template.liquid, under Sections.

  5. On the first line add: {% include ‘bold-cart’ %}.

  6. Find {% for item in cart.items %} and add this code directly after:
    {% include 'bold-cart-item' with item %}

  7. Find {% for item in cart.items %} and look for the first <tr>, <ul>, <div> or <li> after it.
  8. Within the class attribute in the container tag, add {{ bold_row_class}}.

    Note: If there is no class, add it.

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

  10. Find the img src tag, similar to this:
    <img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">

    Copy and paste this before:

    {% if bold_builder_img_src != blank and bold_builder_img_src != undefined %}
    <img src="{{ bold_builder_img_src }}" alt="{{ bold_builder_img_alt }}" />
    {% else %}

    Copy and paste this after:

    {% endif %}

    result should look like this:

    {% if bold_builder_img_src != blank and bold_builder_img_src != undefined %}
    <img src="{{ bold_builder_img_src }}" alt="{{ bold_builder_img_alt }}" />
    {% else %}
    <img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
    {% endif %}
  11. Find all instances of "item.url", "item.product.url" and /or "item.variant.url" and replace with {{ bold_builder_href }}.
  12. 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.

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

  14. Find the line beginning with either <input type=”number” or <input type=”text.
    1. Add {{ bold_qty_class }} to the class of the quantity box.

      Note: If there is no class, add it.

    2. Add {{ bold_qty_attr }} anywhere else inside the input tag.

  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".
    1. Replace the code within the quotations in the href attribute with: {{ bold_remove_href }}.
    2. Add {{ bold_remove_class }} to the class of the remove button.

      Note: If there is no class, add it.

    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.

  16. Replace any instances of item.price with bold_item_price.
  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.

  18. On the last line add: {{ bold_edit_in_cart }}.

  19. Select Save.

Step 5: Edit customers/order.liquid

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

  1. From "Shopify Admin", select Online Store.
  2. Select ...
  3. Select Edit HTML / CSS.
  4. Under "Templates", 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 %}

  6. Find {% for line_item in order.line_items %} and look for the first <tr>, <ul>, <div> or <li> after it.
  7. Within the class attribute in the container tag, add {{ bold_row_class}}.

    Note: If there is no class, add it.

  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.

  9. Replace any instances of line_item.price with bold_item_price.
  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.

  11. Select Save.

Step 6: Edit Email Notifications

  1. From “Shopify Admin”, navigate to Settings -> Notifications.
  2. Select Order Confirmation.
  3. Copy the Order Confirmation Code and overwrite the existing code.
  4. Select Save.
  5. Select Notifications.
  6. Select Shipping Confirmation.
  7. Copy the Shipping Confirmation Code and overwrite the existing code.
  8. Select Save.
  9. Select Notifications.
  10. Select Shipping Update.
  11. Copy the Shipping Update Code and overwrite the existing code.
  12. Select Save.
  13. Select Notifications.
  14. Select New Order.
  15. Copy the New Order Code and overwrite the existing code.
  16. Select Save.

That’s it!

Have more questions? Submit a request