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

{
  "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"
  ]
}

{% 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 %}
{
  "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>

.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;
}

{% schema %}
{
  "name": "画像スライダー",
  "settings": [
    {
      "type": "image_picker",
      "id": "slide_image",
      "label": "スライド画像"
    }
  ]
}
{% endschema %}

<div class="custom-slider">
  <img src="{{ section.settings.slide_image | image_url }}" alt="スライド画像">
</div>

{% schema %}
{
  "name": "お問い合わせフォーム",
  "settings": []
}
{% endschema %}

<div class="contact-form">
  <h2>お問い合わせ</h2>
  {% form 'contact' %}
    <input type="text" name="contact[name]" placeholder="お名前">
    <input type="email" name="contact[email]" placeholder="メールアドレス">
    <textarea name="contact[body]" placeholder="お問い合わせ内容"></textarea>
    <button type="submit">送信する</button>
  {% endform %}
</div>

{
  "name": "カスタム会社ページ",
  "sections": {
    "slider": {
      "type": "custom-slider"
    },
    "company-info": {
      "type": "custom-page-company",
      "settings": {
        "company_logo": "shopify://shop_images/your-logo.png",
        "company_name": "Shino Store",
        "company_description": "<p>ここに会社概要を入れます。</p>"
      }
    },
    "contact-form": {
      "type": "custom-contact-form"
    }
  },
  "order": [
    "slider",
    "company-info",
    "contact-form"
  ]
}

/* スライダーのスタイル */
.custom-slider img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* 会社情報セクション */
.company-page {
  text-align: center;
}

.company-page img {
  width: 150px;
  height: auto;
  margin-bottom: 20px;
}
.template-page-company .content-for-layout{
  max-width: 1000px;
  width: 100%;
  margin: 50px auto;
}
.template-page-company .content-for-layout .custom-slider{

}

.company-page .company-description {
  color: #555;
}

/* お問い合わせフォーム */
.contact-form h2 {
  text-align: center;
  margin-bottom: 20px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.contact-form button {
  display: block;
  width: 100%;
  padding: 12px;
  background: #007acc;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.contact-form button:hover {
  background: #005fa3;
}