「Shopifyテーマのカスタマイズをしたいけど、コードの編集方法がわからなくてできない。」
そんな悩みをお持ちの方はこの記事をご参考にしてください。
初心者向けに、Shopifyテーマのコード編集・カスタマイズ・注意点を詳しく解説しています。
記事を読むことでテーマのカスタマイズ方法やコード編集について理解できるはずです。
Shopifyとは、世界最大のECプラットフォームです。
ノーコードツールに分類され、プログラミング不要でECサイトを作成できます。
世界中の言語・決済方法を網羅しており、越境ECに強い特徴があります。
参考：Shopify（ショッピファイ）とは？メリット・機能・料金・決済方法・導入まで。
Liquidについて
Shopifyテーマのコード編集に重要なLiquid（リキッド）について解説します。
LiquidとはShopify独自のプログラミング言語です。HTML内に直接記述することができるため、デザイナーの方でも比較的扱いやすいです。
他のテンプレート言語同様にHTMLファイルとデータの橋渡しをします。
・Liquidの注意点
Liquidを使用する注意点は主に3つです。
1.アプリの使用でLiquidのファイルが増える
アプリによりますが、アンインストール後もLiquidファイルだけ残ってしまうことがあります。
アプリのアンインストール後はファイルも消去されているか確認をして下さい。
2.ディレクトリ記述の間違い
Liquidには複数のディレクトリがあり、それぞれが違う役割を担っています。
エラーが出た場合はディレクトリの間違いがないか確認してください。
3.チェックアウト画面のカスタマイズがプランによりできない
チェックアウト画面のカスタマイズはShopify plus以外のプランでは編集ができない仕様となっています。
カスタマイズをする場合はShopify Plusにプランを変更する必要がありますが、Shopify Plusは他のプランと比較してかなり高額なので、チェックアウト画面のカスタマイズだけのためにプランを変更することはおすすめしません。
＊Shopify Plus
Shopifyのエンタープライズプランに当たります。費用は月額$2,000となっておりかなり高額です。
Shopifyテーマのカスタマイズ方法｜初心者向け
Shopifyテーマのカスタマイズ方法を解説します。Shopifyテーマのカスタマイズ方法は主に3つです。
1.管理画面からテーマエディタで編集：一番簡単
2.管理画面からコード編集：コード編集の知識がある人におすすめ
3.ローカル環境でカスタマイズ：本格的にカスタマイズ
順番に解説します。
管理画面からテーマエディター編集
管理画面からテーマエディターを使用して編集する方法が一番簡単です。
コードの編集が必要ないため、HTML・CSSの知識が必要なく簡単な操作でテーマのカスタマイズができます。
1.「テーマ」をクリック。
2.「カスタマイズ」をクリック。
3.赤枠で囲ってある箇所からお好みの項目をドラッグ＆ドロップで配置する。
以上で完了です。
管理画面からコード編集
管理画面からコード編集する方法はコード編集の知識がある人におすすめです。
テーマエディタを使用したカスタマイズより細かなカスタマイズができます。
1.「テーマ」をクリック。
2.「アクション」から「コードを編集」を選択。
3.赤枠で囲った箇所から編集したいフォルダを選択して編集。
ローカル環境でカスタマイズ
ローカル環境でカスタマイズする方法は、本格的なカスタマイズをしたい方におすすめです。
ご自分のPC上にテーマをダウンロードして、コードエディタ上で編集します。
＊ローカル環境でのカスタマイズにはShopify Theme Kitを使用しローカル環境の構築が必須です。
・Shopify Theme Kit
Shopify Theme KitとはShopifyテーマを開発するためのツールです。本来Shopifyテーマを独自に作成するためには、Shopify独自のサーバーを使用する必要があります。
Shopify Theme Kitを使用しローカル環境を構築することで独自のテーマの開発・カスタマイズが可能になります。
1.「テーマ」をクリック。
2.「テーマファイルをダウンロード」を選択。
ファイルのダウンロードが完了したら、コードの編集をしてかんりょうです。
＊コードの編集には専門的な知識が必要ですので、知識がある方のみ編集してください。
Shopifyで編集可能なフォルダ
Shopifyで編集可能なフォルダは7つあります。
| ファイル名 | 役割 |
| Templates | 商品ページや404ページなど各ページの画面を構成するテンプレート。 |
| Sections | 各ページのブロック的要素であるスライドショーや、ヘッダーやフッターの構成。 |
| Layout | 各ページのレイアウトを構成する。 |
| Snippets | テンプレートから呼び出されるデザインの要素。 |
| Config | サイト設定のための.jsonが格納されている。 |
| Locales | 言語設定のための.jsonが格納されている。 |
| Assets | アイコン画像やJavaScriptなどの静的ファイル。 |
Shopifyテーマのコード編集｜注意点
Shopifyテーマのコード編集をする注意点を解説します。
1.テーマを複製しバックアップを作成する
テーマの作成で元に戻したい場合にすぐ戻せるようにバックアップを作成してください。
＊オンラインストアで追加できるテーマの数は20個までです。20個を超えてテーマを使いする場合は既存のテーマを消去してください。
バックアップの作成手順は、以下の通りです。
1.「テーマ」をクリック。
2.「複製」か「テーマファイルをダウンロード」をクリック。
2.テーマのサポート内容を確認する
テーマのカスタマイズをする前にそれぞれのテーマのサポート内容を確認してください。
テーマによりますがカスタマイズのサポートを受けられます。
ベーシックプラン以上では60分間のデザインサポートを無料で受けることができるのでご活用ください。
Shopifyテーマのコード編集方法｜初心者向け
具体的なコード編集方法は、こちらのサイトをご参考にください。
Shopifyテーマの作成方法
Shopifyテーマを自作で作成する場合は、Shopify Theme Kitのインストールが必要です。
詳しいテーマの作成方法はこちらをご参考にください。
Shopifyのカスタマイズ方法｜ページ別
ページ別のShopifyカスタマイズ方法を解説します。
・Shopifyのカスタマイズ方法｜固定ページ
・Shopifyのカスタマイズ｜トップページ
・Shopifyのカスタマイズ｜商品詳細
順番に解説します。
Shopifyのカスタマイズ｜固定ページ
1.「ページ」をクリック。
2.「ページを追加」をクリック。
3.画像内の項目を入力。
4.「保存」をクリックして完了です。
Shopifyのカスタマイズ｜トップページ
1.「テーマ」をクリック。
2.「カスタマイズ」をクリック。
赤枠で囲った箇所からテーマをカスタマイズできます。
「セクションを追加」をクリックしてパーツを新規作成できます。
今回は「テキストオーバーレイ付き画像」を例に説明します。
「画像を選択する」をクリック。
2.画像を選択。
以下のように反映されたら完了です。
Shopifyのカスタマイズ｜商品詳細
Shopifyの商品詳細のカスタマイズについて解説します。
＜コードを編集しないでカスタマイズ＞
1.「商品管理」をクリック。
2.青枠で囲ってある商品をクリック。
3.画像内の必要な箇所に入力。
4.保存をクリックして完了。
＜コードを編集してカスタマイズ＞
1.「テーマ」をクリック。
2.「コードを編集」をクリック。
3.「Templates」を選択。
4.「Product.liquid」を選択。
5.コードを編集して完了。
Shopifyテーマのカスタマイズ・コード編集｜まとめ
Shopifyテーマのコード編集・カスタマイズ方法について解説しましたが、参考になったでしょうか？
Shopifyはノーコードツールのため、基本的なカスタマイズであればドラッグ＆ドロップの簡単な操作でカスタマイズが可能です。
簡単なカスタマイズのみでECサイトを運営するには充分ですが、よりユーザの利便性やストアの機能性を高めるために、細かなカスタマイズが必要になることがあると思います。
細かなカスタマイズには、HTML・CSSの知識などが必要になるため、お困りの際はぜひ我々【ツクル事業部】にお任せください。
カスタマイズは勿論、ECサイトを運営までサポートさせて頂きます。
Shopifyに興味がある方はまず無料のトライアルから始めてみてください。
最後まで読んで頂きありがとうございました。
また 株式会社ニュートラルワークスさんが運営する「QUERYY」では「Shopifyのデザインをカスタマイズする方法!コード編集や使い方も解説」を紹介しています。
併せて参考にしてみてください。
