Top

Product Options 1.0 Install Instructions

Warning!

This article only applies to Product Options Version 1.0. To set up Product Options 2.0 visit: Product Options 2.0 Install Instructions.

Select the step below to view the instructions.

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

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

  1. Duplicate themes, to create a backup copy.
  2. From "Shopify Admin", select Online Store.

    select online store 

  3. Select Actions.

    select actions 

  4. Select Edit HTML / CSS.

    select edit html / css 

  5. Under "Snippets", find these five files:
    • shappify-options.liquid - This one should already be there.
    • bold-cart.liquid
    • bold-cart-item.liquid
    • bold-product.liquid
    • bold-hidden-variants.liquid

    find these files 

  6. For any that don't exist:
    1. Select Add a new snippet.

      add a new snippet 

    2. Enter the correct snippet name.

      enter a 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:

      copy and paste the code 

    5. Select Save.

      select save 

    6. Repeat steps 5a – d for each missing snippet file.
  7. Under "Assets", select bold.css. If it doesn't exist:

    select bold.css

    1. Select Add a new asset.

      select add a new asset 

    2. Select Create a blank file.

      select create a blank file 

    3. Enter the correct asset name.

      enter asset name 

    4. Select .css from the dropdownbox.

      select css 

    5. Select Add asset.

      select add asset 

    6. Copy and paste the code found here: bold.css.

      copy and paste code 

    7. Select Save.

      select save 

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

  1. From "Shopify Admin", select Online Store.

    select online store 

  2. Select Actions.

    select actions 

  3. Select Edit HTML / CSS.

    select edit html / css 

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

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

    Step3-5.png 

  6. Select Save.

     select save

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

  1. From "Shopify Admin", select Online Store.

    select online store 

  2. Select Actions.

    select actions 

  3. Select Edit HTML / CSS.

    select edit html / css 

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

    Note: If your theme contains sections you may need to make these changes in collection-template.liquid , under "Sections" instead.

    select collection.liquid 

  5. Search for the line {% for product in collection.products %}.

    search for the line 

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

    copy and paste the code 

  7. Select Save.

    select save 

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

    select search.liquid 

  9. Search for the line {% for item in search.results %}.

    search for line 

  10. Copy and paste this code directly after that line:
    {% include 'bold-product' with item, hide_action: 'skip' %}

    Note: If this code appears more than once, repeat this step for each instance.

    copy and paste the code 

  11. Select Save.

    select save 

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

    select product.liquid 

  13. Copy and paste this code on the first line:
    {% include 'bold-product' with product, hide_action: 'break' %}{% if bold_hidden_product %}{% break %}{%endif %}

    copy and paste the code

  14. Select Save.

    select save 

  1. From "Shopify Admin", select Online Store.

    select online store 

  2. Select Actions.

    select actions 

  3. Select Edit HTML / CSS.

    select edit html / css 

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

    select product.liquid 

  5. Search for the line that begins with: <form action="/cart/add" method="post".

    search for the line 

  6. Copy and paste this code:
    1. Add shappify_add_to_cart_from within the quotes in the class tag.

      add tag 

    2. Add data-product-id=”{{ product.id }}” anywhere within the form tag.

      add attribute 

    3. Add enctype=”multipart/form-data” within the form tag.

      add attribute 

    When you are done, the form line should look like this:

    final form line

    Note: Some themes will have the product form changed within a snippet file, commonly named product-form.liquid, short-form.liquid, or similar. If that is the case you will need to make the changes to that file instead. 

  7. Within the <form></form> tags, add this code:
    {% include 'shappify-options' %}
    

    Note: This code will display the option selections -- dropdowns, checkboxes, etc. on the product page. For many themes, this code is best positioned below the theme code that displays Shopify's product variants.

    add this code

  8. Select Save.

    select save 

  1. From "Shopify Admin", select Online Store.

    select online store 

  2. Select Actions.

    select actions 

  3. Select Edit HTML / CSS.

    select edit html / css 

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

    Note: If your theme uses sections, you may have to select cart-template.liquid under "Sections" instead.

    Select cart.liquid

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

    add on first line

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

    add this code

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

    add this code

  8. Find {% for item in cart.items %} and look for the first <tr>, <ul>, <div> or <li> after it.

    find line 

  9. Within the class attribute in the container tag, add {{ bold_row_class}}.

    Note: If there is no class, add it.

    add to container tag 

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

    add variable

  11. Add {{ bold_item_properties }} immediately after the line containing item.product.title.

    Note: This can be added anywhere you would like the list of selected options to appear.

    add variable

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

    Note: To comment out code enter <!-- before the code and --> after it.

    comment out code

  13. Find the line beginning with either <input type=”number” or <input type=”text.

    find the line 

    1. Add {{ bold_qty_class }} to the class of the quantity box.

      Note: If there is no class, add it.

      add variable 

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

      add variable 

  14. 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".

    find the code

    1. Replace the code within the quotations in the href attribute with: {{ bold_remove_href }}.

       replace the code

    2. Add {{ bold_remove_class }} to the class of the remove button.

      Note: If there is no class, add it.

      add variable 

    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.

      add variable 

  15. Replace any instances of item.price with bold_item_price.

    Step6-15.png 

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

    replace instances

  17. Select Save.

    select save 

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

  1. From "Shopify Admin", select Online Store.

    select online store 

  2. Select Actions.

    select actions 

  3. Select Edit HTML / CSS.

    select edit html / css 

  4. Under "Templates", select customer/order.liquid.

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

    add this code

  6. Find {% for line_item in order.line_items %} and look for the first <tr>, <ul>, <div> or <li> after it.

     look for container tag

  7. Within the class attribute in the container tag, add {{ bold_row_class}}.

    Note: If there is no class, add it.

    add variable

  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.

    add variable

  9. Replace any instances of line_item.price with bold_item_price.

    replace code instances 

  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.

    replace instances

  11. Select Save.

    select save 

  1. From “Shopify Admin”, select Settings.

    select settings 

  2. Select Notifications.

    select notificatons 

  3. Select Order confirmation.

    select order confirmation 

  4. Copy the Order confirmation code and overwrite the existing code.

    copy and paste code 

  5. Select Save.

    select save 

  6. Select Notifications.

    select notificatons 

  7. Select Shipping confirmation.

    select shipping confirmation 

  8. Copy the Shipping confirmation code and overwrite the existing code.

    copy and paste the code 

  9. Select Save.

    select save 

  10. Select Notifications.

    select notifications 

  11. Select Shipping update.

    select shipping update 

  12. Copy the Shipping update code and overwrite the existing code.

    copy and paste the code 

  13. Select Save.

    select save 

  14. Select Notifications.

    select notificatons 

  15. Select New order.

    select new order 

  16. Copy the New order code and overwrite the existing code.

    copy and paste the code 

  17. Select Save.

    select save 

That’s it!

Next Steps

Have more questions? Submit a request