Customising Your Shopify Wholesale Login Page Template

Created by Gosia Furmanik, Modified on Tue, 1 Apr at 6:05 PM by Gosia Furmanik


Guide: Customising Your Shopify Wholesale Login Page Template

Phase 1: Create the New Template File

  1. 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.
  2. 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.
  3. 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. 



{{ '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

  1. Navigate to Pages:

    • Exit the code editor and go back to your main Shopify Admin menu.
    • Navigate to Online Store > Pages.
  2. 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.
  3. 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

  1. 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

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article