【2025年最新】Shopifyで固定ページを作る方法【WordPress開発者にもわかりやすく解説】

疑問を持つ人

ShopifyでWordpressみたいに固定ページを作りたいんだけど作り方が分からないなあ。どうやって作るんだろう

今回はこのような悩みを解消する記事となっています。

しの

WordPressであればpage-xxxx.phpという固定ページ用のテンプレートを作り、管理画面で設定すればサクッと固定ページを表示する事が出来ますよね。

私は今も制作会社でWordpressを使ったお仕事をさせていただいておりますが、Shopifyを学び始めて勝手の違いに戸惑いました。

そこで、同じような悩みを持つ人の少しでも参考になればと思いこちらの記事を書いております。

というわけでWordpress開発者の方にも分かりやすいように、Shopifyで固定ページを作る方法をご紹介しますので、ぜひご覧ください。

Step1：Shopifyで固定ページを作成する

まずはShopifyの管理画面から固定ページを作成します。

Shopify管理画面にログインし、左のメニューから「オンラインストア」→「ページ」と進んでください。

そして、ページ右上にある「ページを追加」ボタンをクリックします。

タイトルに会社概要など任意の名前を入力し、公開ボタンを押します。

本文などはここでは不要です。

こここは何となくWordpressとも似てますよね。

しの

Step2：テンプレートファイルを作成する

次に固定ページを表示させるためのテンプレートファイルを用意します。

WordPressではpage-xxxx.phpに当たる部分ですね。

Shopify OS2.0では .json テンプレートを使います。

以下は最低限の記述になりますがまずはこれくらいのコード量から始めると良いと思います。

このファイルはpage.company.json としてtemplatesフォルダに格納しておきましょう。

{
  "sections": {
    "main": {
      "type": "custom-page-company",
      "settings": {
        "company_logo": "shopify://shop_images/2025-04-03_232340.png",
        "company_name": "Shino Store",
        "company_description": "<p>ここに会社概要の説を入れます。</p>"
      }
    }
  },
  "order": [
    "main"
  ]
}

この内容は、「どのセクションをこのページで使うか」そして「そのセクションにどんな設定を適用するか」を定義しています。

。以下に各キーの内容について記載しました

キー	内容
"type"	使用するセクションのファイル名（sections/custom-page-company.liquid を指定）
"settings"	そのセクションに渡す値（画像・テキスト・HTMLなど）
company_logo	アップロードされた画像ファイルのパス（Shopify CDN形式）
company_name	表示する会社名（Shino Store）
company_description	会社概要として表示するHTML形式の説明文

Step3：セクションファイルを作成する

次にセクションファイルを使って、会社情報のロゴ・名前・概要を登録できるようにします。

しの

になります。こちらが先ほど出てきたsections/custom-page-company.liquidになります。

{% schema %}
{
  "name": "会社情報",
  "settings": [
    {
      "type": "image_picker",
      "id": "company_logo",
      "label": "会社ロゴ"
    },
    {
      "type": "text",
      "id": "company_name",
      "label": "会社名",
      "default": "Shino Store"
    },
    {
      "type": "richtext",
      "id": "company_description",
      "label": "会社概要",
      "default": "<p>ここに会社概要の説を入れます。</p>"
    }
  ]
}
{% endschema %}

<div class="company-page">
    <img 
        src="{{ section.settings.company_logo | image_url }}" 
        alt="{{ section.settings.company_name }}"
        width="{{ section.settings.company_logo.width }}"
        height="{{ section.settings.company_logo.height }}"
      >
        <h1>{{ section.settings.company_name }}</h1>
  <div>{{ section.settings.company_description | default: "会社概要を入力してください。" }}</div>
</div>

schemaとは

{% schema %}

上記のコードがcustom-page-company.liquidの冒頭に表示されていますが、schemaを記述することでマーチャント(ショップ運営者)が管理画面でカスタマイズすることが可能になります。

。そのため、完全に静的なページでカスタマイズが不要というページであればschemaは不要かもしれませんが、shopifyはプログラミング知識がない方であってもノーコードでサイトを調整できる事が魅力でもありますので、このschemaについてはしっかり理解しておくと良いと思います

コードの解説

{% schema %}
{
  "name": "会社情報",
  "settings": [
    {
      "type": "image_picker",
      "id": "company_logo",
      "label": "会社ロゴ"
    },
    {
      "type": "text",
      "id": "company_name",
      "label": "会社名",
      "default": "Shino Store"
    },
    {
      "type": "richtext",
      "id": "company_description",
      "label": "会社概要",
      "default": "<p>ここに会社概要の説を入れます。</p>"
    }
  ]
}
{% endschema %}

こちらがschemaの全体像です。

しています。上記ではロゴ、会社名、会社概要をschemaを使い管理画面で設定できるように

<div class="company-page">
    <img 
        src="{{ section.settings.company_logo | image_url }}" 
        alt="{{ section.settings.company_name }}"
        width="{{ section.settings.company_logo.width }}"
        height="{{ section.settings.company_logo.height }}"
      >
        <h1>{{ section.settings.company_name }}</h1>
  <div>{{ section.settings.company_description | default: "会社概要を入力してください。" }}</div>
</div>

次にこちらは実際にWebサイト上でDOM要素として表示される部分ですが波括弧で囲われている部分に関しては管理画面で設定した内容が動的に表示されるようになっていますね。

ここまで出来たら、Githubのdevブランチにプッシュしてテスト環境で確認してみましょう。

Githubを使ったテスト環境の構築方法は以下で解説していますので併せてご覧ください。

あわせて読む

: 【Shopifyテスト環境構築】ローカルで修正した内容をGitHub経由でテスト環境に反映する方法

続きを見る

ここまでで以下のように表示されました。

あくまで最小限の構成になっています。カスタマイズしたり要素を追加すればどんどん固定ページらしくなっていきますよ

しの

す。まだロゴの画像がないですが、管理画面で設定したショップ名や会社説明が載っている事がわかります。

CSSはどうやって調整するんですか？

しますね。はい、次にCSSの当て方についてもご紹介

しの

Step4：CSSを追加する

次にページを整えるためにCSSを追加します。

CSSファイル（例：assets/base.css）に以下を追記して、表示を整えます。


.company-page {
  padding: 2rem;
  margin: 0 auto;
  display: block;
  width: 50%;
}

.company-page img {
  max-width: 200px;
  height: auto;
  margin-bottom: 1rem;
}

.company-page h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.company-page div {
  font-size: 1rem;
  line-height: 1.6;
}

すると要素が真ん中になり、CSSが当たっている事も分かりますね。

あとはこの固定ページをローカルで修正し、テスト環境にアップしましょう。

。そしてSTEP1で会社概要を固定ページとして管理画面に登録したと思いますが、右下の「テンプレート」の箇所で「company」という選択肢が表示されていればそちらを選択してページを確認しましょう

す。その後、クライアント様などにも確認し問題なければ本番にアップするようにしま

補足：テスト環境のURL共有方法

「カスタマイズ → プレビュー」で表示されるURLの末尾に ?preview_theme_id=XXXXXX が付きます。

https://your-store.myshopify.com/pages/company?preview_theme_id=123456789

このURLを共有すれば、本番に公開しなくてもクライアントに確認してもらえますよ。

まとめ

いかがでしたでしょうか。

shopifyでも固定ページを作る事は可能でして、少しWordPressとは勝手が違いますが考え方としては似てる部分もありますよね。

しの

最初はschemaなど見慣れない記述が出てきて戸惑うかもしれませんが、どんな役割でどんな意味があるかを理解する事が大事です。

というわけで本日の記事は以上です。