I want to change the part in this image, how can I do it in terms of design,it is very bad like this

[DenaHome]

I want to change my login and register page like this

But I want to set it this way, I have examined a few sites here and they have done so, can you help me, is this an application?

[rajweb · Accepted solution]

Hey @DenaHome ,

To improve the login and registration pages on your Shopify site and make them look more professional and modern, you can follow these steps. Here’s how you can create a cleaner, more centered login box similar to the second example:

1. Add Custom CSS for Centered Design:

Use CSS to center the login box and give it a modern look with rounded corners, shadows, and cleaner spacing.

/* Container to center the login form */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #f8f8f8; /* Light grey background */
}

/* Login form box styling */
.login-box {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    width: 100%;
}

/* Input and button styling */
.login-box input[type="email"], .login-box input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-top: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.login-box button {
    width: 100%;
    padding: 10px;
    margin-top: 1rem;
    background-color: #004c3f; /* Dark green for button */
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
}

/* Link styling */
.login-box a {
    display: block;
    margin-top: 0.5rem;
    text-align: center;
    color: #004c3f; /* Dark green */
}

In your Shopify theme's CSS file, add this CSS under assets/theme.css or an equivalent file.

2. HTML Structure for Login Form:

Use an HTML structure that places the form in the center of the screen, with an easy-to-read layout. In your Shopify Liquid file (login.liquid or similar), update the form structure to something like:

<div class="login-container">
    <div class="login-box">
        <h2>Log in</h2>
        <form action="/account/login" method="post">
            <input type="email" name="customer[email]" placeholder="Email" required>
            <input type="password" name="customer[password]" placeholder="Password" required>
            <button type="submit">Continue</button>
            <a href="/account/recover">Forgot your password?</a>
            <a href="/account/register">Create account</a>
        </form>
    </div>
</div>

This code provides a simple form layout where users can enter their email and password, with links for password recovery and account creation.

3. Customize Shopify Liquid Template for Login/Register

-Go to Online Store > Themes > Actions > Edit code in your Shopify admin.

-Look for the login.liquid file or any custom login/register file you’re using.

-Replace or add the HTML and CSS code in the corresponding file for your login page.

4. Consider Using a Shopify App:

If you need advanced customization options like social login (Google, Facebook) or two-factor authentication, consider using a Shopify app for login customization, such as:

-Customer Account Concierge

-Flits

-Growave

These apps offer enhanced login functionality and additional styling options without requiring custom code.

With these changes, your login page should appear more aligned with modern design practices.

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[DenaHome]

I didn't understand exactly which files to replace them with, I wrote the login page you posted to the custom css from the edit section, but it said that I exceeded 500 characters and nothing changed.