> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Login

> Customer login page template with optional sidebar image and Shop Login button

The Main Login template displays the customer login page at `/account/login` with email/password login form, optional sidebar image, and Shop Pay login button for faster checkout. Customize the login experience with branded imagery and streamline authentication with Shop Login for returning customers. Use this template to create a welcoming entry point that balances security with convenience while reinforcing your brand identity through visual elements.

***

## Template Settings

<AccordionGroup>
  <Accordion title="Image Aside" icon="image">
    Add decorative image to login page sidebar.

    * **Type:** Image picker
    * **Location:** Displays on left or right side of login form
    * **Optional:** Leave blank for form-only layout

    **Recommended Image:**

    * Minimum size: 800x1200px
    * Aspect ratio: Portrait (2:3 or 3:4)
    * Brand imagery, lifestyle photos, or promotional graphics
    * File size: Under 500KB (compress for performance)

    <Tip>
      Use brand imagery or lifestyle photos that reinforce trust and welcome returning customers.
    </Tip>
  </Accordion>

  <Accordion title="Enable Shop Login Button" icon="bag-shopping">
    Display Shop Pay login button for one-click authentication.

    * **Type:** Checkbox
    * **Default:** Disabled

    **About Shop Login:**

    * Allows customers to log in with Shop Pay account
    * One-click authentication (no password needed)
    * Faster login for Shop users
    * Syncs with Shop app
    * Streamlines checkout process

    <Note>
      Shop Login is part of Shopify's Shop Pay ecosystem. Customers with Shop accounts can log in instantly without remembering store-specific passwords.
    </Note>

    <Warning>
      Enable this only if your store uses Shop Pay for checkout. Verify Shop Pay is activated in **Shopify Admin → Settings → Payments**.
    </Warning>
  </Accordion>

  <Accordion title="Color Scheme" icon="palette">
    * Select from available theme color schemes
    * **Default:** scheme-1
  </Accordion>

  <Accordion title="Spacing" icon="arrows-up-down">
    * **Top Spacing**: 0, 1, 2 (default), 4, or 6
    * **Bottom Spacing**: 0, 1, 2 (default), 4, or 6
  </Accordion>

  <Accordion title="Borders" icon="border-top-left">
    * **None** (default)
    * **Top Border**
    * **Bottom Border**
    * **Both Borders**
  </Accordion>
</AccordionGroup>

***

## Login Page Elements

The login page automatically includes:

<AccordionGroup>
  <Accordion title="Page Title" icon="h1">
    * "Login" or "Sign In" heading
    * H1 for SEO
    * Centered at top of page
  </Accordion>

  <Accordion title="Email Field" icon="envelope">
    * Email address input
    * Required field
    * Validation for email format
    * Autocomplete enabled
  </Accordion>

  <Accordion title="Password Field" icon="lock">
    * Password input (obscured)
    * Required field
    * Show/hide password toggle (theme-dependent)
    * Remember me checkbox (optional)
  </Accordion>

  <Accordion title="Forgot Password Link" icon="key">
    * "Forgot your password?" link
    * Redirects to `/account/reset`
    * Triggers password reset email
  </Accordion>

  <Accordion title="Login Button" icon="right-to-bracket">
    * Primary action button
    * Submits login form
    * Loading state on click
  </Accordion>

  <Accordion title="Create Account Link" icon="user-plus">
    * "Create account" or "Sign up" link
    * Redirects to `/account/register`
    * For new customers
  </Accordion>

  <Accordion title="Return Policy Link" icon="arrow-left">
    * "Return to Store" or "Continue Shopping"
    * Redirects to homepage or previous page
    * Allows browsing without login
  </Accordion>
</AccordionGroup>

***

## Layout Variations

<CardGroup cols={2}>
  <Card title="With Sidebar Image" icon="images">
    **Structure:**

    * Two-column layout
    * Image on left (50% width)
    * Login form on right (50% width)

    **Best For:**

    * Brand storytelling
    * Visual engagement
    * Premium/lifestyle stores
    * First-time visitors
  </Card>

  <Card title="Form Only" icon="rectangle-list">
    **Structure:**

    * Centered login form
    * No sidebar image
    * Minimalist design

    **Best For:**

    * Fast, no-distraction login
    * B2B or wholesale stores
    * Functional priority
    * Return customers
  </Card>
</CardGroup>

***

## Shop Login Integration

<AccordionGroup>
  <Accordion title="What is Shop Login?" icon="question-circle">
    **Shop Login** allows customers to authenticate using their Shop account instead of store-specific credentials.

    **Benefits:**

    * One-click login (no password typing)
    * Faster checkout with saved Shop data
    * Reduced password fatigue
    * Syncs with Shop mobile app
    * Increased conversion (fewer login barriers)
  </Accordion>

  <Accordion title="Requirements" icon="list-check">
    **To Enable Shop Login:**

    1. Shop Pay must be activated in Shopify Payments
    2. Store must use Shopify Payments
    3. Enable Shop Login in theme settings

    **Verify Setup:**

    * Go to **Shopify Admin → Settings → Payments**
    * Confirm "Shop Pay" is enabled
    * Check "Shop Login" option is available
  </Accordion>

  <Accordion title="User Experience" icon="user-check">
    **Customer Flow:**

    1. Customer clicks "Shop Login" button
    2. Shop login modal appears
    3. Customer enters email or phone
    4. Receives one-time code
    5. Enters code to authenticate
    6. Logged in instantly

    **Advantages:**

    * No password to remember
    * Mobile-optimized (SMS verification)
    * Secure authentication
    * Seamless with Shop app
  </Accordion>
</AccordionGroup>

***

## Best practices

<CardGroup cols={2}>
  <Card title="Image selection" icon="image">
    Use high-quality sidebar images featuring brand imagery, lifestyle photos, seasonal graphics, or promotional content like "Welcome Back!" messages. Ensure good lighting and clarity, match your brand aesthetic, and test mobile appearance where images may hide on small screens.
  </Card>

  <Card title="Shop login strategy" icon="strategy">
    Enable Shop Login for stores with high checkout abandonment rates, mobile-heavy traffic, or where Shop Pay is the primary payment method. Skip it if you're not using Shop Pay, have B2B customers who prefer traditional login, or maintain a custom authentication system.
  </Card>

  <Card title="Security considerations" icon="shield">
    Use HTTPS with SSL certificate, implement rate limiting to prevent brute force attacks, and encourage strong passwords. Monitor suspicious login attempts and set appropriate session timeouts, though Shopify handles core security automatically.
  </Card>

  <Card title="Mobile optimization" icon="mobile-screen">
    Ensure form fields meet minimum 44x44px touch targets and use autocomplete attributes for faster input. Sidebar images typically hide on mobile in stacked layouts, so test on actual iOS and Android devices to verify Shop Login functionality.
  </Card>
</CardGroup>

***

## Use Cases

<CardGroup cols={2}>
  <Card title="Fashion Boutique" icon="shirt">
    Sidebar image showing latest collection, Shop Login enabled for fast checkout
  </Card>

  <Card title="B2B Wholesale" icon="briefcase">
    Form-only layout, no sidebar image, traditional login only
  </Card>

  <Card title="Lifestyle Brand" icon="heart">
    Branded lifestyle image, "Welcome Back" messaging, Shop Login for mobile shoppers
  </Card>

  <Card title="Electronics Store" icon="laptop">
    Product showcase image, both traditional and Shop Login options
  </Card>
</CardGroup>

***

## Related Templates

<CardGroup cols={2}>
  <Card title="Main Register" icon="user-plus">
    Customer registration/signup page template
  </Card>

  <Card title="Main Account" icon="user-circle">
    Customer account dashboard after login
  </Card>

  <Card title="Password Reset" icon="key">
    Forgot password / reset password page
  </Card>
</CardGroup>

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="Shop Login Button Not Appearing" icon="eye-slash">
    **Possible Causes:**

    * Setting not enabled in template
    * Shop Pay not activated
    * Not using Shopify Payments
    * Geographic restrictions

    **Solutions:**

    1. Enable "Shop Login" checkbox in template settings
    2. Verify Shop Pay in **Settings → Payments**
    3. Confirm Shopify Payments is active
    4. Check if Shop Pay is available in your region
  </Accordion>

  <Accordion title="Image Not Displaying" icon="image-slash">
    **Check:**

    * Image uploaded in "Image Aside" setting
    * File format is supported (JPG, PNG, WebP)
    * File size is reasonable (\< 5MB)
    * Browser cache cleared
    * Mobile vs. desktop view (may hide on mobile)
  </Accordion>

  <Accordion title="Login Errors" icon="triangle-exclamation">
    **Common Issues:**

    * "Incorrect email or password" - Verify credentials
    * "Account not found" - Customer may not be registered
    * "Too many attempts" - Rate limiting (wait 15 minutes)
    * Form not submitting - JavaScript errors (check console)
  </Accordion>

  <Accordion title="Redirect Issues After Login" icon="arrow-turn-down-right">
    **Expected Behavior:**

    * Successful login redirects to `/account` (account dashboard)
    * Or returns to previous page (if accessing protected content)

    **If Redirects Fail:**

    * Clear browser cookies
    * Check theme code (may require developer)
    * Verify no conflicting apps
  </Accordion>
</AccordionGroup>

***

## Quick Summary

* **Purpose:** Customer login page template
* **URL:** `/account/login`
* **Key Features:** Email/password form, optional sidebar image, Shop Login button
* **Settings:** Sidebar image, Shop Login toggle, color scheme, spacing, borders
* **Automatically Includes:** Login form, forgot password link, create account link
* **Mobile:** Responsive, sidebar image typically hidden on small screens

<Note>
  Customer accounts must be enabled in **Shopify Admin → Settings → Customer accounts** for login functionality to work.
</Note>