Liquid Snippets by ALSEL
📄 ページテンプレート初級

404ページ(おすすめ商品表示付き)

ページが見つからない場合の 404 エラーページ。メッセージと共に、フロントページコレクションから商品一覧を表示し、ユーザーをサイト内の別ページへ導く。

用途
存在しない URL にアクセスされたときに表示する 404 テンプレート。離脱を防ぎ、購入につなげるため人気商品をリスト表示する。
設置場所
templates/404.liquid に配置する。Shopify はこのファイル名を自動認識し、該当ページが見つからない場合に自動的に表示する。
注意点
collections.frontpage はデフォルト状態では空の場合があるため、Shopify 管理画面でフロントページコレクションに商品を手動で追加しておくこと。バリアント選択肢「Add to Basket」ボタンはラジオボタンで非表示(display: none)のままなので、モバイルでも選択肢が見える場合は CSS で表示に切り替える。比較価格の表示ロジックで複数バリアント価格が異なる場合の分岐が複雑なため、シンプルな price_min 表示に統一するとよい。
タグ:404error-pagecollectionproductfeatured

コード

57 行 / liquid
  <div id="page" class="innerpage clearfix">

    <div id="text-page">
      <div class="entry">
        <h1>Oh no!</h1>
        <div class="entry-post">
          Seems like you are looking for something that just isn't here. <a href="/">Try heading back to our main page</a>. Or you can checkout some of our featured products below.
        </div>
      </div>
    </div>


    <h1>Featured Products</h1>
    <ul class="item-list clearfix">

      {% for product in collections.frontpage.products %}
      <li>
        <form action="/cart/add" method="post">
        <div class="item-list-item">
          <div class="ili-top clearfix">
            <div class="ili-top-content">
              <h2><a href="{{product.url}}">{{product.title}}</a></h2>
              <p>{{ product.description | truncatewords: 15 }}</p>
            </div>
            <a href="{{product.url}}" class="ili-top-image"><img src="{{ product.featured_image | product_img_url: 'small' }}" alt="{{ product.title | escape }}"/></a>
          </div>

          <div class="ili-bottom clearfix">
            <p class="hiddenvariants" style="display: none">{% for variant in product.variants %}<span><input type="radio" name="id" value="{{variant.id}}" id="radio_{{variant.id}}" style="vertical-align: middle;" {%if forloop.first%} checked="checked" {%endif%} /><label for="radio_{{variant.id}}">{{ variant.price | money_with_currency }} - {{ variant.title }}</label></span>{% endfor %}</p>
            <input type="submit" class="" value="Add to Basket" />
            <p>
              <a href="{{product.url}}">View Details</a>

              <span>
                {% if product.compare_at_price %}
                  {% if product.price_min != product.compare_at_price %}
                    {{product.compare_at_price | money}} -
                    {% endif %}
                {% endif %}
                <strong>
                  {{product.price_min | money}}
                </strong>
              </span>
            </p>
          </div>
        </div>
        </form>
      </li>
      {% endfor %}

    </ul>
  </div>
  <!-- end page -->



出典・ライセンス

License:
MIT

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

関連項目

📄 ページテンプレート初級

ページテンプレート

Shopify の汎用ページテンプレート。ページのタイトルと本文コンテンツを Shopify 管理画面から取得して表示する基本的な構造。

📁 liquid·MIT·5
📄 ページテンプレート初級

リダイレクト

ヘッドレステーマで Shopify ストアフロントへのリダイレクト機能を提供するセクション。管理画面に「リダイレクト」という名称で登場し、ページから別 URL への誘導を実装する基盤となる。

📁 shopify-headless-theme·MIT·7
📄 ページテンプレート初級

トップページの基本テンプレート

Shopify Liquid の最小限のテンプレート例。HTML に日付変数を埋め込み、商品ページへのリンクを配置する基本構造を示す。

📁 liquid·MIT·7
📄 ページテンプレート初級

固定ページのテンプレート

Shopify 管理画面で作成した固定ページ(利用規約、プライバシーポリシーなど)を表示するテンプレート。ページタイトルと本文コンテンツを描画する。

📁 mcliquid-theme·MIT·8
📄 ページテンプレート初級

ページの基本テンプレート

固定ページ(About など)の基本レイアウト。ページタイトルとコンテンツを HTML の article 要素でマークアップし、管理画面で編集したテキストを表示する。

📁 liquid·MIT·9
📄 ページテンプレート初級

固定ページのテンプレート

固定ページ(ポリシー、会社概要、利用規約など)の基本レイアウト。ページタイトルと本文を中央揃えで表示する。

📁 ks-bootshop·MIT·10