パスワード保護ページ

<style>
  #password-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
</style>
   
<div 
  id="password-page"
  class="{{ section.settings.bg_color }}"
  style="--bs-bg-opacity: {{ section.settings.bg_opacity | append: '%' }};">
  <div 
    class="container" 
    style="max-width: {{ section.settings.max_width }}px;">
    <a 
      class="navbar-brand d-block text-center p-0 mb-8" 
      href="{{ routes.root_url }}">
      {% if section.settings.logo %}
        {% assign logo_height_x2 = section.settings.logo_height | times: 2 %}
        <img
          class="img-fluid"
          src="{{ section.settings.logo | image_url: height: logo_height_x2 }}" 
          alt="{{ shop.name }}"
          width="{{ section.settings.logo_height | times: section.settings.logo.aspect_ratio | round }}" 
          height="{{ section.settings.logo_height }}"
          loading="lazy">
      {% else %}
        <span class="fs-1">
          {{ shop.name }}
        </span>
      {% endif %}
    </a>
    <div class="card shadow-sm">
      <div class="card-body">
        {% unless shop.password_message == blank %}
          <p class="lead text-center">
            {{ shop.password_message }}
          </p>
        {% endunless %} 
        {% form 'storefront_password' %}
          {{ form.errors | default_errors }}
          <div class="form-floating mb-4">
            <input 
              class="form-control" 
              type="password" 
              name="password"
              placeholder="{{ 'general.password_page.input_label' | t }}">
            <label for="newsletter-input-email">
              {{ 'general.password_page.input_label' | t }}
            </label>
          </div>
          <button class="btn btn-primary w-100" type="submit"> 
            {{ 'general.password_page.btn_label' | t }}
          </button>
        {% endform %}
      </div>
    </div>
    {% if section.settings.social_icons %}
      <div class="social-icons-wrapper text-center mt-5">
        {% render 'social-icons', icon_size: 18 %}
      </div>
    {% endif %}
  </div>
</div>
  
{% schema %}
  {
    "name": "Password",
    "tag": "section",
    "settings": [
      {
        "type": "select",
        "id": "bg_color",
        "label": "Background color",
        "default": "bg-body",
        "options": [
          { "value": "bg-primary", "label": "Primary" },
          { "value": "bg-secondary", "label": "Secondary" },
          { "value": "bg-body", "label": "Body" },
          { "value": "bg-white", "label": "White" }
        ]
      },
      {
        "type": "range",
        "id": "bg_opacity",
        "label": "Background opacity",
        "min": 0,
        "max": 100,
        "step": 1,
        "default": 100,
        "unit": "%"
      },
      {
        "type": "text",
        "id": "max_width",
        "label": "Max-width (px)",
        "default": "600"
      },
      {
        "type": "header",
        "content": "Logo"
      },
      {
        "type": "image_picker",
        "id": "logo",
        "label": "Logo"
      },
      {
        "type": "range",
        "id": "logo_height",
        "label": "Logo height",
        "min": 20,
        "max": 100,
        "step": 2,
        "default": 40
      },
      {
        "type": "checkbox",
        "id": "social_icons",
        "label": "Show social icons",
        "default": true
      }
    ],
    "templates": ["password"],
    "presets": [
      {
        "name": "Password",
        "category": "Password"
      }
    ]
  }
  {% endschema %}