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

  7. Select bold-common.liquid.

    Select bold-common.liquid

  8. Copy and paste the follow code at the bottom of this file:
    {%- comment -%} INCLUDE APP SCRIPTS BELOW {%- endcomment -%}
    {{ 'bold-options.css' | asset_url | stylesheet_tag }}
    {{ 'https://option.boldapps.net/js/options.js' | script_tag }}

    Paste bold-common Options Code

  9. Select Save.

    Select Save

Note: Within the theme files, complete the following steps.

  1. Under "Assets", find the bold-options.css file.

    Find bold-options.css

  2. If this file doesn't exist:
    1. Select Add a new asset.

      Select Add a New Asset

    2. Select Create a blank file.

      Select Create a Blank File

    3. Enter bold-options as the file name.

      Enter File Name

    4. Select .css for the file extension.

      Select .css File Extension

    5. Select Add asset.

      Select Add Asset

    6. Copy and paste the bold-options.css code into this file.

      Paste CSS File

    7. Select Save.

      Select Save

Note: Within the theme files, complete the following steps.

  1. Under "Layout", select theme.liquid.

    Select theme.liquid

  2. 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 {{ content_for_header }}

  3. Select Save.

    Select Save

Note: Within the theme files, complete the following steps.

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

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

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

    Include product loop

  4. Select Save.

    Select Save

Note: Within the theme files, complete the following steps.

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

    Select search.liquid

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

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

    Pasted for item loop code

  4. Select Save.

    Select Save

Note: Within the theme files, complete the following steps.

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

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

  3. Select Save.

    Select Save

Note: Within the theme files, complete the following steps.

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

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

  3. Select Save.

    Select Save

Note: Within the theme files, complete the following steps.

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

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

    Find for p in item properties

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

  4. Find the following line of code:
    {{ item.price | money }}
    On newer themes, it will be:
    {{ item.final_price | money }}
    Find item.price money
  5. 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

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

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

    Find cart.total price money

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

  10. Select Save.

    Select Save

  1. From Shopify's admin, select Settings.

    Select Settings

  2. Select Notifications.

    Select Notifications

  3. Select Order confirmation.

    Select Order Confirmation

  4. Replace all code with: Order confirmation.

    Edit Order Confirmation

  5. Select Save.

    Select Save Order Confirmation

  6. Select Abandoned checkout.

    Select Abandoned Checkout

  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

  10. Select Shipping confirmation.

    Select Shipping Confirmation

  11. Replace all code with: Shipping confirmation.

    Edit Shipping Confirmation

  12. Select Save.

    Select Save Shipping Confirmation

  13. Select Shipping update.

    Select Shipping Update

  14. Replace all code with: Shipping update.

    Edit Shipping Update

  15. Select Save.

    Select Save Shipping Confirmation

  16. Under "Templates", select New order.

    Select New Order

  17. Replace all code with: New order notification.

    Edit New Order Template

  18. Select Save.

    Save New Order Template

Next Steps:

Blog Posts:

2 out of 19 found this helpful

Comments

0 comments

Please sign in to leave a comment.