2021/02/20 (更新日: 2021/03/20)

【Shopify独学】ページを自由にカスタマイズする方法

PROGRAMMING Shopify

Shopify独学中

Shopifyの構築を請け負ってるけど、ページビルダーアプリでのカスタマイズではなくて、テーマのLiquidを編集して、カスタマイズしたい。簡単なやり方があれば教えて欲しいなー。

こういった疑問に答えます。

本記事の内容

テーマのLiquidを編集して、ページをカスタマイズする方法
テーマのLiquidを編集して、ページをカスタマイズする時の注意点

この記事を書いている僕は、独学でLiquidを習得して、現在はShopifyエキスパートで働いている現役フロントエンドエンジニアです。

実務案件で、会社概要のページや、実店舗情報など、デザイナーから上がってきたカンプをテーマカスタマイズしながらコーディングしています。

現在案件を請け負っている人やこれから案件を請負ってガンガン仕事獲得していきたいって人に参考になればと思います。

※ちょっとしたLiquid構文を触らないといけないですが、HTML,CSSの知識があれば、コピペして作成出来ます。

テーマのLiquidを編集して、ページをカスタマイズする方法

page.liquidを複製してカスタマイズして、ホームページ（TOPページ）のセクションをコピペしていくだけです。

はじめからliquid、HTML、CSSを使って書いていくのは大変なので、使いたいセクションの形をそのまま使います。

具体的な手順

①テーマのコード編集画面を開く
②新しいtemplateを追加する
③page.○○.liquidを作成
④page.○○.liquidにセクションをコピペ

①テーマのコード編集画面を開く

※画像準備中

②新しいtemplateを追加する

※画像準備中

③page.○○.liquidを作成

※画像準備中

ここでは、page.test.liquidとして作成します。

下記のコードが書かれたテンプレートが出来ると思います。

<div class="page-width">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

      <div class="rte">
        {{ page.content }}
      </div>
    </div>
  </div>
</div>

④page.○○.liquidにセクションをコピペ

では、この中に自分がコピーしたいセクションのコードをコピペします。

このコピペする時にかなりコードが長くなるので、別のコピペ用のテンプレートも作成します。（下記の下層用のセクションの作成方法を参照）

そのコピペ用のテンプレートを読み込むコードをこんな感じ書いてください。

<div class="page-width">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

　　　{% section 'hero1' %}

      <div class="rte">
        {{ page.content }}
      </div>
    </div>
  </div>
</div>

{% section ‘hero1’ %}

このコードを追加しています。

セクションを読み込むliquidの書き方になります。

これで、管理画面のカスタマイズのところで、このテンプレートを選択すると自分の作りたいセクションを反映することができます。

反映しているかの確認は、

①テーマのカスタマイズを開く
②左上の「ホームページ」から「TEST」に変更
③自分の作りたいセクションが反映されるか確認

下層用のセクションの作成方法

ここでは、下層ページに使いたいセクションのパーツの作成方法を解説します。

ホームページのセクションと違い、ここで作成するセクションは静的セクションになります。

具体的な手順

①テーマのコード編集画面を開く
②新しいセクションを追加する
③〇〇〇〇.liquidをセクションフォルダ内に作成
④〇〇〇〇.liquidに複製したいセクションのコードをコピペ
⑤〇〇〇〇.liquidのSchemaのpresetsを削除

①テーマのコード編集画面を開く

※画像準備中

②新しいセクションを追加する

※画像準備中

③〇〇〇〇.liquidをセクションフォルダ内に作成

※画像準備中

ここでは、hero1.liquidとして作成します。

下記のコードが書かれたテンプレートが出来ると思います。

{% schema %}
  {
    "name": "Section name",
    "settings": []
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

④〇〇〇〇.liquidに複製したいセクションのコードをコピペ

上記のコードを全部削除して、

自分が作りたいセクションのコードを（ここではhero1.liquidに、Debutのhero.liquidのコードを）コピーして貼り付けします。

{%- if section.settings.hero_layout == 'full_width' and section.settings.hero_size == 'adapt' -%}
  {%- if section.settings.image.aspect_ratio == blank -%}
    {%- assign min_aspect_ratio = 2.0 -%}
  {%- else -%}
    {%- assign min_aspect_ratio = section.settings.image.aspect_ratio -%}
  {%- endif -%}
  {%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%}
  {%- style -%}
    .hero-{{ section.id }} {
      height: {{- wrapper_height -}}vw !important;
    }
  {%- endstyle -%}
{%- endif -%}
<div data-section-id="{{ section.id }}" data-section-type="hero-section">
  {%- if section.settings.hero_layout == 'fixed_width' -%}
    <div class="page-width">
  {%- endif -%}
  {%- if section.settings.hero_layout == 'fixed_width' and section.settings.hero_size ==  'adapt' -%}
    {%- assign slide_width = 1090 -%}
    {%- assign min_aspect_ratio = section.settings.image.aspect_ratio | default: 2.0 -%}
    <div class="hero-fixed-width hero--adapt"
         id="Hero-{{ section.id }}"
         data-layout="{{ section.settings.hero_layout }}"
         data-image-loading-animation>
      {%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
      {%- if section.settings.image.width < max_width -%}
        {%- assign slide_width = section.settings.image.width -%}
      {%- endif -%}
      <div class="hero-fixed-width__content">
        <div class="page-width text-center">
          {%- if section.settings.title != blank -%}
            <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
          {%- endif -%}
          {%- if section.settings.text != blank -%}
            <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} 

-------
-------
（省略）
-------
-------

    {
      "type": "url",
      "id": "button_link",
      "label": {
        "cs": "Tlačítkový odkaz",
        "da": "Knaplink",
        "de": "Button-Etikett",
        "en": "Button link",
        "es": "Enlace de botón",
        "fi": "Painikelinkki",
        "fr": "Lien du bouton",
        "it": "Link pulsante",
        "ja": "ボタンのリンク",
        "ko": "버튼 링크",
        "nb": "Kobling for knapp",
        "nl": "Knoplink",
        "pl": "Link przycisku",
        "pt-BR": "Link de botão",
        "pt-PT": "Ligação do botão",
        "sv": "Knapplänk",
        "th": "ลิงก์ปุ่ม",
        "tr": "Düğme bağlantısı",
        "vi": "Liên kết trên nút",
        "zh-CN": "按钮链接",
        "zh-TW": "按鈕連結"
      }
    }
  ],
  "presets": [
    {
      "name": {
        "cs": "Obrázek s textovým překryvem",
        "da": "Billede med tekstoverlejring",
        "de": "Foto mit überlegtem Text",
        "en": "Image with text overlay",
        "es": "Imagen con texto superpuesto",
        "fi": "Kuva päällä olevalla tekstillä",
        "fr": "Image avec calque texte",
        "it": "Immagine con testo",
        "ja": "テキストオーバーレイ付き画像",
        "ko": "텍스트 오버레이 포함 이미지",
        "nb": "Bilde med tekstoverlegg",
        "nl": "Foto met tekstoverlay",
        "pl": "Obraz z nakładką tekstową",
        "pt-BR": "Imagem com sobreposição de texto",
        "pt-PT": "Imagem com sobreposição de texto",
        "sv": "Bild med textöverlagring",
        "th": "การวางซ้อนรูปภาพพร้อมข้อความ",
        "tr": "Metin katmanı içeren görsel",
        "vi": "Hình ảnh có lớp phủ văn bản",
        "zh-CN": "带文本叠加的图片",
        "zh-TW": "附文字疊加層的圖片"
      },
      "category": {
        "cs": "Obrázek",
        "da": "Billede",
        "de": "Foto",
        "en": "Image",
        "es": "Imagen",
        "fi": "Kuva",
        "fr": "Image",
        "it": "Immagine",
        "ja": "画像",
        "ko": "이미지",
        "nb": "Bilde",
        "nl": "Afbeelding",
        "pl": "Obraz",
        "pt-BR": "Imagem",
        "pt-PT": "Imagem",
        "sv": "Bild",
        "th": "รูปภาพ",
        "tr": "Görsel",
        "vi": "Hình ảnh",
        "zh-CN": "图片",
        "zh-TW": "圖片"
      }
    }
  ]
}
{% endschema %}

⑤〇〇〇〇.liquidのSchemaのpresetsを削除

そして、上記のコードで最後の方にあるSchemaの中の「presets」を削除します。

　
 "presets": [

ーーー（省略）ーーー

]

※ コンマ（,）の位置など気をつけて、配列分をざっくりと消してしまってください。

このpresetsを消さないと、複製した分のセクションがホームページ（TOPページ）にも表示されてしまいます。

これで「下層用のセクションの作成」は完了です。

ページをカスタマイズする時の注意点

テーマのLiquidを編集して、ページをカスタマイズする方法

新しいテンプレートを作っても、ホームページ(TOPページ）と違い、必要はないセクションでも、記述すれば表示されてしまいます。

それだと、テンプレートを使い回そうと思っても、少しだけ不必要なセクションがあれば、都度新しく一つ一つ作っていくことになってしまいます。

それだと効率が悪いので、使う必要がないセクションを非表示に出来る方法をここで解説します。

カスタマイズページで作成したセクションを非表示にする方法

セクションが必要ではない時は、チェックボックスを作ってコントロールすることができます。

作成方法は以下です。

手順①

まずLiquidで

{% if section.settings.〇〇〇〇（id名) == true %}

    この中は作成したセクションコード

{% endif %}

と書いて

次にスキーマで下記のコードを書きます。


{% schema %}
{
"type": "checkbox",
"id": "〇〇〇〇",
"label": "チェックボックスを入れないと見えなくなる",
"default": true
}
{% endschema %}

これでチェックボックスにチェックを入れると表示、チェックを入れないと非表示に切り替えることができます。

ぜひ試して見てください( ´ ▽ ` )

Shopifyを学んでいる方で、Liquidの学習方法を知りたい人は、下記に僕が独学で学習した方法を書いていますので、よかったらどうぞ。

Liquid Shopify

【Shopify独学】ページを自由にカスタマイズする方法

テーマのLiquidを編集して、ページをカスタマイズする方法

具体的な手順

下層用のセクションの作成方法

具体的な手順

ページをカスタマイズする時の注意点

カスタマイズページで作成したセクションを非表示にする方法

手順①

RELATED