Installation Guide for Product Options 1.0

Step 1: Add Snippet Files

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 these five files:
   • shappify-options.liquid - This one should already be there.
   • bold-cart.liquid
   • bold-cart-item.liquid
   • bold-product.liquid
   • bold-variant.liquid

   

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

      

   2. Enter the correct snippet name.

      

   3. Select Create snippet.

      

   4. Copy and paste the code found in each of these links into their respective files:
      • bold-cart.liquid
      • bold-cart-item.liquid
      • bold-product.liquid
      • bold-variant.liquid
      • shappify-options.liquid
   5. Select Save.
   6. 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. Select Create a blank file.

      

   3. Enter the correct asset name.

      

   4. Select .css from the dropdown.

      

   5. Select Add asset.

      

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

      

   7. Select Save.

Step 2: Edit theme.liquid

1. From the Shopify admin, select Online Store.
2. Select Actions.
3. Select Edit code.
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 3: Duplicate & Hide Code Install

1. From the Shopify admin, select Online Store.
2. Select Actions.
3. Select Edit code.

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.

5. Search for the line:

   {% for product in collection.products %}

   Can't find this code?

   

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. Copy and paste this code on the first line:

    {% include 'bold-product' with product, hide_action: 'break' %}{% if bold_hidden_product %}{% break %}{%endif %}

    

14. Select Save.

Step 4: Edit product.liquid

1. From the Shopify admin, select Online Store.
2. Select Actions.
3. Select Edit code.
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_form 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:

   

   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 on the product page. For many themes, this code is best positioned below the theme code that displays Shopify's product variants.

   

8. Select Save.

Step 5: Edit cart.liquid

1. From the Shopify admin, select Online Store.
2. Select Actions.
3. Select Edit code.

4. Under Templates, select cart.liquid.

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

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.

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

    

13. Find the line beginning with either:

    <input type="number"

    or:

    <input type="text"

    Can't find this code?

    

    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 it 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 within the remove line, delete it.

       

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 6: Edit customers/order.liquid

1. From the Shopify's, select Online Store.
2. Select Actions.
3. Select Edit code.
4. Under Templates, select customer/order.liquid.

5. Under the line:

   {% for line_item in order.line_items %}

   Add this code:

   {% 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 7: Edit Email Notifications

1. From the Shopify Admin, select Settings.
2. Select Notifications.

   

3. Select Order confirmation.

   

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

   

5. Select Save.

   

6. Select Notifications.
7. Select Shipping confirmation.
8. Copy the shipping confirmation code and overwrite the existing code.
9. Select Save.
10. Select Notifications.
11. Select Shipping update.
12. Copy the shipping update code and overwrite the existing code.
13. Select Save.
14. Select Notifications.
15. Select New order.
16. Copy the new order code and overwrite the existing code.
17. Select Save.