Edit login page text

[amoss-merch]

Hi guys, I'm looking for some coding help to edit the text on this page. My website is focussed around a membership where you need to create an account before a purchase. I would like to change the main text to 'Login or create an account to continue'. I know it has the create an account link below but I would like it to be on the main body of text too

I'm using The Ride theme

Thanks

[topnewyork]

Hello,
Please share "Store URL"
Thanks

[rajweb]

Hey @amoss-merch ,

To update the text in the Ride theme, you'll need to edit the relevant Liquid template or localization file in your Shopify theme. Here's how you can proceed:

1. Online Store

2. Themes

3. Edit Code

4. Look for the login.liquid or similar file under Sections or Templates. Sometimes, this text might also be found in a snippet (e.g., customer-login.liquid).

5. Add this code under the </body>

 <div class="container">
        <div class="login-box">
            <h1>Login or create an account to continue</h1>
            <button class="btn btn-primary">Sign in with shop</button>
            <div class="divider"><span>or</span></div>
            <input type="email" placeholder="Email">
            <input type="password" placeholder="Password">
            <a href="#" class="text-left">Forgot your password?</a>
            <button class="btn btn-secondary">Sign in</button>
            <a href="#">Create account</a>
        </div>
    </div>

and add CSS:

  <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #1a1a1a;
            color: #ffffff;
            height: 100%;
        }
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 20px;
        }
        .login-box {
            width: 100%;
            max-width: 320px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        h1 {
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 20px;
        }
        .btn {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .btn-primary {
            background-color: #6C5CE7;
            color: white;
        }
        .btn-primary:hover {
            background-color: #5A4FCF;
        }
        .btn-secondary {
            background-color: #EFFF0A;
            color: black;
        }
        .btn-secondary:hover {
            background-color: #D6E600;
        }
        .divider {
            width: 100%;
            text-align: center;
            border-bottom: 1px solid #444;
            line-height: 0.1em;
            margin: 20px 0;
        }
        .divider span {
            background: #1a1a1a;
            padding: 0 10px;
        }
        input {
            width: 100%;
            padding: 12px;
            margin-bottom: 10px;
            background-color: #2a2a2a;
            border: 1px solid #444;
            border-radius: 5px;
            color: white;
        }
        a {
            color: #EFFF0A;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        .text-left {
            align-self: flex-start;
        }
    </style>

Result:

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

[PaulMartin]

This "solves" his problem but it actually doesn't and worse, it introduces new problems which is terrible. Implementing this breaks his current setup and no longer allows customers to log in or sign up. 👎

[PaulMartin · Accepted solution]

Hey Amoss,

You can easily change the text without touching code via Edit Theme Content.

Just search for Log In Page, then Title. That's the one that changes the title in the login page for Ride Theme

[Dan-From-Ryviu]

Hi @amoss-merch 

You may can try to edit texts from Online Store > Themes > click "..." in the current theme > Edit default them content. 

[steve_michael2]

Hi @amoss-merch 

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!