初心者のためのShopifyテーマカスタマイズ方法まとめ

Shopifyをこれからはじめる人のための、Shopifyカスタマイズ方法まとめです。

テンプレートタグやデータの読み込みなど、Shopifyカスタマイズで最低限理解しておきたい内容をサクッとまとめてみました。

Shopifyテーマをカスタマイズする３つの方法

テーマをカスタマイズする方法は３つあります。コーディング不要で簡単な設定だけでカスタマイズしたり、ローカル環境を構築して本格的にテーマ開発を行うこともできます。

管理画面からテーマエディタで編集

一番簡単なのがテーマエディタを使ったカスタマイズ。コードを一切触らず、テーマにある機能を使って配色変更やコンテンツの追加、入れ替えなどができます。

Wordpressのテーマカスタマイザーとよく似た感じですね。

管理画面からコード編集

２つ目は管理画面からコードを編集する方法。見出しテキストの編集やHTMLタグの追加など、管理画面から簡単にカスタマイズすることができます。

コードの一部だけをサクッと修正したい場合はこの方法で行います。

ローカル環境でカスタマイズ

３つ目はローカル環境からのカスタマイズ。自分のPCにテーマをダウンロードしてコードエディタを使って編集できます。

本格的にテーマ開発をしたり、トップページを丸々カスタマイズしたい場合にオススメ。アップロードもコマンドラインでできるので効率よくコーディングできます。

Shopifyテーマのファイル・フォルダ構造

Shopifyテーマ内のフォルダ名やファイル名は固定となっています。ファイルはページと連動しており、開いたページで使用されるファイルが決まります（例えば、商品詳細ページはproducts.liquidなど）。

Shopifyのフォルダ構造

Shopifyではフォルダ構造は決まってるので、この構造の中で作っていきます。

テンプレートファイルとページの関係

ファイルとページは次のような関係になっています。こちらもファイル名とページが対応しているため、勝手に定義を変えたりできません。

固定ページはpage.page-name.liquidのようにページごとにテンプレートを追加することも可能。 特設ページのLPなんかはこの方法で個別にページを作成することができます。

新しいページは、商品、商品一覧、ブログ、固定ページで作成できます。

作成したテンプレートは、ページ編集画面から選択できるようになります。Wordpressの固定ページのような感じ。

Shopifyの最小構成は？

Wordpressならindex.phpとstyle.cssが必要でしたが、Shopifyの場合はlayout/theme.liquidとtemplates/index.liquidがあれば一応動くようです（ショップとして機能するかは不明ですが）。

ShopifyのテンプレートタグとLiquidについて

商品データやブログの記事データは、Shopifyであらかじめ用意されたテンプレートタグを使って読み込むことができます。

条件分岐や繰り返し構文を使ったり、現在のページ情報からページごとに異なるコンテンツを表示させたりできます。

制御構文（Liquidタグ）

基本的な構文は次のように{%%}で処理を記述、{{}}で値を出力します。

// if文
{% if product.title == 'Awesome Shoes' %}
  You are buying some awesome shoes!
{% endif %}

// for文
{% for product in collection.products %}
  {{ product.title }}
{% else %}
  The collection is empty.
{% endfor %}

// 値の表示
{{ shop.name }}

Liquidの使い方についてはこちらの記事でも詳しく紹介しています。

データオブジェクト

商品データやブログデータはどのページからでも取得することができます。なのでブログの下部にオススメ商品を表示したり、商品ページに関連記事を表示させるといったことも可能。

取得できるデータはブログや商品以外に、ショップデータ、顧客データ、カートの中身、テンプレート情報などがあります。

使えるデータ一覧はこちら

例えば特定の記事データを取得する場合はこんな感じ。

// 変数に指定した記事データを取得
{% assign article = articles['news/hello-world'] %}

// フィルタで記事へのリンクをつけてタイトルを表示
{{ article.title | link_to: article.url }}

フィルタ

フィルタは、数値、文字列、変数などの表示を変更することができます。フィルターは変数タグ{{}}内で、|で使用することができます。

// 小文字を全て大文字に変換
// product.title = "Awesome Shoes"
{{ product.title | upcase }}

// 結果 -> AWESOME SHOES

Shopifyのリソースまとめ

Shopifyは公式ドキュメントがしっかりしてるので、ドキュメントを読めば疑問点はほぼ解決します。開発系のドキュメント以外は日本語対応しているのもGood。

日本語フォーラムもあるのでわからないところがあればそちらで質問することができます。

• 管理画面の使い方 公式ドキュメント
• 公式テーマカスタマイズドキュメント
• Shopify日本語フォーラム
• テーマストア
• アプリストア
• Shopifyで作られたサイトデザインまとめ(Awwwards)
• Shopifyで作られたサイトデザインまとめ(Shopifyブログ)