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

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.

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

Attachments (1)

liquid

loginpage.liquid
4.11 KB