Product Options 1.0 Install Instructions

Ron

March 05, 2016 02:12

Product Options
1.0
Advanced liquid knowledge required
30 Minutes+

Warning!

This article only applies to Product Options 1.0. Visit Product Options 2.0 Install Instructions for more information on how to install Version 2.0.

Select each of the steps below to view the instructions.

Step 1: Add Snippet Files

Duplicate themes, to create a backup copy.
From Shopify's admin, select Online Store.
Select Actions.
Select Edit code.
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
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:
5. Select Save.
6. Repeat steps 5a – d for each missing snippet file.
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 drop-down box.
5. Select Add asset.
6. Copy and paste the code found here: bold.css.
7. Select Save.

Step 2: Edit theme.liquid

From Shopify's admin, select Online Store.
Select Actions.
Select Edit code.
Under "Layout", select theme.liquid.

Copy and paste this code directly above the </head> tag:

{{ 'bold.css' | asset_url | stylesheet_tag }}
{% include 'bold-product' with product, hide_action: 'header' %}

copy and paste this code

Select Save.

Step 3: Duplicate & Hide Code Install

From Shopify's admin, select Online Store.
Select Actions.
Select Edit code.
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.
Search for the line:
```
{% for product in collection.products %}
```
Can't find this code?

Copy and paste this code directly after that line:

{% include 'bold-product' with product, hide_action: 'skip' %}

copy and paste this code

Select Save.
Under "Templates", select search.liquid.
Search for the line:
```
{% for item in search.results %}
```
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.
Select Save.
Under "Templates", select product.liquid.

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

Select Save.

Step 4: Edit product.liquid

From Shopify's admin, select Online Store.
Select Actions.
Select Edit code.
Under "Templates", select product.liquid.
Search for the line that begins with:
```
<form action="/cart/add" method="post"
```
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.
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.
Select Save.

Step 5: Edit cart.liquid

From Shopify's admin, select Online Store.
Select Actions.
Select Edit code.
Under "Templates", select cart.liquid.

Note: If your theme uses sections, you may have to select cart-template.liquid under "Sections" instead.
On the first line add:
```
{% include 'bold-cart' %}
```

Find:

{% for item in cart.items %}

and add this code directly after:

{% include 'bold-cart-item' with item %}

add this code

On the last line add:
```
{{ bold_edit_in_cart }}
```
Find:
```
{% for item in cart.items %}
```
and look for the first <tr>, <ul>, <div> or <li> after it.
Within the class attribute in the container tag, add:
```
{{ bold_row_class}}
```
Note: If there is no class, add it.
Add:
```
{{ bold_row_data }}
```
anywhere else inside the container tag outside any other attribute.
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.
If there is any code that looks like this, remove it or comment it out.

Note: To comment out code enter  after it.
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.
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.
Replace any instances of:
```
item.price
```
with:
```
bold_item_price
```
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.
Select Save.

Step 6: Edit customers/order.liquid

From Shopify's admin, select Online Store.
Select Actions.
Select Edit code.
Under "Templates", select customer/order.liquid.

Under the line:

{% for line_item in order.line_items %}

Add this code:

{% include 'bold-cart-item' with line_item, bold_order:order %}

add this code

Find:
```
{% for line_item in order.line_items %}
```
and look for the first <tr>, <ul>, <div> or <li> after it.
Within the class attribute in the container tag, add:
```
{{ bold_row_class}}
```
Note: If there is no class, add it.
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.
Replace any instances of:
```
line_item.price
```
with:
```
bold_item_price
```
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.
Select Save.