Shopifyテーマのセクションを自作してみよう！ Liquidを活用

ShopifyにはECサイトを手軽に運用するために無料・有料のテーマが用意されています。それらのテーマを利用しつつ、機能を追加したいときは、セクションをカスタマイズすることで対応できます。

既存のテーマのカスタマイズはプログラム言語のLiquidを活用し、コードを記述することで実現可能です。テキストの追加や画像や動画の埋め込みなど、多くの機能を追加できるのがShopifyのメリットといえるでしょう。

Shopifyテーマのセクションを自作したい方は、最後までご覧ください。

Shopifyのセクション自作の基礎知識

Shopifyでセクションを自作するには、まずShopifyのテーマの仕組みを理解する必要があります。

以上の3つの内容を解説していきます。

Shopifyのテーマとは

Shopifyのテーマとは、ECサイトの機能とデザインが組み込まれたテンプレートです。HTMLやCSSの知識が少なくても、テーマを活用することでECサイトの構築が可能です。Shopifyのテーマストアから、様々なタイプのテーマを選択できます。

ShopifyのテーマはHTMLのように1ページではありません。それぞれのコンテンツを構成するためのデータは複数のディレクトリに分かれています。テーマはShopifyの管理画面のオンラインストアから選択できます。

テーマの構造を確認する際は、テーマのカスタマイズボタンの左横にある「・・・」をクリックしコードの編集を確認しましょう。

コードの編集をクリックすると、ECサイトの構成データがディレクトリ毎に格納されています。ディレクトリ内にはCSS、JavaScript、JSON、Liquidなどのファイルが含まれます。

ECサイトでカスタマイズする機会が多いのは、セクションの項目です。続いて、セクションを自作する方法やできることを紹介します。

自作セクションでできること

Shopify管理画面のストアページのカスタマイズを選択すると「セクションを追加」や「ブロックを追加」という文字が表示されています。

管理画面から追加した後にコード編集をクリックすると、追加したセクション部分がLiquidファイルに追加されています。これらのデータは、以下のタグを用いて記述されているので確認しましょう。

JavaScriptやStylesheetを使用しない場合、Schemaのみ記述されていることもあります。

必要な言語

Shopifyのセクションを自作するために必要な言語は、以下の5つです。

セクションを自作する際にもっとも必要なのはLiquidです。しかし、カスタマイズしたい内容によってはJSONやJavaScriptの設定を変更する必要もあります。セクションの変更だけでなくテーマ全体にカスタマイズが及ぶ場合は、RubyやRUST、GraphQLなど幅広い知識が求められるでしょう。

Shopify・ECサイトの集客・運用でお困りですか？

Shopify・ECサイトの集客・運用・制作まで、お困り事にプロ集団がご支援させていただきます。

Shopify・ECサイトの悩みを相談

Shopifyセクションを自作しよう

Shopifyでセクションを自作する際の手順は次のとおりです。

ECサイト全体のデザインや機能を明確にし、自作したいコンテンツ内容を確認し、どのようなプログラム言語の知識が必要か確認しましょう。

デザイン＆機能を明確にする

Shopifyでセクションを自作する際に気を付けるポイントは、ECサイトのデザインや機能を明確にしておくことです。

セクションの自作とアプリの導入と、デザインや機能面を損なわないようなカスタマイズが求められます。

LiquidやJSONで自作するよりアプリを導入した方が利便性が増す可能性もあります。

セクションファイルを作成する

それでは、実際にShopifyでセクションを自作してみましょう。今回はFAQ（よくある質問）のセクションの追加にチャレンジしてみます。

セクションを自作する際にまずおこなうのは、Shopifyのテーマディレクトリにあるセクションフォルダ内に新しい .liquidファイルを作成します。

管理画面→オンラインストア→テーマ→カスタマイズ横の「・・・」をクリックしコード編集を選びましょう。

セクションフォルダをクリックし「新しいセッションを追加する」をクリックします。

新しいセクションを追加する画面に遷移します。今回作成したいのはLiquidファイルなので、liquidを選択しファイル名を入力しましょう。

今回はよくある質問なので分かりやすく「faq.liquid」にしました。

完了ボタンをクリックし管理画面に戻るとfaq.liguidファイルの作成が完了しているので確認してください。

自作セクションのファイル構造

セッションの部分で新しいliquidファイル「faq.liquid」を作成すると、Shopifyのテーマページにもセッションが追加されます。「settings」内でファイル構造は次のとおりです。

“settings”: []で設定するキー（属性）は、以下5種類が基本となっています。

このなかでid、type、labelの3種類は入力必須項目です。実際に入力してみましょう。

実際にfaq.liquidでtypeとid、labelなどの情報を入力すると次のように反映されます。

「faq.liquid」では、ファイルの上部にHTMLで記述できるように設定しています。

画像ではデザインのコーディングを一切おこなっていないので、見映えのよくない状況になっていますが、Shopifyでは、HTMLやカスタムCSS、Javascriptの記述も可能なので、コードを追加するとデザインの調整も可能です。

動的コンテンツを表示するにはLiquidとJSONを活用

Shopifyは基本機能は充実しているものの、動的コンテンツを表示するには、LiquidやJSON、次に紹介するCSSやJavaScriptでのカスタマイズも必要になります。どのようなカスタマイズをしているのか紹介します。

このようにLiquidやJSONを活用すると、ECサイトで動的コンテンツを表示できるため、ほかのECサイトとの差別化を実現できるでしょう。

CSSとJavaScriptが必要になるカスタマイズ

CSSとJavaScriptが必要になるカスタマイズの事例を紹介します。

HTML要素でタグ付けをおこない、CSSスタイルやJavaScriptの機能を活用し、動的なコンテンツの表現を実装しています。

Shopifyのセクションを自作する際の注意点

Shopifyでセクションを追加した場合の注意点は以下のとおりです。

カスタマイズしたい内容によっては、LiquidだけでなくCSSやJSON、JavaScriptの知識が必要になるケースもあります。

公開中のテーマでテストを行わない

Shopifyでのカスタマイズはリアルタイムに反映されてしまいます。現在、公開しているテーマでカスタマイズすると、保存した内容はそのまま公開されてしまいます。

カスタマイズを行い実装テストをおこなう場合は、テーマ情報をコピーしてテーマは非公開の状態で行いましょう。

自分で操作するのが難しい場合は専門家へ相談

カスタマイズの内容によって設定しなければならないファイルは異なります。セクション内のLiquidファイルの記述だけでなく、レイアウトや設定を変更しなければならない場合もあるでしょう。

LiquidだけでなくJavaScripやCSSなどの知見も必要になる場合があります。自分で操作するのが難しい場合は、PLAYBIT（プレイビット）など構築を専門としている会社に相談する方法をおすすめします。

Liquidを活用してShopifyテーマで動的コンテンツを表示しよう

Shopifyには目的に応じて様々なテーマが用意されています。ECサイトでユーザーに商品を購入してもらうには動的コンテンツの表示が欠かせません。

Liquidを活用することでセクションを自作し、動的コンテンツも表示できます。まずは簡単な内容からテーマセクションの自作にチャレンジしてみましょう。

スライドショー アプリを見る

株式会社プレイビット

Shopifyを活用したECサイトの構築・運用の支援サービスを提供しています。
Shopifyの制作・運用に特化したプロ集団が、トータルサポートさせていただきます。ご相談等ございましたら、下記フォームよりお気軽にお問い合わせください。

Shopify制作のご相談

Shopify制作・運用に関するご相談等は、こちらからお気軽にご連絡ください。新規構築から、システム移行まで幅広く対応しております。