Guide: Customising Your Shopify Wholesale Login Page Template
Phase 1: Create the New Template File
Access Theme Code:
- Log in to your Shopify Admin dashboard.
- Navigate to Online Store > Themes.
- Find the theme you want to edit (usually your current, published theme).
- Click the "..." (three dots) button next to the theme name.
- Select Edit code from the dropdown menu.
Add a New Template:
- In the code editor, look at the left-hand sidebar which lists theme files. Find the Templates directory.
- Click on Add a new template.
- A pop-up window will appear:
- In the first dropdown ("Create a new template for"), select page.
- Ensure the template type is liquid (this is usually the default).
- In the "File name" field, enter a descriptive name for your template. Crucially, do not use spaces or special characters. A good name would be
wholesale-login
. - Click Create template or Done.
Add Your Custom Code:
- The code editor will now open your newly created file (e.g.,
wholesale-login.liquid
). - This is where you paste the specific Liquid code for your desired wholesale login page design.
- You can download the raw code in the attached file loginpage.liquid or copy from below.
- The code editor will now open your newly created file (e.g.,
{{ 'customer.css' | asset_url | stylesheet_tag }} {% if customer %} <script> window.location.href = "{{ routes.account_url }}"; </script> {% else %} <div id="trade-login-section"> <h2>Login below to get instant access to your trade account.</h2> {%- form 'customer_login', novalidate: 'novalidate' -%} <label for="email">Email:</label> <input type="email" id="email" name="customer[email]" placeholder="Enter your email" value="{{ form.customer.email }}" required > {% if shop.customer_accounts_enabled and shop.customer_accounts_optional == false %} <label for="password">Password:</label> <input type="password" id="password" name="customer[password]" placeholder="Enter your password" required> {% endif %} <div class="form-actions"> <button type="submit">Log In</button> {% if shop.customer_accounts_enabled and shop.customer_accounts_optional == false %} <a href="{{ routes.password_recovery_url }}" id="forgot-password-link">Forgot Password?</a> {% endif %} </div> {%- endform -%} <h3>Interested in opening a wholesaler account?</h3> <p>Click on the button below and leave your details via the registration form.</p> <a href="/pages/wholesale-signup" id="registration-button">Open Wholesale Account</a> </div> <style> body { font-family: Arial, sans-serif; background-color: #f9f9f9; margin: 0; padding: 0; color: #333; } #trade-login-section { max-width: 500px; margin: 50px auto; padding: 30px; background: #fff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); text-align: center; } h2, h3 { color: #444; margin-bottom: 20px; } form { display: flex; flex-direction: column; gap: 15px; text-align: left; } label { font-weight: bold; color: #444; } input { padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; width: 100%; box-sizing: border-box; } input:focus { border-color: #007bff; box-shadow: 0 0 4px rgba(0, 123, 255, 0.3); outline: none; } .form-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } button { background-color: #007bff; color: #fff; border: none; border-radius: 4px; padding: 10px 20px; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #0056b3; } #forgot-password-link { color: #007bff; text-decoration: none; font-size: 14px; } #forgot-password-link:hover { text-decoration: underline; } #registration-button { display: inline-block; margin-top: 20px; padding: 10px 20px; background-color: #28a745; color: #fff; text-decoration: none; border-radius: 4px; font-size: 16px; transition: background-color 0.3s ease; } #registration-button:hover { background-color: #218838; } p { font-size: 14px; color: #666; } </style> <script> document.addEventListener("DOMContentLoaded", function() { // Redirect to the Forgot Password page when the link is clicked const forgotPasswordLink = document.getElementById("forgot-password-link"); if (forgotPasswordLink) { forgotPasswordLink.addEventListener("click", function(event) { event.preventDefault(); window.location.href = "{{ routes.password_recovery_url }}"; }); } // Redirect to the Wholesale Account creation page when the button is clicked const wholesaleButton = document.getElementById("registration-button"); if (wholesaleButton) { wholesaleButton.addEventListener("click", function(event) { event.preventDefault(); window.location.href = "/pages/wholesale-signup"; }); } }); </script> {% endif %}
- Click Save in the top right corner to save your changes to the
wholesale-login.liquid
file.
Phase 2: Assign the Template to Your Wholesale Login Page
Navigate to Pages:
- Exit the code editor and go back to your main Shopify Admin menu.
- Navigate to Online Store > Pages.
Select or Create the Page:
- If you already have a page designated for wholesale login (e.g., a page titled "Wholesale Portal" or "Wholesale Login"): Find it in the list and click on its title to edit it.
- If you need to create a new page: Click Add page. Give it a relevant title (e.g., "Wholesale Login"). You can add any introductory content in the main content editor if desired.
Assign the New Template:
- On the page editor screen (for either the existing or new page), look for the Theme template section, usually located on the bottom right.
- Click the dropdown menu under "Theme template". It might currently say
Default page
. - Select the custom template you created in Phase 1. It will be listed with the name you gave it (e.g., wholesale-login).
- Click Save.
Phase 3: Test
- View the Page:
- Go back to Online Store > Pages.
- Find your Wholesale Login page.
- Click View page to see how it looks live on your storefront.
- Test the login functionality to ensure it works as expected.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article