Password/Coming soon page customization

[Hesepim]

Hello everyone, I would like to customize the password/coming soon page of my store. Could you please suggest a good video or provide instructions on how I can do this? Since I’m a quick learner, a video would also be helpful if things can't be done directly. Thanks!

[anupam1607 · Accepted solution]

He @Hesepim 
In the theme code editor, look for a file named password.liquid under the Templates section. If your theme doesn’t have it, you might find it in the Sections folder. You can also create or edit it manually. In the password.liquid file, you can modify the HTML, CSS, and Liquid code to suit your design preferences. For example, you can:

• Change the background image.
• Add custom text (like a brand message).
• Style the email sign-up form.
• Add countdown timers, banners, or logos

<div class="password-page" style="background: url('{{ 'your-background-image.jpg' | asset_url }}') no-repeat center center; background-size: cover;">
  <div class="password-container">
    <h1>Our Store is Coming Soon!</h1>
    <p>We're working hard to bring you something amazing. Stay tuned!</p>
    <form method="post" action="/password">
      <input type="email" placeholder="Enter your email" name="email" id="Email">
      <input type="submit" value="Notify Me">
    </form>
  </div>
</div>

 .password-page {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }
  .password-container {
    text-align: center;
  }
  input[type="email"], input[type="submit"] {
    padding: 10px;
    margin: 10px;
    font-size: 16px;
  }

Bonus point here’s a good video tutorial to walk you through customizing the password page: 

[anupam1607 · Accepted solution]

He @Hesepim 
In the theme code editor, look for a file named password.liquid under the Templates section. If your theme doesn’t have it, you might find it in the Sections folder. You can also create or edit it manually. In the password.liquid file, you can modify the HTML, CSS, and Liquid code to suit your design preferences. For example, you can:

• Change the background image.
• Add custom text (like a brand message).
• Style the email sign-up form.
• Add countdown timers, banners, or logos

<div class="password-page" style="background: url('{{ 'your-background-image.jpg' | asset_url }}') no-repeat center center; background-size: cover;">
  <div class="password-container">
    <h1>Our Store is Coming Soon!</h1>
    <p>We're working hard to bring you something amazing. Stay tuned!</p>
    <form method="post" action="/password">
      <input type="email" placeholder="Enter your email" name="email" id="Email">
      <input type="submit" value="Notify Me">
    </form>
  </div>
</div>

 .password-page {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }
  .password-container {
    text-align: center;
  }
  input[type="email"], input[type="submit"] {
    padding: 10px;
    margin: 10px;
    font-size: 16px;
  }

Bonus point here’s a good video tutorial to walk you through customizing the password page: 

[topnewyork · Accepted solution]

Hi @Hesepim , 

And

And

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!