Shopifyをこれからはじめる人のための、Shopifyカスタマイズ方法まとめです。
テンプレートタグやデータの読み込みなど、Shopifyカスタマイズで最低限理解しておきたい内容をサクッとまとめてみました。
Shopifyテーマをカスタマイズする3つの方法
テーマをカスタマイズする方法は3つあります。コーディング不要で簡単な設定だけでカスタマイズしたり、ローカル環境を構築して本格的にテーマ開発を行うこともできます。
管理画面からテーマエディタで編集
一番簡単なのがテーマエディタを使ったカスタマイズ。コードを一切触らず、テーマにある機能を使って配色変更やコンテンツの追加、入れ替えなどができます。
Wordpressのテーマカスタマイザーとよく似た感じですね。
管理画面からコード編集
2つ目は管理画面からコードを編集する方法。見出しテキストの編集やHTMLタグの追加など、管理画面から簡単にカスタマイズすることができます。
コードの一部だけをサクッと修正したい場合はこの方法で行います。
ローカル環境でカスタマイズ
3つ目はローカル環境からのカスタマイズ。自分のPCにテーマをダウンロードしてコードエディタを使って編集できます。
本格的にテーマ開発をしたり、トップページを丸々カスタマイズしたい場合にオススメ。アップロードもコマンドラインでできるので効率よくコーディングできます。
Shopifyテーマのファイル・フォルダ構造
Shopifyテーマ内のフォルダ名やファイル名は固定となっています。ファイルはページと連動しており、開いたページで使用されるファイルが決まります(例えば、商品詳細ページはproducts.liquid
など)。
Shopifyのフォルダ構造
Shopifyではフォルダ構造は決まってるので、この構造の中で作っていきます。
フォルダ名 | 内容 |
---|---|
assets | cssや画像、javascriptファイルを入れておくフォルダ |
config | テーマエディタ用の設定ファイル、デフォルトの設定データ |
layout | ベースになるレイアウトテンプレート |
locales | メニューやメッセージの翻訳ファイル |
sections | テンプレートから呼び出して使う、テーマエディタで並べ替えや設定可能 |
snippets | テンプレートから呼び出して使う、テーマエディタで編集できない |
templates | ページ用のテンプレート |
テンプレートファイルとページの関係
ファイルとページは次のような関係になっています。こちらもファイル名とページが対応しているため、勝手に定義を変えたりできません。
ファイル名 | ページ名 |
---|---|
customers/account.liquid | アカウントトップ |
customers/activate_account.liquid | アカウントの有効化 |
customers/addresses.liquid | 住所変更 |
customers/login.liquid | ログイン |
customers/order.liquid | 注文履歴 |
customers/register.liquid | 会員登録 |
customers/reset_password.liquid | パスワードリセット |
404.liquid | 404 |
article.liquid | 記事 |
blog.liquid | ブログ一覧 |
cart.liquid | カート |
collection.liquid | 商品一覧 |
gift_card.liquid | ギフトカード |
index.liquid | トップページ |
list-collections.liquid | コレクション(カテゴリ)一覧 |
page.contact.liquid | お問い合わせ |
page.liquid | 固定ページ |
password.liquid | パスワード |
product.liquid | 商品詳細 |
search.liquid | 検索結果 |
固定ページは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。
日本語フォーラムもあるのでわからないところがあればそちらで質問することができます。