Page 1 of 2
Login layout
Posted: Fri Jul 31, 2026 9:40 am
by PiLLaO
I'm getting crazy about login layout.
I'm trying to find any not ugly design for desktop.
In my mind the actual design (that I can't make it works) its two columns, because I thing that only column on destkop It is unsightly.
Two columns are:
first column:
up: login_form
down: forgot_password
second column:
up: create_account_link
down: pwa_login (addon)
I need help with ideas or... how you layout your login.php?
Re: Login layout
Posted: Fri Jul 31, 2026 11:28 am
by azpro
I think the two-column idea is fine for desktop, but I would not give all four sections the same visual weight.
The normal login form should remain the primary element. I would use:
**Left column**
* Returning customer heading
* Login form
* Forgot password link directly below the password field
* PWA login below a divider, if it is an alternative login method
**Right column**
* New customer heading
* Short explanation or account benefits
* Create account button
On mobile, both columns should stack, with the login form appearing first.
Something like Bootstrap’s `col-12 col-lg-7` for the login card and `col-12 col-lg-5` for the create-account card usually looks better than two equal-width columns. The login form needs slightly more space, while the create-account section can remain compact.
I would also use two cards with `h-100`, so both columns have the same height on desktop. “Forgot password” probably does not need its own card; it is a secondary action belonging to the login form.
Re: Login layout
Posted: Fri Jul 31, 2026 11:34 am
by azpro
mockup by ChatGPT
Re: Login layout
Posted: Fri Jul 31, 2026 3:42 pm
by ArtcoInc
(If I may suggest ...)
IF you have an existing shop, and IF you have Google analytics running, check to see what your customers use to access your shop ... desktops, laptops, or phones. And, what resolutions your customers are using.
I say this because in my shop, over 95%+ of my customers are accessing my shop from a desktop computer. In my case, using something like your mockup above would work.
But, pay attention as to how the layout would display on a phone (especially if more of your customers access your shop via a phone).
M
Re: Login layout
Posted: Sat Aug 01, 2026 4:36 pm
by ecartz
PWA Login is going to be confusing. It's not actually a login. It's bypassing the login process. "Check out as Guest" or "No Login" would make more sense for new users. As is, PWA won't tell customers that they can use it to avoid creating an account. Particularly combined with Login, which is what they are trying to avoid.
The simplest way would be to turn off Create Account and change the language to "Returning Customers" and "New or Guest Customers". Then always use PWA instead of Create Account. Offer the ability to create an account *after* checkout, before PWA deletes its temporary account.
Re: Login layout
Posted: Mon Aug 03, 2026 7:47 am
by PiLLaO
Thanks all for your answers
@azpro your picture is more or less like it's on my mind, but I can't find the way to make it possible with actual config
The problem it's If I install login, the second module go at the right and the next module go down the first module but with the second module height, In other words seems to be a puzzle.
The only thing that occurs to me is creating new modules that are grouped together.
Re: Login layout
Posted: Mon Aug 03, 2026 7:58 am
by burt
@PiLLaO to get a modular layout like that, you need to look into how the PI Layout modules work (eg on the product_info page). You then need to create a similar system for the Login page.
--
You might instead look at Masonry effect;
https://getbootstrap.com/docs/5.0/examples/masonry/
Re: Login layout
Posted: Mon Aug 03, 2026 9:09 am
by azpro
PiLLaO wrote: ↑Mon Aug 03, 2026 7:47 am
@azpro your picture is more or less like it's on my mind, but I can't find the way to make it possible with actual config
The problem it's If I install login, the second module go at the right and the next module go down the first module but with the second module height, In other words seems to be a puzzle.
ChatGPT gives me this as the skeleton:
Code: Select all
<div class="row g-4 align-items-stretch">
<div class="col-12 col-lg-7">
<div class="card h-100 shadow-sm">
<div class="card-body p-4">
<h1 class="h3 mb-4">
<?= HEADING_RETURNING_CUSTOMER ?>
</h1>
<?= $login_form ?>
<div class="mt-3">
<a href="<?= $forgot_password_link ?>">
<?= TEXT_PASSWORD_FORGOTTEN ?>
</a>
</div>
<?php if (!empty($pwa_login)) { ?>
<hr class="my-4">
<div class="text-center">
<div class="text-muted small mb-3">
<?= TEXT_OR_LOGIN_WITH_PWA ?>
</div>
<?= $pwa_login ?>
</div>
<?php } ?>
</div>
</div>
</div>
<div class="col-12 col-lg-5">
<div class="card h-100 border-primary">
<div class="card-body p-4 d-flex flex-column">
<h2 class="h4">
<?= HEADING_NEW_CUSTOMER ?>
</h2>
<p class="text-muted">
<?= TEXT_NEW_CUSTOMER_INTRODUCTION ?>
</p>
<ul class="mb-4">
<li>Faster checkout</li>
<li>View previous orders</li>
<li>Manage delivery addresses</li>
</ul>
<div class="mt-auto">
<a href="<?= $create_account_link ?>"
class="btn btn-outline-primary w-100">
<?= IMAGE_BUTTON_CONTINUE ?>
</a>
</div>
</div>
</div>
</div>
</div>
Re: Login layout
Posted: Mon Aug 03, 2026 9:09 am
by PiLLaO
@burt I look this option to, but searching in code I find in admin/includes/modules/cfg_modules/cfgm_layout.php
Code: Select all
const GROUP_KEYS = [
'contact_us' => 'MODULE_CONTENT_CU_INSTALLED',
'index' => 'MODULE_CONTENT_I_INSTALLED',
'product_info' => 'MODULE_CONTENT_PI_INSTALLED',
'info' => 'MODULE_CONTENT_INFO_INSTALLED',
];
And thinked that need to touch core
Re: Login layout
Posted: Mon Aug 03, 2026 9:14 am
by burt
Yes, you would need to touch core in that file.
See second paragraph here:
viewtopic.php?p=24084#p24084