Product Options Installation

 Caution

This article only applies to Product Options 2.0. If you decide to complete the installation yourself, it requires technical knowledge and prior experience with Liquid code. If you are not comfortable with this, please request an installation using the instructions below. Otherwise, continue to the installation steps.

Request an installation:

 Warning

Please ensure that we have an active staff account for your site, prior to submitting your installation request. Visit Create a Shopify Staff Account for more information on how to create an account.

  1. From within the Product Options admin, select Need Help? > Liquid Installation.
  2. Select one of the following installation options:
    • Request Expert Install: This creates a ticket request with our installations team. All of these requests are completed manually on a rotational basis. You will be asked to confirm which theme you would like this coding to be installed on after selecting this option.
    • Start Automatic Install: This will trigger our robotic installer to perform an automatic installation. You will be asked to confirm which theme you would like this coding to be installed on after selecting this option.

      Note: You're able to revert the installation in the off-chance that our robo-installer is not able to install the code correctly on your selected theme. Selecting this option will roll your theme back to its previous state. An installation request will also be created for our team to complete manually.


 

Complete the installation: 

  1. Duplicate themes, to create a backup copy.
  2. From Shopify's admin, select Online Store, then ActionsEdit code.
  3. Under "Snippets", find the bold-common.liquid file:
  4. If it doesn't currently exist:
    1. Select Add a new snippet.
    2. Enter the correct snippet name.
    3. Select Create snippet.

      Select Create Snippet

    4. Copy and paste the code from the following link: bold-common.liquid.

      Paste bold-common code

    5. Select Save.
  5. Select bold-common.liquid.
  6. Copy and paste the following 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 Code

  7. Select Save.

Within the theme files, complete the following steps.

  1. Under "Assets", find the bold-options.css file.
  2. If this file doesn't exist:
    1. Select Add a new asset.
    2. Select Create a blank file.
    3. Enter bold-options as the file name.
    4. Select .css for the file extension.

      Select File Extension

    5. Select Add asset.
    6. Copy and paste the bold-options.css code into this file.

      Paste CSS File

    7. Select Save.

Within the theme files, complete the following steps.

  1. Under "Layout", select theme.liquid.
  2. Copy and paste the following code directly below the {{ content_for_header }} line:
    {% if template == 'product' and product.metafields.inventory.ShappifyHidden or product.type contains '_HIDDEN_' %}<meta name='robots' content='noindex'>{% endif %}
    {%- render 'bold-common' -%}

    PO render tag instructions theme.liquid

  3. Select Save.

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.

  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?

    PO install instructions for product in collection

  3. Copy and paste this code directly below this line:
    {%- if product.metafields.inventory.ShappifyHidden == 'true' -%}{%- continue -%}{%- endif -%}

    PO install instructions if product.metafields

  4. Select Save.

Within the theme files, complete the following steps.

  1. Under "Templates", 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

  3. Copy and paste this code directly below each instance:
    {%- if item.metafields.inventory.ShappifyHidden == 'true' -%}{%- continue -%}{%- endif -%}

    Paste item metafields

  4. Select Save.

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.

  2. Copy and paste the following code at the top of this file:
    {%- if product.metafields.inventory.ShappifyHidden == 'true' -%}{%- break -%}{%- endif -%}

    PO install instructions product metafields

  3. Select Save.

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.

  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 Variant Select

  3. Select Save.

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.

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

    <span class="Bold-theme-hook-DO-NOT-DELETE bold_cart_item_properties" style="display:none !important;"></span>
    {% 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 cart item properties

  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. Copy and paste the following line of code around any third-party checkout buttons:
    {% if additional_checkout_buttons %}
    <
    div
    class="additional-checkout-buttons">
    {{ content_for_additional_checkout_buttons }}
    </div>
    {% endif %}

    Note: Product Options is not compatible with checkout buttons that don't direct the customer through its checkout process. This includes PayPal, AmazonPay, ApplePay, GooglePay, etc.

    Paste additional checkout code

  11. Select Save.
  1. From Shopify's admin, select Settings.
  2. Select Notifications.
  3. Select Order confirmation.

    Select Order Confirmation

  4. Replace all code in the Email body with: Order confirmation.
  5. Select Save.
  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>

    Remove code

  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>

    Add Code

  9. Select Save.
  10. Select Shipping confirmation.

    Select Shipping Confirmation

  11. Replace all code in the Email body with: Shipping confirmation.
  12. Select Save.
  13. Select Shipping update.

    Select Shipping Update

  14. Replace all code in the Email body with: Shipping update.
  15. Select Save.
  16. Under "Templates", select New order.

    Select New Order

  17. Replace all code in the Email body with: New order notification.
  18. Select Save.
Was this article helpful?
0 out of 0 found this helpful