🏗️ テーマ基盤中級

パスワード保護ページのレイアウト

Shopify のパスワード保護機能を有効にしたとき、来訪者が入力する認証ページの HTML 骨組み。ストア共通のメタタグ、スタイル、スクリプトをレンダリングする。

用途

ストアをメンテナンス中または事前販売・クローズド販売時にパスワード画面を表示するときに使用。ブラウザのメタ情報、ファビコン、ページタイトルを一括設定する基盤となる。

設置場所

layout/password.liquid として配置し、Shopify 管理画面の「オンラインストア」→「テーマ」→「アクション」→「コードを編集する」から編集する。パスワードテンプレートは自動的に呼び出されるため、編集後は本番反映時にストアへのアクセスが制限される。

注意点

このファイルを削除または誤編集するとパスワード保護ページが崩れるため、バックアップを取ってから修正する。`settings.color_primary` や `settings.favicon` は theme settings.json で定義されていることが前提。`content_for_header` と `content_for_layout` は Shopify が自動挿入するため削除厳禁。テーマをアップロード後、本番ストアで実際にパスワード入力画面を表示して CSS の読み込みと JavaScript の動作を確認する。

タグ:password-protectionlayoutmeta-tagsheadtheme-foundation

コード

41 行 / liquid

<!doctype html>
  <html  
    lang="{{ request.locale.iso_code }}"
    class="{% if request.design_mode %}theme-editor{% endif %}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="theme-color" content="{{ settings.color_primary }}">
  
    <link rel="canonical" href="{{ canonical_url }}">
    <link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
    <link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
  
    {%- unless settings.favicon == blank -%}
        <link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: '32', height: '32' }}">
    {%- endunless -%}
  
    <title>
      {{ page_title }}
    </title>
  
    {% if page_description %}
      <meta name="description" content="{{ page_description | escape }}">
    {% endif %}
  
    {% render 'meta-tags' %}
  
    {{ content_for_header }}
  
    {% render 'styles-scripts' %}
  </head>
  
  <body>
   
    <main id="main">
      {{ content_for_layout }}
    </main>
  
  </body>
  </html>

出典・ライセンス

Source:: kondasoft/ks-bootshop/layout/password.liquid
Repository:: https://github.com/kondasoft/ks-bootshop
License:: MIT

このコードは kondasoft 著作の MIT ライセンスソースです。原本の著作権は kondasoft が保有します。日本語訳は ALSEL によるものです。

パスワード保護ページのレイアウト

コード

出典・ライセンス

関連項目

セクションスキーマのカスタムブロック定義

セクション呼び出しのフォーマット

レイアウトテンプレートの指定

Liquid フォーマッター互換のセクション表記

基本的なHTMLレイアウト

layout タグのフォーマット