The following instructions are used to manually install Product Options on the new Dawn Theme.
NOTE: It is always best practice to duplicate your theme before any installation of new code to insure you have a fallback if any issues arise you can always revert to a clean copy of the theme.
In order to edit the code for your theme you will need to select the "Actions" button next to your theme name and select the "Edit Code" option.
Step 1: Creating the Snippet.
On the left hand menu, select and expand the "Snippets" folder. Select the "add a new snippet" option at the top of the list
Enter the name "w3-product-options" into the space provided in the pop-up and then press the "create snippet" button.
Select the new snippet you created to open it and paste the following code inside the file and press the save button
{% if step == 'item_row_class' %}
{% if item.properties._options_group_id %}options-group group-id-{{ item.properties._options_group_id }}{% endif %}
{% if item.properties._options_hidden %} options-hidden{% endif %}
{% if item.properties._options_unlink %} options-unlink{% endif %}
{% endif %}
{% if step == 'money_line' %}
{% if item.properties._options_group_id and item.properties._options_hidden == nil %}
{% assign guid = item.properties["_options_group_id"] %}
{% for item2 in cart.items %}
{% if item2.properties._options_hidden and item2.properties["_options_group_id"] == guid %}
<div class="options-additional-item">
+ {{ item2.line_price | money }}
</div>
{% endif %}
{% endfor %}
{% endif %}
{% endif %}
{% assign line_total = item.line_price %}
{% if step == 'money_line_total' %}
{% if item.properties._options_group_id and item.properties._options_hidden == nil %}
{% assign guid = item.properties["_options_group_id"] %}
{% for item2 in cart.items %}
{% if item2.properties._options_hidden and item2.properties["_options_group_id"] == guid %}
{% assign line_total = line_total | plus:item2.line_price %} {% endif %} {% endfor %}
{{ line_total | money }}
{% else %}
{{ line_total | money }}
{% endif %}
{% endif %}
Once you are done the file will look like this:
Step 2: add code to indicate where the options will appear on the product page
type "main-product" in the search field at the top of the left hand menu to find the "main-product.liquid" section.
Open the "main-product.liquid" section by clicking on the name. Once the file is open we need to locate the product form. Scroll down to about line #255 and look for the HTML tag <product-form class="product-form">
Next, copy and paste the snippet below just inside the opening product-form tag
<div class="w3-product-options" data-product-id="{{product.id}}" data-tags="{{ product.tags | join: ", " }}"></div>
Update! Dawn has been recently updated. An additional step is now required: Remove the word "disabled" from the hidden field just below where you pasted your snippet.
Next, The Dawn theme has some Javascript/AJAX programming that conflicts with the functionality of Product Options app. In order for Product Options to work correctly we need to prevent Dawn from executing its code. We do this by changing the product-form tag.
Remember to change both, the opening and closing tag,
Change the opening tag from <product-form class="product-form"> to <product-form-w3 class="product-form">
Change the closing tag from </product-form> to </product-form-w3>
Lastly, press the save button to save the file.
Step 3: Show the selected options in the cart page
Search for the main-cart-items.liquid section in the left menu and open it.
Scroll down to around line #36 and look for the line {%- for item in cart.items -%}. This is the beginning of the loop that displays the items that are currently in the cart.
Next we need to add a snippet to the item row's class. Copy and paste the snippet below and place it inside the class of the <tr>. Make sure it is inside the double quotes (") of the class
{% render 'w3-product-options', item: item, step:'item_row_class' %}
Finally, we need to add the last snippet where the product price is shown in the cart.
scroll down to around line #184 and look for the html tag:
<div class="cart-item__price-wrapper medium-up">
copy and paste the following snippet just before the closing </div> tag
{% render 'w3-product-options', item: item, step:'money_line' %}
Once you have made added these two snippets, press the save button to save the file.
This completes the installation. If you have any questions feel free to reach out.