thecatmelon
6/6/2015 - 6:21 PM

Make the Password page look like the Opening Soon page one had while still on the Trial plan.

Make the Password page look like the Opening Soon page one had while still on the Trial plan.

Make password page look like the Trial Plan Opening Soon page.md
content_copyfile_download
  • Rendered
  • Source

What you want

So you just signed up for a paid plan, and your password page has lost much of its appeal. It's drab as hell.

You want your password page to look this — no login form, plain, simple:

Or you want to also show a login form + optional message for visitors:

What you need to do

  1. Add a password.liquid template to theme.

  2. Copy+paste to it the appropriate code from either password-without-login.liquid or password-with-login.liquid below.

password-with-login.liquid
content_copyfile_download
{% layout none %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>
      {{ page_title }}
    </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
    <link href="//cdn.shopify.com/s/assets/storefront/opening_soon-0047235063e52e94480831ed70a0cf47.css" media="screen" rel="stylesheet" type="text/css">
  </head>
  <body class="segment-online">
    <p>
      <img alt="Opening soon background image" class="fixed-background" src="//cdn.shopify.com/s/assets/storefront/bg3-6ae2444b704cb18a0ae171791175ebb9.jpg">
    </p>
    <div class="opening-soon">
      <div class="section-heading">
        <h2 class="heading--2">
          {{ shop.name }}
        </h2>
        <div class="section-heading__flair">
          <div class="opening-soon__img-container">
            <!--[if gte IE 9]><!-->
            <img alt="Opening soon" class="opening-soon__img" src="//cdn.shopify.com/s/assets/storefront/opening-soon-a7ee4997d26872c27358c436385f4d88.svg"> <!--<![endif]-->
             <!--[if lte IE 8]>
            <img alt="Opening soon" class="opening-soon__img" src="//cdn.shopify.com/s/assets/storefront/opening-soon-da3d89b28bb5347e9cf8e1cf534a81ec.png" />
          <![endif]-->
          </div>
        </div>
      </div>
      
      <div class="modal-container" id="ModalContainer" style="position: static; opacity: 0.85; padding: 0 0 15px; background-color: #555">
        <div class="modal" role="dialog" aria-labelledby="ModalTitle" style="padding: 30px 30px 0;">
          <div class="modal__content">
  
            {% unless shop.password_message == blank %}
            <h2 class="modal__heading">
              {{ shop.password_message }}
            </h2>
            {% endunless %}
                    
            <h2 class="modal__heading" id="ModalTitle">Enter store using password:</h2>
            {% form 'storefront_password' %}
            {{ form.errors | default_errors }}
            <label class="password-input marketing-input-wrapper" for="password">
              <span class="marketing-label marketing-label--hidden ">
                <span class="visuallyhidden">Password</span>
              </span>
              <input class="marketing-input" name="password" placeholder="Password" type="password" id="password">
            </label>
            <div class="password-submit marketing-input-wrapper">
              <input class="marketing-button marketing-form__button segment-button" name="submit" type="submit" value="Enter">
            </div>
            {% endform %}
            <div class="modal__footer">
              <h4 class="modal__heading heading--4">Are you the store owner?</h4>
              <p>
                <a href="/admin">Log in here</a>
              </p>
            </div>
          </div>
        </div>
      </div>
      
      <div class="opening-soon__footer" style="position: static; padding-bottom: 20px">
        <p>
          This shop will be powered by <a class="opening-soon__link" href="//www.shopify.com" target="_blank" title="Create your own online store with Shopify"><i class="ico ico-shopify-bag"></i><span class="visuallyhidden">Shopify</span></a>.
        </p>
      </div>
    </div>
  </body>
</html>
password-without-login.liquid
content_copyfile_download
{% layout none %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>
      {{ page_title }}
    </title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
    <link href="//cdn.shopify.com/s/assets/storefront/opening_soon-0047235063e52e94480831ed70a0cf47.css" media="screen" rel="stylesheet" type="text/css">
  </head>
  <body class="segment-online">
    <p>
      <img alt="Opening soon background image" class="fixed-background" src="//cdn.shopify.com/s/assets/storefront/bg3-6ae2444b704cb18a0ae171791175ebb9.jpg">
    </p>
    <div class="opening-soon">
      <div class="section-heading">
        <h2 class="heading--2">
          {{ shop.name }}
        </h2>
        <div class="section-heading__flair">
          <div class="opening-soon__img-container">
            <!--[if gte IE 9]><!-->
            <img alt="Opening soon" class="opening-soon__img" src="//cdn.shopify.com/s/assets/storefront/opening-soon-a7ee4997d26872c27358c436385f4d88.svg"> <!--<![endif]-->
             <!--[if lte IE 8]>
            <img alt="Opening soon" class="opening-soon__img" src="//cdn.shopify.com/s/assets/storefront/opening-soon-da3d89b28bb5347e9cf8e1cf534a81ec.png" />
          <![endif]-->
          </div>
        </div>
      </div>
      <div class="opening-soon__footer">
        <p>
          This shop will be powered by <a class="opening-soon__link" href="//www.shopify.com" target="_blank" title="Create your own online store with Shopify"><i class="ico ico-shopify-bag"></i><span class="visuallyhidden">Shopify</span></a>.
        </p>
      </div>
    </div>
  </body>
</html>