Theme Installation Guide (old)

<div id="w3-product-accessories" data-product-handle="{{ product.handle }}">
  <div id="w3-money-format" style="display:none;">{{ shop.money_format }}</div>
</div>

TLDR: Add this snippet either above or below the add to cart button on your product.liquid file. Be sure it is within the <form> </form> tag

Overview: 

This tutorial will instruct you on adding the accessories widget to your product page. If at any point you have trouble with this installation, please feel free to reach out to us by submitting a ticket Here.

---

Installation

Step 1: Locate/Open your theme code files

1. In your Shopify Admin, select Online Store from the vertical navigation menu on the left.
   
   
2. For your main theme (the theme at the top of the list), click the "Actions" button in the top right, and then click Edit Code.
   
   
3. Under the Templates folder on the left, locate and click product.liquid.
   
   
4. If your product liquid has a line that says something similar to one of the following, please read below:
   

   1. {% section 'product-template' %}

      For this snippet, your product template will be located under the "Sections" folder on the left, in a file called "product-template.liquid"

   2. {% section 'product' %}

      For this snippet, your product template will be located under the "Sections" folder on the left, in a file called "product.liquid"

   3. {% include 'product-template' %}

      For this snippet, your product template will be located under the "Snippets" folder on the left, in a file called "product-template.liquid"

   4. {% include 'product-form' %}

      If any of your product template files have this snippet, that means your Product Form will be located under the "Snippets" folder on the left, in a file called "product-form.liquid".
5. It is very important to place the Accessories div inside of a Form tag, and if your product template has a reference to the product form file, you will have to place our div inside of that product-form.liquid file.

---

Step 2: Paste the snippet

1. Inside the open liquid file which contains your form tag, you will need to locate a place to insert the accessories widget. The recommended placement is just below the 'Add To Cart' button.
2. To find the add to cart button, hold "ctrl", and press "F", and search for "Submit".
   This should take you right to the add to cart button.
3. Insert the widget code in your desired location within the form tag. You may have to move the widget around inside of the code to get your desired placement on the page.
   
   Product Accessories Widget Code:

   <div id="w3-product-accessories" data-product-handle="{{ product.handle }}">
     <div id="w3-money-format" style="display:none;">{{ shop.money_format }}</div>
   </div>

   
   

---

Step 3: Save!

1. Be sure to save after you've added this snippet!
2. Your widget will now display on products that have accessories assigned to them. Be sure to add some accessories before viewing a product page.

---

Click below link for a visual tutorial: