Shopifyのコード構造を理解する

Shopifyのテーマは独自⾔語Liquidで作られているため、コードを編集する際は一般的なhtmlサイトとは少々勝手が異なります。FTPは使えません。

プログラミングの知識がない人でも「カスタマイズ」から洗礼されたデザインのECサイトの構築ができる点がShopifyの魅力ですが、デザインの微調整をやりたい場合はコードを編集する必要があります。

テーマのコードの大枠の構造を把握していると修正がしやすくなります。

Shopifyのコード編集する手順

Shopifyの管理画面から「オンラインストア」から「テーマ」を選択します。

テーマのアクションから「コードを編集する」を選択します。

エディタが開きテーマのディレクトリが表示されます。コード編集はこのエディタからLiquidファイルを編集します。

Shopifyの6つのディレクトリ

Shopify のコードは⼤きく 6 つのパートで構成されます。

■テーマファイルのディレクトリ構造

• Layout　
ページ単位でのレイアウトです。「theme.liquid」は「index.html」のようなものです。ヘッダー、フッターなどページレイアウトに相当します。

• Templates　
商品ページ、カート、404ページなど画⾯を構成するテンプレートです。

• Snippets　
テンプレートから呼び出されるセクションのデザイン要素です。

• Assets　
アイコンや画像やJavaScript などの静的ファイルです。

• Config　
サイト設定のための.jsonファイルが格納されています。

• Locales　
⾔語設定のための.jsonファイルが格納されています。

どこに何が入っているのかわかれば、HTML, CSS, JavaScript が分かる人であれば大枠を掴みやすくなります。微修正をかけたい部分のディレクトリのデータをみて該当箇所を探してみましょう。

独自コードLiquidについて学ぶ場合はこちらが参考になります。

Liquid template language

コード編集のハードルが高い場合はノーコードアプリ「Shogun」を使えばコーディング知識なしにデザイン変更をすることも可能です。

Shopifyを初めて使ったときは独自コードに面喰らうかもしれませんが、構造の大枠がわかれば安心できます。

また同じ苦労をした人たちがもっと簡単に編集できるshogunのようなアプリを提供してくれているのはありがたい限りです。コードとアプリを使いこなして自分が納得いくデザインを追い求めましょう。

YOSHIKI