How To Edit Coming Soon or Password Page in Shopify

Want to customize your Shopify store’s coming soon or password page without using an app? This tutorial provides a step-by-step guide on how to edit these pages directly in your Shopify admin. Learn how to create a professional and engaging landing page that reflects your brand.

By customizing this page, you can maintain a consistent brand image and keep your customers interested while your store is under construction or password-protected.

Create the Section

Create new section with the following code and goto Online Store > Customize > Password Page and add the new “Coming Soon” section

<section id="coming-soon" class="coming-soon-section">
  <div class="container">
    <h1>{{ section.settings.heading }}</h1>
    <p>{{ section.settings.subheading }}</p>
    {% if section.settings.show_countdown %}
      <div id="countdown">
        <span id="days"></span>
        <span id="hours"></span>
        <span id="minutes"></span>
        <span id="seconds"></span>
      </div>
    {% endif %}
      {%- form 'storefront_password', class: 'password-form' -%}
              <div class="password-field field{% if form.errors %} password-field--error{% endif %}">
                <input
                  type="password"
                  name="password"
                  id="Password"
                  class="field__input"
                  autocomplete="current-password"
                  {% if form.errors %}
                    aria-invalid="true"
                    aria-describedby="PasswordLoginForm-password-error"
                  {%- endif -%}
                  placeholder="{{ 'general.password_page.login_form_password_placeholder' | t }}"
                >
                <label class="field__label" for="{{ 'general.password_page.login_form_password_label' | t }}">
                  {{- 'general.password_page.login_form_password_placeholder' | t -}}
                </label>
                {%- if form.errors -%}
                  <div id="PasswordLoginForm-password-error" role="status">
                    <span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
                    <span class="form__message">
                      <span class="svg-wrapper">
                        {{- 'icon-error' | inline_asset_content -}}
                      </span>
                      {{ 'general.password_page.login_form_error' | t -}}
                    </span>
                  </div>
                {%- endif -%}
              </div>
              <button name="commit" class="password-button button button--outline">
                {{ 'general.password_page.login_form_submit' | t }}
              </button>
            {%- endform -%}
            <small class="password__footer-text">{{ 'general.password_page.admin_link_html' | t }}</small>
  </div>
</section>

<style>
  .coming-soon-section {
    text-align: center;
    padding: 50px 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%);
    z-index: 9999; /* Ensure it's on top */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .coming-soon-section h1 {
    margin-bottom: 20px;
    font-size: 72px !important;
    background: -webkit-linear-gradient(#eee, #333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .coming-soon-section p {
    font-size: 1.5rem;
    margin-bottom: 40px;
    font-weight: bolder;
  }
  
  @media (max-width: 768px) {
    .coming-soon-section h1 {
      font-size: 25px !important;
    }
    
    .coming-soon-section p {
      font-size: 2.5rem !important;
    }
  }
  
  #countdown {
    font-size: 2rem;
    font-weight: bold;
    color: white;
    background: linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%);
    width: min-content;
    display: flex;
    justify-content: center;
    margin: auto;
    align-items: center;
    padding: 20px;
    border: 2px solid #000;
    border-radius: 10px;
    background-color: #f9f9f9;
  }
  
  .countdown-unit {
    display: inline-block;
    padding: 10px;
    border: 2px solid #000; /* Black border */
    border-radius: 5px; /* Rounded corners */
    margin: 0 5px; /* Spacing between units */
    background-color: black; /* Light background color for contrast */
  }
</style>


<script>
  // Parse countdown date from Liquid variable
  var countDownDate = new Date("{{ section.settings.countdown_date }}T00:00:00").getTime();
  console.log("Countdown Date:", new Date(countDownDate).toLocaleString());

  var x = setInterval(function() {
    var now = new Date().getTime();
    var distance = countDownDate - now;

    // Calculate days, hours, minutes, and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Display the result in the respective elements
    if (distance > 0) {
      document.getElementById("days").innerHTML = 
        "<span class='countdown-unit'>" + days + "d </span>";
      document.getElementById("hours").innerHTML = 
        "<span class='countdown-unit'>" + hours + "h </span>";
      document.getElementById("minutes").innerHTML = 
        "<span class='countdown-unit'>" + minutes + "m </span>";
      document.getElementById("seconds").innerHTML = 
        "<span class='countdown-unit'>" + seconds + "s </span>";
    } else {
      clearInterval(x);
      document.getElementById("countdown").innerHTML = "EXPIRED";
    }
  }, 1000);
</script>

        
{% assign scheme1 = settings.color_schemes | first %}
{%- if section.settings.color_scheme == scheme1 -%}<hr>{%- endif -%}

{% schema %}
{
  "name": "Coming Soon",
  "settings": [
     {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Our Store is Coming Soon"
    },
    {
      "type": "text",
      "id": "subheading",
      "label": "Subheading",
      "default": "Stay tuned for something amazing!"
    },
    {
      "type": "checkbox",
      "id": "show_countdown",
      "label": "Show Countdown",
      "default": true
    },
    {
      "type": "text",
      "id": "countdown_date",
      "label": "Countdown Date (YYYY-MM-DD)",
      "default": "2024-12-31"
    }
  ],
  "presets": [
    {
      "name": "Coming Soon",
      "category": "Custom"
    }
  ]
}
{% endschema %}