Wholesale Gorilla
Simple. Powerful.

Do it yourself

Installation

 

Note: Manually completing the install process requires a solid understanding of Liquid, CSS, and HTML.  If you are comfortable with editing code in Shopify feel free to finish the setup yourself, otherwise please wait for us to finish the install process for you.   

overview

Wholesale Gorilla uses javascript to update the html in your store when wholesale customers are logged in to your website.  In order to know where prices are displayed we need to add the appropriate CSS selectors and html tags to your theme.

Part 1: Prepare Your Theme.

Make sure you have enabled Customer Accounts for your store.  Navigate to Settings > Checkout and under Customer Accounts make sure Accounts are optional or Accounts are required is selected.

Navigate to Online Store, and create a backup for your theme by clicking Actions > Duplicate. Add Pre-WSG-Backup to the end of your duplicated theme.

Next in your current theme click Customize to open your theme options.  

Change the following settings as appropriate (some or all may not apply to your theme):

  • Turn off modal cart: This is usually found under Theme Settings > Cart
  • Turn off additional checkout buttons: This is usually found under Theme Settings > Cart
  • Turn off Quick View on collection pages: If your theme contains modal pop-ups for detailed product views on a collection page they need to be disabled.  This is usually found under Collection Page

Note: it is possible to keep these settings enabled for retail customers who are not logged in to your site.  Contact us for more information.

Part 2: Edit your Theme's Code

Navigate back to Online Store.  For your current theme click Actions > Edit Code

Step 1: Update theme.liquid

From the Layouts directory, open the theme.liquid file and add this right before the </head> tag:

{% include 'wsg-header' %}

Save.

Step 2: edit the cart template

From the Templates directory, open cart.liquid.  

If you have a sectioned theme the code for your cart page will be in a different file specified in cart.liquid, navigate to this file.  Example for sectioned themes:

Capture6.PNG

Find where the main for loop that displays the items in your cart begins: {% for item in cart.items %} and add the following directly below this line:

<div class="wsg-collections-list-{{item.id}}" style="display:none"> 
   {{item.product.collections | json}}
</div>
<div class="wsg-product-tags-{{item.id}}" style="display:none">
   {{item.product.tags | json}}
</div>
Capture7.PNG

Find where the item price is displayed: {{ item.price | money }} and wrap it in the following span: 

<span class='wsg-item-price_{{item.id}}'>
Capture8.PNG

Some themes don’t display the item price in the cart.  If your theme doesn’t you can skip this step.

Find the container where the line item price is displayed for products in the cart {{ item.line_price | money }} and add the following class to the container:

wsg-item-price_{{item.id}}

Note: Not all themes display a line price in the cart.  If your theme doesn’t have a line price add the following directly after the container holding the item price:

<span class='wsg-line-price_{{item.id}}' style='visibility: hidden;'></span>

Next add the ship partial snippet where you would like the ship partial/complete message to appear.  This is usually put in the cart footer directly above the checkout button:

{%include 'wsg-ship-partial'%}

Add the following class to the container holding {{ cart.total_price | money }} or wherever the cart subtotal is displayed (usually a span):

wsg-cart-subtotal
Capture10.PNG

Add the following class to the input that is the Checkout or Submit button that sends the user to the checkout page, this can be an input or button with a type=’submit’

wsg-checkout-main
Capture11.PNG

If your cart contains an input for cart notes, add the following class to the input used to enter cart notes (usually a <textarea>):

wsg-note

At the very bottom of the file add:

{%include 'wsg-cart'%}

Optional: If you would like to link to the Quick Order Form on your cart page add the add the following where you would like the link to appear (typically at the top of the file):

   {% if customer.tags %}
        <div id='wsg-spof-link' style='text-align: center; font-size: 1.4em;'>
         </div>
   {% endif %}  

Save.

Step 3: Edit the Product Template

Under the Templates directory, open product.liquid.  If you are using a sectioned theme, you will see a message directing you to the main product template in the Sections directory, if so open this template.  You should be viewing all of the code used to display a product page on your site.

At the very top of this file add the following:

<script>
 wsgRunProduct = true;
</script>

Find the container enclosing the liquid that renders the product’s price - usually a span {{ current_variant.price | money }} 

Wrap enclosing tag in the following span:

<span class='wsg-price-{{product.id}}'>
.....
</span>

It should now look something like:

Captureprice.PNG

Wrap any more renderings of {{ current_variant.price }} in this span as well.  You can ignore anything that is visually hidden or isn’t going to be rendered on screen.

Note: Some themes use a snippet to render the product price.  If so, wrap the include statement for the snippet in this span.  For example:

Capture1.PNG

If the product’s compare at price is displayed in this snippet you can skip the next step.

Find the liquid statement rendering the compare_at_price.  Something similar to {{ current_variant.compare_at_price | money }} and wrap it in the following span:

<span class='wsg-compare-at-price'>
Capture2.PNG

Next find the <select> tag used for selecting the product’s variants and add the following class to the tag:

wsg-variant-selector

If your theme uses any other means of changing the currently selected variant add the following class to any <input> that would change the currently selected variant on the page:

wsg-option-click

Note: This will not apply to most themes, but some custom themes may use radio or other buttons to change a product’s currently selected variant.

Right before the product description {{ product.description }} add the following:

 <div id='wsgStockData'>{% capture wsgStockData %}{% for variant in product.variants %}"{{variant.id}}":{"stock":{{variant.inventory_quantity}},"policy":"{{variant.inventory_policy}}", "shipDate":"{{ variant.next_incoming_date | date: "%m/%d" }}" },{% endfor %}{% endcapture %}</div>
<script>
     var wsgStockData = {{wsgStockData | json}};
</script>
<div><p id='wsg-backordered-msg'></p></div>

Save.

Most themes will only have one product template, but some custom themes may have more.  Repeat the above steps for any other product templates in your shop.

Step 4: Edit Collection templates

Under Templates open collection.liquid.  If you are using a sectioned theme this file will refer you to the appropriate file in the Sections directory that contains the contents of collection template, open this file.   You should be viewing all of the code used to render a collection view in your shop.

At the very top add:

<script>
   wsgRunCollection = true;
</script>

In order to add selectors to the appropriate elements, we need to find where the product’s price is rendered in a collection view.  The price is a liquid tag that often looks like: {{ product.price | money }}

It’s possible this bit of code is in your collection template file, however most themes place it in a snippet.  In Shopify themes this is often called product-grid-item.liquid, product-list-item.liquid, or product-thumbnail.liquid.  An easy way to find the name of this snippet is to first find the main for loop used to cycle through products in the collection, as the product item snippet is usually included early on in the loop.

Capture3.PNG

Open the appropriate file containing the product details (if necessary), find where the price is displayed  {{ product.price | money }} and warp it in the following span:

<span class="wsg-price-{{product.id}}">
Capture4.PNG

Note: As with the product page edit we completed earlier, if your theme uses a snippet to display the product price here, wrap the include statement in this span.  If the compare-at-price is also in this snippet you can skip this next step.

Find the liquid code that renders the compare-at-price {{ product.compare-at-price | money }} and wrap it in the same span:

<span class="wsg-price-{{product.id}}">
Capture5.PNG

Repeat the last two steps for any other instances of {{ product.price | money }} and {{ product.compare-at-price | money }} in the file.  You can ignore any elements that are not displayed or are visually hidden.

Lastly, at the bottom of the file add:

<span class='wsg-collection-item' id='wsg-prod-id-{{product.id}}' ><span class='wsg-prod-data' style='display:none'>{{product | json}}</span></span>     
<span class='wsg-collections-data' style='display:none'>{{product.collections | json}}</span>

Save.

Note:  Some themes use more than one product item snippet to render a collection view.  For example several Shopify themes use a snippet called product-grid-item.liquid and product-list-item.liquid to display collections depending on a user’s settings.  Repeat the above steps for all product item snippets your theme uses. Generally they will all be included using a conditional statement in your collection template.

If your theme uses any other collection templates make sure to repeat these steps for any additional collection templates you may have (usually this only applies to custom themes).  


Step 5: Activate your  Account

Navigate to: https://your-shopify-domain.myshopify.com/a/wsg/proxy/install-complete

This will activate your account with Wholesale Gorilla and redirect you to your store's app page.  Open Wholesale Gorilla to start using the app.

You’re all done!  We recommend using the Getting Started Checklist for a quick overview on making wholesale pricing rules and using the features of the app.  Don't hesitate to reach out with any questions.