Overview:
This tutorial will instruct you on adding the accessories widget to your product page for the most 2.0 themes. If at any point you have trouble with this installation, please feel free to reach out to us by submitting a support ticket by emailing support@w3trends.com
Installation:
There are 2 methods for manually installing the accessories widget depending on your theme. The first uses the Custom Liquid theme block that is part of most 2.0 themes and is the preferred manual installation method. The second method requires editing your theme code directly.
Method 1: Custom Liquid Theme Block (preferred method)
Step 1: Customize your 2.0 theme
- In your Shopify admin, navigate to your theme library
- Select the Customize button next to the 2.0 theme you wish to customize
Step 2: Navigate to your product page
- Use the Navigation drop down at the top of the page and select Default Product
Step 3: Add block to product page
- Locate the section in the menu where you would like to add the snippet and select the Add Block button to add a new block to your product page.
- Look for the Custom Liquid option under the Theme Blocks and select it. This will add a Custom liquid block to your page.
- Once the Custom liquid block is added to your theme section, select it to edit the content and then paste in the following snippet
<div id="w3-product-accessories" data-product-handle="{{ product.handle }}">
<div id="w3-money-format" style="display:none;">{{ shop.money_format }}</div>
</div> - You can change the order of the blocks by dragging them to the your desired order. Remember to press save when you are done customizing your theme
Method 2: Edit Theme files directly
Step 1: Locate/Open your theme code files
- In your Shopify Admin, select Online Store from the vertical navigation menu on the left.
- 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.
- Under the Sections folder on the left, locate and click main-product.
Step 2: Paste the snippet
- You will want to insert the Product Accessories widget below your add to cart button(s). To locate press ctrl+f on your keyboard. A little search box will appear. Inside the box, type in "submit."
- In the screen shot below is your add to cart button outlined in red.
- Place your cursor just after the closing div. Select the enter key.
- You are going to copy and paste the Product Accessories widget between the closing div and endform
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!
- Be sure to save after you've added this snippet!
- Your widget will now display on products that have accessories assigned to them. Be sure to add some accessories before viewing a product page.
