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.

How to Set Up Product Options 1.0

  1. Install Product Options
  2. Add Snippet Files
  3. Edit theme.liquid
  4. Duplicate & Hide Code Install
  5. Edit product.liquid
  6. Edit cart.liquid
  7. Edit customers/order.liquid
  8. Edit Email Notifications

Step 1: Install Product Options 1.0

  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.

Step 2: Add Snippet Files

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.
  3. Select ...
  4. 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
  6. For any that don't exist:
    1. Select Add a new snippet.
    2. Enter the correct snippet name.
    3. Copy and paste the code found in each of these links into their respective files:
    4. Select Save.
    5. Repeat steps 5a – d for each missing snippet file.
  7. Under "Assets", select bold.css. If it doesn't exist:
    1. Select Add a new asset.
    2. Enter the correct asset name.
    3. Copy and paste the code found here: bold.css.
    4. Select Save.

Step 3: Edit theme.liquid

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

  1. From "Shopify Admin", select Online Store.
  2. Select ...
  3. Select Edit HTML / CSS.
  4. Under "Layout", 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' %}
  6. Select Save.

Step 4: Duplicate & Hide Code Install

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

  1. From "Shopify Admin", select Online Store.
  2. Select ...
  3. Select Edit HTML / CSS.
  4. Under "Templates", select collection.liquid.

    Note: If this file is very short and contains this line, open collection-template under sections instead. This will vary by theme.

  5. Search for the line {% for product in collection.products %}.
  6. Copy and paste this code directly after that line:
    {% include 'bold-product' with product, hide_action: 'skip' %}
  7. Select Save
  8. Under "Templates", select search.liquid.
  9. Search for the line {% for item in search.results %}.
  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.

  11. Select Save
  12. Under "Templates", select product.liquid.
  13. Search for the line {% for item in search.results %}.
  14. Copy and paste this code on the first line:
    {% include 'bold-product' with product, hide_action: 'break' %}{% if bold_hidden_product %}{% break %}{%endif %}
  15. Select Save

Step 5: Edit product.liquid

  1. From "Shopify Admin", select Online Store.
  2. Select ...
  3. Select Edit HTML / CSS.
  4. Under "Templates", select product.liquid.
  5. Search for the line that begins with: <form action=”/cart/add” method=”post”:
  6. Copy and paste this code:
    1. Add shappify_add_to_cart_from within the quotes in the class tag.
    2. Add data-product-id=”{{ product.id }}” anywhere within the form tag.
    3. Add enctype=”multipart/form-data” within the form tag.

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

      product.liquid

      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.

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

      Code to display option selections on the product page

    5. Select Save.

Step 6: Edit cart.liquid

  1. From "Shopify Admin", select Online Store.
  2. Select ...
  3. Select Edit HTML / CSS.
  4. Under "Templates", select cart.liquid.
  5. On the first line add: {% include ‘bold-cart’ %}.

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

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

  8. Find {% for item in cart.items %} and look for the first <tr>, <ul>, <div> or <li> after it.
  9. Within the class attribute in the container tag, add {{ bold_row_class}}.

    Note: If there is no class, add it.

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

  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.

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

  13. Find the line beginning with either <input type=”number” or <input type=”text.
    1. Add {{ bold_qty_class }} to the class of the quantity box.

      Note: If there is no class, add it.

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

  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".
    1. Replace the code within the quotations in the href attribute with: {{ bold_remove_href }}.
    2. Add {{ bold_remove_class }} to the class of the remove button.

      Note: If there is no class, add it.

    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.

  15. Replace any instances of item.price with bold_item_price.
  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.

  17. Select Save.

Step 7: Edit customers/order.liquid

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

  1. From "Shopify Admin", select Online Store.
  2. Select ...
  3. Select Edit HTML / CSS.
  4. Under "Templates", 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 %}

  6. Find {% for line_item in order.line_items %} and look for the first <tr>, <ul>, <div> or <li> after it.
  7. Within the class attribute in the container tag, add {{ bold_row_class}}.

    Note: If there is no class, add it.

  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.

  9. Replace any instances of line_item.price with bold_item_price.
  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.

  11. Select Save.

Step 8: Edit Email Notifications

  1. From “Shopify Admin”, navigate to Settings -> Notifications.
  2. Select Order Confirmation.
  3. Copy the Order Confirmation Code and overwrite the existing code.
  4. Select Save.
  5. Select Notifications.
  6. Select Shipping Confirmation.
  7. Copy the Shipping Confirmation Code and overwrite the existing code.
  8. Select Save.
  9. Select Notifications.
  10. Select Shipping Update.
  11. Copy the Shipping Update Code and overwrite the existing code.
  12. Select Save.
  13. Select Notifications.
  14. Select New Order.
  15. Copy the New Order Code and overwrite the existing code.
  16. Select Save.

That’s it!

Have more questions? Submit a request