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

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

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

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

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

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

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

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

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

管理画面からコード編集

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

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

shopify 管理画面からコード編集

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

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

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

shopify ローカル環境から編集

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 テンプレートファイルとページの関係

Shopifyの最小構成は?

Wordpressならindex.phpとstyle.cssが必要でしたが、Shopifyの場合はlayout/theme.liquidtemplates/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の使い方についてはこちらの記事でも詳しく紹介しています。

データオブジェクト

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

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

使えるデータ一覧はこちら shopify オブジェクト

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

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

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

フィルタ

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

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

// 結果 -> AWESOME SHOES

Shopifyのリソースまとめ

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

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

Copyright © 2021 homupedia.com