Wholesale Gorilla
Simple. Powerful.

Do it yourself

Installation

 

Manually completing the install process requires an expert understanding of Liquid, CSS, HTML, and JavaScript.  Every store is unique, and the following instructions are necessarily generic. Our Shopify experts can set up all themes free of charge and can then verify proper functionality of Wholesale Gorilla. Please proceed at your own risk.

We highly recommend letting one of our Shopify experts complete the install for you - free of charge!

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.

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

Important: 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 ajax search if applicable.

  • Turn off additional checkout or quick buy 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 usually possible to keep some of these settings enabled for wholesale customers or to at least keep them active for retail customers.  Contact us for more information.

Part 2: Edit your Theme's 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 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.

Directly inside the for loop that cycles through the items in a collection add the code:

{%- comment -%} Wholesale Gorilla: do not delete unless app is uninstalled{%- endcomment -%}

{%- assign wsgTempProd = product -%}{%- assign wsgExclude = false -%}{%- if forloop.first == true -%}{%- assign wsgActive = false -%}{%- assign wsgActiveCustomer = false -%}

{%- include 'wsg-status' wsgStatusAction: 'init' | strip -%}{%- endif -%}{%- if wsgActive -%}{%- include 'wsg-status' wsgStatusAction: 'col-item' | strip -%}{%- endif -%}{%- if wsgExclude -%} {%- continue -%} {%- endif -%}

{%- comment -%} end WSG {%- endcomment -%}

If needed change the line assigning the variable wsgTempProd from product to the name of the element in the loop.

Save.

In wsg-header.liquid find the variable "wsgPriceSelectors" and add the jQuery selectors for the elements that hold the collection prices to the array collectionPrices. For example:

var wsgPriceSelectors = {

productPrice: [""],

collectionPrices: [".price", ".item-price", ".prod-container .amount"]

};

If your theme uses any other collection templates make sure to repeat these steps for any additional collection templates you may have, this includes related products, featured products, etc.  

Step 3: Repeat for the search page

Repeat step 2 for the search page (usually sections/search-template.liquid), but instead add the following right inside the for loop that cycles through items in a search:

{%- comment -%} Wholesale Gorilla: do not delete unless app is uninstalled{%- endcomment -%}

{%- assign wsgTempProd = item -%}{%- assign wsgExclude = false -%}{%- if forloop.first == true -%}{%- assign wsgActive = false -%}{%- assign wsgActiveCustomer = false -%}

{%- include 'wsg-status' wsgStatusAction: 'init' | strip -%}{%- endif -%}{%- if wsgActive -%}{%- if wsgTempProd.object_type == 'product' -%}{%- include 'wsg-status' wsgStatusAction: 'col-item' | strip -%}{%- endif -%}{%- endif -%}{%- if wsgExclude -%} {%- continue -%} {%- endif -%}

{%- comment -%} end WSG {%- endcomment -%}

If needed change the assignment of wsgTempProd from item to the name of the element in the loop.

Add the jQuery selector of the element holding the search price to the same array collectionPrices as in step 2

Step 4: Find selector of product price

Find the jQuery selector for showing the product price on the product page and add it to the wsgPriceSelectors object:

var wsgPriceSelectors = {

productPrice: ["#productPrice .price"],

collectionPrices: [".price", ".item-price", ".prod-container .amount"]

};

Step 5: Update account page

Find the customer account page where a customer lands after they log in (usually "templates/customers/account.liquid") and add the following towards the top of the page (where ever makes sense layout wise)

<div class='wsg-ws-only' style="display: none;"> <div id='wsg-spof-link' style='text-align: center; font-size: 1.4em; margin-top:30px; margin-bottom:20px;'> </div> <div id='wsg-message' style='text-align: center; margin-bottom: 20px;'> <p id='wsg-account-message'> </p> </div> </div> <script> wsgRunProxy = true; </script>


Step 6: 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.