Product Options Code Install Instructions

Follow

Warning!

This article only applies to Product Options 2.0. This article requires technical knowledge and prior experience with Liquid code. If you are not comfortable with this, please Request a Product Options Installation for help.

Select each step below to view the instructions:

  1. Duplicate themes, to create a backup copy.
  2. From Shopify's admin, select Online Store.

    Select Online Store

  3. Select Actions.

    Select Actions

  4. Select Edit code.

    Select Edit Code

  5. Under "Snippets", find these three files:
    • bold-common.liquid
    • bold-product.liquid
    • bold-variant.liquid
    Find These Files
  6. For any that don't exist:
    1. Select Add a new snippet.

      Select Add New Snippet

    2. Enter the correct snippet name.

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

      Paste Snippet Code

    5. Select Save.

      Select Save

    6. Repeat Steps 6.1 - 6.5 for each missing snippet file.

      Repeat Steps 6.1 - 6.5

  1. From Shopify's 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 the following code directly below the {{ content_for_header }} line:
    {%- include 'bold-product' with product, hide_action: 'header' -%}
    {%- include 'bold-common' -%}

    Paste Code under Header

  6. Select Save.

    Select Save

  1. From Shopify's admin, select Online Store.

    Select Online Store

  2. Select Actions.

    Select Actions

  3. Select Edit code.

    Select Edit Code

  4. Under "Templates", select collection.liquid.

    Note: The contents for this file may be located under "Sections" in the collection-template.liquid file.

    Select collection.liquid

  5. Find the following line of code:
    {% for product in collection.products %}

    Note: This line may appear more than once in the file and you will need to add the line of code for each instance. Can't find this code?

    Find for product loop

  6. Copy and paste this code directly below this line:
    {%- include 'bold-product' with product, hide_action: 'skip' -%}

    Include product loop

  7. Select Save.

    Select Save

  1. From Shopify's admin, select Online Store.

    Select Online Store

  2. Select Actions.

    Select Actions

  3. Select Edit code.

    Select Edit Code

  4. Under "Templates", select search.liquid.

    Select search.liquid

  5. Find the following line of code:
    {% for item in search.results %}

    Note: This line may appear more than once in the file and you will need to add the line of code for each instance.

    Find for item loop

  6. Copy and paste this code directly below each instance:
    {%- include 'bold-product' with item, hide_action: 'skip' -%}

    Pasted for item loop code

  7. Select Save.

    Select Save

  1. From Shopify's admin, select Online Store.

    Select Online Store

  2. Select Actions.

    Select Actions

  3. Select Edit code.

    Select Edit Code

  4. Under "Templates", select product.liquid.

    Note: The contents for this file may be located under "Sections" in the product-template.liquid file.

    Select product.liquid

  5. Copy and paste the following code at the top of this file:
    {% include 'bold-product' with product, hide_action: 'break' %}{% if bold_hidden_product %}{% break %}{% endif %}

    Paste code top of product.liquid

  6. Select Save.

    Select Save

  1. From Shopify's admin, select Online Store.

    Select Online Store

  2. Select Actions.

    Select Actions

  3. Select Edit code.

    Select Edit Code

  4. Under "Templates", select product.liquid.

    Note: The contents for this file may be located under "Sections" in the product-template.liquid file.

    Select product.liquid

  5. Copy and paste the following code just below the variant selector element:
    <div class="bold_options" data-product-id="{{ product.id }}"></div>

    Note: This section of code should end with </select>, and reference "productselect" & "variants" at the beginning.

    Paste under Select

  6. Select Save.

    Select Save

  1. From Shopify's 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: The contents for this file may be located under "Sections" in the cart-template.liquid file.

    Select cart.liquid

  5. Find a section of code starting with:
    {% for p in item.properties %}

    Find for p in item properties

  6. Copy and paste the following code over top of this section:

    Note: The above section of code should end with {% endif %}.

    {% assign propertySize = item.properties | size %}
    {% if propertySize > 0 %}
      {% for p in item.properties %}
        {% assign first_character_in_key = p.first | truncate: 1, '' %}
        {% unless p.last == blank or first_character_in_key == '_' %}
          {{ p.first }}:
          {% if p.last contains '/uploads/' %}
            <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
          {% else %}
            {{ p.last }}
          {% endif %}
        {% endunless %}
      {% endfor %}
    {% endif %}

    Paste Options Code

  7. Find the following line of code:
    {{ item.price | money }}
    On newer themes, it will be:
    {{ item.final_price | money }}
    Find item.price money
  8. Copy and paste this code in front of each instance:
    <span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_price" style="display:none !important;"></span>

    Paste item.price money code

  9. Find the following line of code:
    {{ item.line_price | money }}
    On newer themes, it will be:
    {{ item.final_line_price | money }}
    Find item.line price money
  10. Copy and paste this code in front of each instance:
    <span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_total" style="display:none !important;"></span>

    Paste item.line price money code

  11. Find the following line of code:
    {{ cart.total_price | money }}

    Find cart.total price money

  12. Copy and paste this code in front of each instance:
    <span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_total" style="display:none !important;"></span>

    Paste cart.total price money code

  13. Select Save.

    Select Save

  1. From Shopify's admin, select Settings.

    Select_Settings.png

  2. Select Notifications.

    Select_Notifications.png

  3. Select Order confirmation.

    Select_Order_Confirmation.png

  4. Replace all code with: Order confirmation.

    Edit_Order_Confirmation.png

  5. Select Save.

    Select_Save_-_Order_Confirmation.png

  6. Select Abandoned checkout.

    Select_Abandoned_Checkout.png

  7. Replace this code:
    <td class="button__cell"><a href="{{ url }}" class="button__text">Complete your purchase</a></td>
     </tr>
     </table>
     {% if shop.url %}
     <table class="link secondary-action-cell">
     <tr>
     <td class="link__cell"><a href="{{ shop.url }}" class="link__text"><span class='or'>or</span> Visit our store</a></td>

    Screen_Shot_2019-04-25_at_1.05.31_PM.png

  8. With this code:
    <td class="button__cell"><a href="{{ shop.url }}/cart" class="button__text">Complete your purchase</a></td>
     </tr>
     </table&gt
     {% if shop.url %}
     <table class="link secondary-action-cell">
     <tr>
     <td class="link__cell"><a href="{{ shop.url }}" class="link__text"><span class='or'>or</span> Visit our store</a></td>

    Screen_Shot_2019-04-25_at_1.08.37_PM.png

  9. Select Save.

    Select_Save_-_Abandoned_Checkout.png

  10. Select Shipping confirmation.

    Select_Shipping_Confirmation.png

  11. Replace all code with: Shipping confirmation.

    Edit_Shipping_Confirmation.png

  12. Select Save.

    Select_Save_-_Shipping_Confirmation.png

  13. Select Shipping update.

    Select_Shipping_Update.png

  14. Replace all code with: Shipping update.

    Edit_Shipping_Update.png

  15. Select Save.

    Select_Save_-_Shipping_Confirmation.png

  16. Under "Templates", select New order.

    Select_New_Order.png

  17. Replace all code with: New order notification.

    Edit_New_Order_Template.png

  18. Select Save.

    Save_-_New_Order_Template.png

Next Steps:

Blog Posts:

2 out of 19 found this helpful

Comments

0 comments

Please sign in to leave a comment.