Caution
If you would like to remove the liquid code from your theme, the liquid code can be removed by deleting the snippet file, asset files and the code includes mentioned in the instruction steps below. You can also request an uninstall request by contacting our Merchant Success team.
Note: If you are experiencing issues with performance on the storefront with Bold Product Options after completing the steps below, we recommend requesting an expert installation, as your theme may require further liquid code changes.
Note: This article only applies to Product Options 1.0.
Select each of the steps below to view the instructions.
- 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:
- Select Add a new snippet.
- Enter the correct snippet name.
- Select Create snippet.
- 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
- Select Save.
- Repeat steps 5a – d for each missing snippet file.
- Select Add a new snippet.
- Under "Assets", select bold.css. If it doesn't exist:
- Select Add a new asset.
- Select Create a blank file.
- Enter the correct asset name.
- Select .css from the drop-down box.
- Select Add asset.
- Copy and paste the code found here: bold.css.
- Select Save.
- Select Add a new asset.
- 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' %}
- Select Save.
- 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 %}
-
Copy and paste this code directly after that line:
{% include 'bold-product' with product, hide_action: 'skip' %}
- 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 %}
- Select Save.
- 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:
- Add shappify_add_to_cart_form within the quotes in the class tag.
- Add data-product-id="{{ product.id }}" anywhere within the form tag.
- 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.
- Add shappify_add_to_cart_form within the quotes in the class tag.
- 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.
- 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 %}
-
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 <!-- before the code and --> after it.
-
Find the line beginning with either:
<input type="number"
or:
<input type="text"
-
Add:
{{ bold_qty_class }}
to the class of the quantity box.
Note: If there is no class, add it.
-
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"
-
Replace the code within the quotations in the href attribute with:
{{ bold_remove_href }}
-
Add:
{{ bold_remove_class }}
to the class of the remove button.
Note: If there is no class, add it.
-
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.
- 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 %}
-
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.
- From "Shopify Admin", select Settings.
- Select Notifications.
- Select Order confirmation.
- Copy the Order confirmation code and overwrite the existing code.
- Select Save.
- Select Notifications.
- Select Shipping confirmation.
- Copy the Shipping confirmation code and overwrite the existing code.
- Select Save.
- Select Notifications.
- Select Shipping update.
- Copy the Shipping update code and overwrite the existing code.
- Select Save.
- Select Notifications.
- Select New order.
- Copy the New order code and overwrite the existing code.
- Select Save.
That's it!