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>
<style>
.mybutton{
box-shadow:inset 0px -3px 7px 0px #29bbff;
background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
background-color:#2dabf9;
border-radius:3px;
border:1px solid #0b0e07;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
padding:9px 23px;
text-decoration:none;
text-shadow:0px 1px 0px #263666;
}
</style>
<script>
function myFunction() {
if(ShopifyAnalytics?.meta?.page?.customerId){
__ConversionBearWholesaleSDK.openMainPage();
} else {
window.location.href = "account/login"
}
}</script>
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
Result:
(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!