Shopifyテーマ開発：実践入門

Shopifyテーマ開発

Shopifyテーマ開発：CLI、フォルダー、Liquidの基本 | We.Inc

Shopifyテーマ開発の始め方。Shopify CLIのテーマコマンド、テーマの各フォルダーの中身、Liquidの基本、JSONテンプレートを、コピーできるコマンド付きで紹介します。

Shopify CLIをインストールし、shopify theme init でSkeletonのスターターテーマをクローンしてから、shopify theme dev --store your-store を実行すると、Chromeのホットリロード付きで http://127.0.0.1:9292 にプレビューできます。Liquid、CSS、JSONテンプレートをローカルで編集し、shopify theme check でエラーを確認して、shopify theme push でアップロードします。

よく使うShopify CLIのテーマコマンド

テーマ開発とは、管理画面の中ではなく、自分のパソコン上の実際のファイルとして、使い慣れたエディターとバージョン管理でストアのデザインを編集することです。下のフォルダーエクスプローラーで各フォルダーに何が入っているかを確認し、コマンドをコピーしてプレビューを動かしましょう。

よくある質問

Liquidとは何ですか？

LiquidはShopifyのテンプレート言語です。二重の波かっこは商品名などの値を出力し、波かっことパーセント記号のタグはif文やループなどのロジックを書くのに使います。フィルターは値の表示方法を変えます。

テーマ開発には有料プランが必要ですか？

開発者は通常、Shopifyパートナーアカウントから作成した開発ストアで作業します。条件は変わることがあるため、パートナーダッシュボードで最新の規約を確認してください。

JSONテンプレートとは何ですか？

ページで表示するセクションとその設定を列挙したデータファイルです。少なくとも1つのセクションを含む sections オブジェクトと、セクションIDを並べた order 配列が必要です。

プレビューがChromeでしか再読み込みされないのはなぜですか？

Shopifyの入門ガイドによると、ホットリロードのプレビューはGoogle Chromeでのみ動作します。他のブラウザーでは手動で更新してください。

Dawn、Horizon、Skeletonのどれから始めるべきですか？

CLIの init コマンドは、ゼロからテーマを作るための最小限の土台であるSkeletonをクローンします。既存のデザインを主に調整したい場合は、完成した無料テーマから始めましょう。

ページの組み立て方

パソコンとストアの間で作業をやり取りする

プレビューを動かすためのコマンド

my-store は自分のストアのmyshopify名に置き換えてください。空のフォルダーで実行します。

テーマを作成してプレビューする

init はSkeletonのスターターをクローンし、dev はCSSとセクションの編集を再読み込みするローカルのアドレスを表示します。

チェックしてアップロードする

アップロードの前には毎回 check を実行しましょう。share は新しい非公開のコピーを作るため、クライアントのレビューに最も安全です。

1つのスニペットでわかるLiquid

出力タグは値を表示し、ロジックタグは何を表示するかを決め、フィルターは値の形を変えます。

商品名と価格

if タグはセールでないときに比較価格の行を隠し、money フィルターはストアの通貨に合わせて価格を整形します。

テーマフォルダーエクスプローラー

標準的なテーマの各フォルダーと、その中身です。1つ選ぶとハイライトされます。

テーマで使う画像、CSS、JavaScriptファイル。

テーマブロック。Horizonなどのテーマの土台になっている新しい種類のブロックです。

settings_schema.json を含む、テーマの設定ファイル。

テーマ自体のテキストを他の言語で表示するための翻訳ファイル。

テーマのセクションとセクショングループ。

再利用できる小さなLiquidコード。

旧来の顧客アカウントページ用のテンプレート。

無料で始める · クレジットカード不要

関連: ガイド｜Webマーケティングと集客を学ぶ

製品

ご利用いただける方

機能

リソース

会社情報

サイトマップを見る