Skip to main content
All CollectionsWholesale BearGeneral info
How to open the app through a custom page + button
How to open the app through a custom page + button
Mollie Herbert avatar
Written by Mollie Herbert
Updated over a week ago

In this article, we'll show you how to open the wholesale list through a non floating page.

It might get a bit technical, but hang in there!

Step 1: Setting up a wholesale page

We will create a dedicated page for wholesale customers.

(1) Open your Shopify admin > Online Store > Pages

(2) Click "Add Page"

Step 2: Setting up the button and texts

(1) In the content box, click "Show HTML"

(2) Add the following code inside the content box:

<p>Are you a wholesale customer? If so, please login to your account. Once you're logged in, click the button below to open the products list</p>

<button class="mybutton" onclick="myFunction()">Open Wholesale List</button>



box-shadow:inset 0px -3px 7px 0px #29bbff;

background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);



border:1px solid #0b0e07;






padding:9px 23px;


text-shadow:0px 1px 0px #263666;




function myFunction() {



} else {

window.location.href = "account/login"



Please note:

-The <p> element stands for paragraph.

- The <button> element defines the button

- through the <style> tag, you can adjust the button styling (you can also do the same for the paragraph)

- The script tag is in charge of calling the function that opens the wholesale list (as mentioned here: Wholesale JS SDK


(3) Save your changes!

Step 3: Link the page to your navigation menu

(1) Go to Online Store > Navigation

(2) Add a link inside any menu to your new page

Step 4: Test!

(1) Visit your storefront

(2) Go to your new wholesale page

(3) Click the button

Step 5 (LAST STEP): Hiding the floating button

You don't have to hide the floating button, but it's definitely possible.

(1) Open Wholesale Bear > click the advanced tab

(2) Inside the custom CSS input box, add the following code:

.WholesaleButton-module__fadein{display: none !important;}

.WholesaleButton-module__pulse{display: none !important;}

Like so:

(3) Save your changes

You're all set!

Did this answer your question?