Product Options Installation

Overview

Product Options requires our Liquid code in order to run correctly on your store. The code installation ensures that the options will appear on your product pages and that your customer's selections will appear correctly on both the cart and checkout pages of your store.

We offer a few different options to help you complete this installation on your store:

  1. An automatic installer
  2. The ability to request a professional installation from our team
  3. A step-by-step guide on completing this manually

Before you start, we highly recommend creating a Duplicate version of your Shopify theme to ensure you have a copy without our code installation.

 


 

Request a Product Options Install

Automatic Install

When you first install the Bold Product Options app to your store, it will immediately take you to a screen that notifies you of the importance of running an automatic installation on your store.

Automatic Installation section

 

If you aren't seeing this option, please hover over Need Help? then Liquid Installation.

Need Help

Selecting Begin automatic update will allow you to choose your preferred theme that you would like to complete the automatic code installation on for Bold Product Options.

 Pro-Tip

We highly recommend creating a Duplicate version of your Shopify theme to ensure you have a copy without our code installation.

After the checkbox is selected to confirm you have a back up version of your theme, you will be able to proceed with the code installation.

It is important to note that if your current theme is not compatible with our automatic installation tool, the app will automatically notify you. If this happens, you can rollback your theme to its previous state.

When the installation has not been completed in full, reverting the changes will automatically create an installation request for our team to assist you further.

 


 

Expert Install

This option creates a ticket request with our installation team, which is then scheduled to be completed by our experts. By selecting this option, you will be asked to confirm which theme you would like this code installation completed on.

All of these requests are completed manually on a rotational basis. You will receive an email notification upon completion.

 Alert

Please ensure that we have an active staff account for your store prior to submitting your installation request. Please visit Create a Shopify Staff Account for more information.

To request an expert install, please follow these steps:

  1. From within Bold Product Options, hover over Need Help?

    Need Help 1

  2. Select Liquid installation.

    Need Help 2

  3. Under the automatic theme update information, select expert theme update service.
  4. Review the terms, then select I have created a staff account for Bold.
  5. In the bottom left corner, select the theme you would like the code installation to be completed on.
  6. Select Submit Request.

 


 

Manual Install

  1. From the Shopify admin, select Online Store.
  2. Select Actions.
  3. Duplicate the theme you would like the installation completed on.
  4. Select Edit Code on the duplicated theme.
  5. Under Snippets, find the bold-common.liquid file:
  6. 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.
  7. Select bold-common.liquid.
  8. 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

  9. Select Save.

 


 

Step 2: Add Asset Files

  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.

 


 

Step 3: Edit theme.liquid

  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.

 


 

Step 4: Edit collection.liquid

  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.

 


 

Step 5: Edit search.liquid

  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.

 


 

Step 6: Edit product.liquid

  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.

 


 

Step 7: Display Product Options

  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 and variants at the beginning.

    Paste under Variant Select

  3. Select Save.

 


 

Step 8: Edit cart.liquid

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

    Bold Cart Line Item Properties

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

    Paste the 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" data-item-key="{{item.key}}" style="display:none !important;"></span>

    Paste Bold Cart Item Total

  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.

 


 

Step 9: Update Notification Emails

  1. From the Shopify 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.

 


 

Code Removal

If you would like to remove the liquid code from your theme, the liquid code can be removed by deleting the snippet files, asset files, and the code includes mentioned in the instruction steps above.

You can otherwise request a code removal by contacting our Merchant Success team.

And you can remove the app from your by following this guide: Uninstall an App from Your Store

 

Note: If you are experiencing issues with performance on the storefront with Bold Product Options after completing the steps above, we recommend requesting an expert installation, as your theme may require further liquid code changes. See previous step Expert Install for more information.

Was this article helpful?
0 out of 0 found this helpful