shopifyのコード編集

「Shopifyでテーマコードを編集する方法が知りたい!」「Shopifyで使用されているLiquidって何?」そうお悩みではありませんか?

Shopify(ショッピファイ)では独自のテンプレート言語であるLiquidが使用されており、テーマのカスタマイズを行うには、Liquidの仕組みを理解した上でコードを編集する必要があります。

Shopifyは既存のテーマをカスタマイズして、オリジナルテーマを作ることができます。テーマの独自性は、他のサイトとの差別化になるので、この記事を参考にコードの編集を行ってみてください。

Shopify(ショッピファイ)で使用されているLiquidとは

Shopify(ショッピファイ)ではLiquidという独自言語が使用されています。ベースはRubyで、さまざまなプロジェクトで利用されています。

Shopifyでテーマをカスタマイズするには、このLiquidの基本を理解しておく必要があります。Liquidの特徴を大きく分けると次の2つです。

Liquidの特徴
  • HTMLを直接編集できる
  • テンプレート言語

Liquidは、HTMLの文中にコードを直接書くことで処理や出力できます。HTMLを直接編集できるので、デザイナーだけでも簡単に構築可能です。

そして、Liquidはテンプレート言語といって、HTMLファイルとデータの橋渡しを行い、PHPのようなWeb中心の言語と似ています。Liquidについて詳しく調べる場合は、Shopify公式ドキュメントから「SHOPIFY THEMES」を確認してください。

Shopify(ショッピファイ)テーマをカスタマイズする方法

次に、Shopify(ショッピファイ)のテーマをカスタマイズする方法を3種類解説します。

Shopifyテーマをカスタマイズする方法
  • 管理画面からテーマエディターで編集する
  • 管理画面からコード編集する
  • ローカル環境でカスタマイズする

コード編集ができない場合は、テーマエディターを使用します。コードが編集でき、部分的なカスタマイズの場合は管理画面から、本格的にカスタマイズする場合はローカル環境で行うのがおすすめです。

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

最も簡単にカスタマイズできる方法は、Shopify管理画面からテーマエディターを使用する方法です。HTMLやCSSノ知識がなくても、コードを一切編集することなく、コンテンツの配置や配色変更、テキスト変更が可能です。

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

Shopifyの管理画面から「現在のテーマ」を選択し「カスタマイズ」をクリックします。

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

するとカスタマイズ画面が表示され、追加したいコンテンツを左側の項目からドラッグ&ドロップで配置できます。

管理画面からコード編集する

次に、管理画面からコードを直接編集する方法もあります。コード編集の知識がある方は、テーマエディターよりも編集しやすいでしょう。

管理画面からコード編集する

Shopify管理画面から「現在のテーマ」を選択し「アクション」→「コード編集する」をクリックします。

コード編集する

以下のフォルダをそれぞれカスタマイズできます。

  • Layout
  • Templates
  • Sections
  • Snippets
  • Assets

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

3つ目の方法は、Shopify管理画面からではなく、ローカル環境でカスタマイズする方法です。自分のPCにテーマのダウンロードを行って、コードエディター上で編集します。

管理画面からコード編集を行うよりも、コードエディターを使用した方がカスタマイズしやすいです。

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

まずは管理画面から「現在のテーマ」を選択し「アクション」から「テーマファイルをダウンロードする」をクリックします。ローカル環境を構築するには、Shopify Theme Kitをインストールして行います。

ローカル環境でコード編集を行うには専門的な知識が必要になるので、ここではShopify上でコード編集を行う方法を解説します。

Shopify(ショッピファイ)テーマコードの編集方法

Shopify(ショッピファイ)テーマコードの編集手順は以下の方法で行います。

Shopifyテーマコードの編集方法
  • テーマを複製する
  • コードを編集する
  • CSSを記述する
  • CSSを読み込ませる
  • プレビューにて確認する
  • 本番環境に反映する

簡単なCSSの編集は、Shopify管理画面から行うコード編集で十分行えます。

テーマを複製する

コードをいきなり編集する前に、まずはバックアップを保存する目的でテーマの複製を行います。

テーマを複製する

Shopify管理画面から「現在のテーマ」を選択し「アクション」から「複製する」をクリックします。複製すると「テーマライブラリ」にテーマのコピーが追加され、複数のテーマを管理できるようになります。

コードを編集する

コードを編集する

次に、複製したテーマの「アクション」から「コードを編集する」をクリックして、テーマエディターを立ち上げます。

CSSを記述する

テーマのCSSを編集したい場合は、Assetsフォルダ内に新しいCSSファイルを追加して記述します。

CSSを記述する

「Assets」をクリックして「新しいassetを追加する」を選択します。そして、「空のファイルを作成する」の項目から「.scss.liquid」を作ります。

ファイル名は他のファイルと被らない名前を付けてください。ファイルが作成できればCSSを記述できるようになるので、カスタマイズしてみてください。

変更内容は画面上部のプレビューからいつでも確認できます。

HTMLを記述する

HTMLを記述する方法は、コード編集からではなく商品ページやブログ記事を追加して行います。HTMLの記述方法がわからなくても、WordPressのエディターのように直感的に見出しや箇条書きなどを追加できます。

HTMLを記述する

CSSを読み込ませる

記述したCSSを読み込ませるには「Layout」内の「theme.liquid」を開いて{{ ‘theme.scss.css’ | asset_url | stylesheet_tag}}の記述を探します。そして、記述の以下に先ほど作成したCSSファイルを記述します。

{{ ‘〜〜.scss.css’ | asset_url | stylesheet_tag}}

プレビューにて確認する

プレビューにて確認する

記述した内容を保存したら、テーマライブラリの「アクション」から「プレビュー」をクリックします。すると、デモサイトが表示され、記述したHTML&CSSが表示されているか確認できます。

本番環境に反映する

プレビューでカスタマイズが問題なく行われていることを確認できたら、テーマの「アクション」から「公開する」をクリックします。すると本番環境にカスタマイズが反映され、ストアデザインが更新されます。公開すると最初に複製したコピーのテーマが「現在のテーマ」に切り替わります。

以前の状態に戻したい場合は、複製前のテーマを本番環境に反映させましょう。

本番環境に反映する

Shopify(ショッピファイ)でコード編集可能なフォルダ

Shopify(ショッピファイ)でコード編集可能なフォルダは次のとおりです。フォルダは階層構造になっており、Layout→Templates→Section→Snippetsの順になっています。

Shopifyでコード編集可能なフォルダ
  • Layout
  • Templates
  • Sections
  • Snippets
  • Assets
  • Config
  • Locales

Layout

Layoutは、サイト全体に関わるHTML要素が記載されており、theme.liquidフォルダがあります。theme.liquidにはheader、body、footerが含まれています。

Templates

Templatesは、トップページや商品ページなど、個別ページごとのファイルになります。また、ページごとにliquidファイルが収納されています。

Sections

Sectionsは、カスタマイズ管理画面のセクションパーツに関するファイルが入っています。

  • ヘッダー
  • コレクション
  • 商品特集
  • ニュースレター
  • フッター

各ページに使用できる共通パーツが入っているので、カスタマイズの際は間違って書き換えないように注意が必要です。

Snippets

Snippetsは、Sectionsよりも細かいパーツを記載したLiquidファイルを収納しています。LayoutやTemplates、Sectionsのフォルダに{% include ‘〜〜’ %}と記載すると、Snippets内のLiquidファイルを読み込むことができます。

Assets

Assetsは、JavaScriptやCSSを収納しているフォルダです。他にもpngやsngなどの画像ファイルの格納も可能です。

Config

Configは、テーマ全体に関係するJavaScriptを収納しているフォルダです。

Locales

Localesは、各言語に関係するJavaScriptを収納しているフォルダです。Shopify管理画面の「テーマ言語を編集する」でも設定できます。

まとめ

今回は、Shopify(ショッピファイ)でコード編集を行って、テーマをカスタマイズする方法を解説しました。テーマをカスタマイズする方法には以下の3種類があります。

  • テーマエディターで行う方法
  • Shopify上でコード編集を行う方法
  • ローカル環境でコード編集を行う方法

部分的なカスタマイズを行う場合はテーマエディターもしくはShopify上のコード編集、本格的にカスタマイズする場合はローカル環境で編集しましょう。

Shopifyのテーマを編集して、売り上げ向上につなげるには、専門的なマーケティングノウハウや業界知識などが必要です。Shopify Guideは、メディアの運営によってShopifyに関する幅広く情報を得ているため、Shopifyでの運営ノウハウを共有したりコンサルティングしたりすることができます。

Shopifyの売り上げを増やすには、Shopifyの運営知識を持ったパートナーを見つけることが近道です。お困りの方は、こちらの問い合わせフォームからお気軽にお問い合わせください。