Shopify は、起業家が希望するあらゆる e コマース ビジネスに使用できる 100 を超えるテーマを提供しています。ほとんどの場合、テーマ (そのままの状態) は成功するオンライン ビジネスを構築するのに十分です。しかし、より多くの機能を求める Web 開発者は、 Shopify コード エディターを使用してテンプレートの機能を強化します。
Shopify には、あらゆるビジネスに適したテーマがあります。そして、ほとんどすべての Shopify テーマには、e コマース ビジネスを運営するために必要なすべての機能が備わっています。テーマごとに大きく異なるのは、デザインと実行方法です。
現実には、特定のビジネス アイデアには適しているものの、特定の機能が欠けているテンプレートがあります。十分に優れているものの、さらにカスタマイズしてさらに優れたものにする必要があるテーマもあります。通常、これらの問題はShopify テーマ エディターから対処できます。
しかし、テンプレートがテーマ エディターによるさらなる調整を提供していない場合、Web 開発者には別の手段があります。それは、すべての Shopify ストアの「DNA」へのアクセスを提供するShopify コード エディターです。
概要
- 何よりもまず…
- Shopify コードエディターの概要
- Liquidについてさらに詳しく
- やめてください！Shopify コード エディターを使用する前にこれらを実行してください
- Shopify Liquidを学ぶ
- コードを編集するよりも簡単な方法があります
- 結論：本当に重要なことに焦点を当てる
何よりもまず…
先に進む前に、まず物事を整理しましょう…
この記事の目的は、Shopify のテンプレート言語である Liquid を使用してコーディングする方法を教えることではありません。Shopify テーマ ファイルの編集には長い説明が必要であり、1 つの記事では十分ではありません。むしろ、ストアのバックエンドでコードを編集する前に知っておく必要のある事項について説明します。
それでも、Liquid を使用してコードを編集する方法を学習する決心を固めている場合は、この記事全体にわたるリンクを通じて適切なオンライン リソースを紹介し、コーディングの旅が正しい方向に向かっていることを保証します。
この記事にリンクされている学習教材は、学習して完全に理解するには何時間もかかります。したがって、学習できる範囲だけを学習することが重要です。学習教材を 1 日で一気に学習しないでください。代わりに、一度に 1 つずつ学習してください。
さて、準備は整いましたので、始めましょう。
Shopify コードエディターの概要
Shopify テーマは、オンライン ストアの機能全体を担うものです。これらのテンプレートの下には、プログラミング言語で書かれたテーマ ファイルがあり、それらが連携して動作し、オンライン ストアで目にするようなエクスペリエンスを提供します。
Shopify は、HTML、CSS、JavaScript、JSON とともに Liquid をメインのテンプレート言語として使用しています。これらすべてのプログラミング言語を使用することで、Web 開発者はクライアントの希望する外観と操作性に合わせてテンプレートを一から開発できます。
さらに、コード エディターを使用してコマンドやロジックを入力することで、開発者は Shopify テーマ ファイルを変更して他の要素を変更したり、 Shopifyテーマ エディターでネイティブに利用できない機能を追加したりできます。
Shopify コード エディターと Shopifyテーマ エディターは異なるものであることに注意してください。前者は、コードを入力してテーマ ファイルにアクセスするために使用するものです。後者は、コードを入力または編集することなく、Shopify ダッシュボードからアクセスするものです。
Liquidについてさらに詳しく
Liquid は、Shopify テーマに実装されている主要なテンプレート言語です。そのため、プログラミング言語の背後にあるロジックと、入力した各内容の効果を知ることが重要です。
テーマコードを編集すると何が起こりますか?
Liquid ファイル内のテーマ コードを編集すると、テンプレートから必要な外観と操作感を実現できますが、そうすることで欠点が生じる可能性があります。
Shopify は開発者に対して次の点を警告しています:
「テーマのコードを編集すると、アップデートができなくなる可能性があります。Shopify アプリやテーマ エディターを使用して必要な変更を加えることができない場合にのみ、テーマのコードを編集してください。」
また、前述のように、Shopify には 4 種類のプログラミング言語が含まれていることも注目に値します。そのため、今は明らかではないかもしれませんが、将来オンライン ストアに悪影響を与える可能性のある間違いを避けるために、これらすべての言語がどのように連携して、また個別に機能するかを知ることが重要です。
やめてください！Shopify コード エディターを使用する前にこれらを実行してください
Shopify テーマ ファイルの編集では、ミスを犯すと有害な結果を招く可能性があるため、テーマ コードを編集する前に必要な予防措置を講じることが重要です。これは、ライブ Web サイトを扱っている場合に特に重要です。何をしているのかわからないと、ミスによって機会を逃す可能性があります。
コード エディターを使用する前に実行する必要がある 4 つのことは次のとおりです。
01. Shopifyテーマエディタを使用して編集してみる
ウェブサイトの機能をカスタマイズする場合、Shopifyコード エディターの使用は最後の選択肢になります。ほとんどのオンライン ストアでは、 Shopify テーマ エディターのツールでストアを最適化し、ユーザー エクスペリエンスを向上させるのに十分です。
ステップ 1: Shopify ダッシュボードの左端のパネルで、[オンライン ストア] をクリックします。
クリックすると、デフォルトで「テーマ」メニューにリダイレクトされます。画面の中央に、現在使用しているテーマと、「テーマ ライブラリ」にある他のテーマが表示されます。
ステップ 2:現在のテーマで、「カスタマイズ」という緑色のボタンをクリックして、テーマ エディターを開きます。
テーマ エディターの [ホームページ] メニューには、ホームページのさまざまなセクションを編集するためのさまざまなタブが表示されます。選択したテーマに応じて、これらのタブは異なる場合があり、特定のテーマでのみ使用できる他の種類のセクションがある場合があります。したがって、1 つのテーマにコミットする前に、Shopify テーマを調べることが重要です。
ストアの色、書体、ボタン、その他の変数を編集したい場合は、「テーマ設定」をクリックします。
最後に、「アプリ埋め込み」ボタンをクリックして、オンラインストアにサードパーティのアプリをインストールできます。ここでは、アップセル、チェックアウトカートのリマインダー、電子メールマーケティングの実装などに役立つアプリを追加できます。
02. 現在のテーマ設定を複製する
コード エディターをいじくり回すつもりが本当にある場合は、テーマの現在の設定を保存しておくことをお勧めします。そうすれば、問題が発生した場合でも、オンライン ストアで完全に機能する古い設定にいつでも戻すことができます。
テーマ コードを編集する際は、「保存」をクリックするとすぐに変更が有効になることに注意してください。そのため、初心者の場合は間違いが起こる可能性があるので、これを行うときは何もチャンスを逃さないことが最善です。
現在のテーマ設定を複製するには:
ステップ1:メインダッシュボードに戻り、「テーマ」をクリックします。
ステップ2:カスタマイズの横にある3つのドットのボタンをクリックします
ステップ3: 「複製」を選択します。
「複製」を選択すると、テーマのコピーがテーマ ライブラリに保存されます。元に戻す必要があるときに探すのに苦労しないように、複製ファイルの名前を変更してください。
作業の進捗状況を追跡しやすくするために、現在の時刻と日付を使用してファイル名を変更することをお勧めします。
03. カスタム CSS ファイルで十分か確認する
テーマ エディターには、 Shopify コード エディターを詳しく調べる前に、カスタマイズをすばやく実装するための別のオプションがあります。これらは、カスケーディング スタイル シート(CSS) の形式で提供されます。
Shopifyテーマ エディターのテーマ設定メニューで「カスタム CSS」にアクセスできます。
CSS を学ぶための 12 分間の簡単なガイドをご紹介します。
CSS と HTML をさらに深く学びたい場合は、こちらに完全なコースがあります。
HTML と CSS を学ぶのは大変な作業であることは承知しています。しかし、コーディングの基礎を学びたいのであれば、これが最初のステップになります。コードの追加や編集を始めるときに何時間も混乱したり、頭を悩ませたり、イライラしたりしないように、今から時間をかけてこれらのことを学んでください。
04. 一度にひとつずつ変化
CSS と HTML の仕組みがわかったので、テーマ コードに直接変更を実装し始めることができます。しかし、コードを編集する自信が新たになった一方で、一度に複数のファイルを編集したくなることもあります。
停止。
一度に 1 ステップずつ実行し、変更が発生したときにそれを確認します。一度に複数のファイルを編集しないでください。エラーの原因とコードの影響が発生したときにそれを頭の中で理解する方がよいでしょう。
Shopify Liquidを学ぶ
テーマ エディターで CSS を使用して変更を加えることはできますが、CSS と HTML は Shopify テーマ コード全体の一部にすぎないことを覚えておく必要があります。Shopify のメイン テンプレート言語である Liquid という、まだ無視できない問題が残っています。
今、私たちはShopify コード エディターに向けてさらに一歩進んでいます。
液体の基礎
Shopify の専門家である Keir Whitaker によるこの記事は、Liquid を表面的に理解するのに役立ちます。また、ストア内のさまざまな種類の Liquid ファイルとコードの効果についても説明します。
Shopify Liquid クラッシュコース
さらに役立つように、Liquid ファイルについて詳しく学びたい初心者向けの短期集中コースを用意しました。
このビデオには 4 つの部分が含まれています:
- 液体タグとフィルター
- オブジェクト
- JSONスキーマ
- Liquid の範囲と制限。
手順をよりよく理解するために、必ず自分のコード エディターで従ってください。Liquid ファイルを開き、ビデオの演習を実装します。
クラッシュ コースを開始するには、ビデオをクリックしてください。
その他の学習教材
記事を読み終え、短期集中講座を視聴しましたか? 今度は、これまでの旅で学んだことを実践する番です。
その前に、オンラインストアの複製を作成しましたか? まだ作成していない場合は、今が最適なタイミングです。以下に、 Liquid チートシートを掲載しました ( **誰にも言わないでください** ) 移動中に必要となるすべてのコードにアクセスできるようにします。
コードを編集するよりも簡単な方法があります
実のところ、Web サイトのユーザー エクスペリエンスを向上させるために Liquid ファイルの編集方法を学ぶ必要はありません。
Shopify コード エディターは、主に経験豊富な開発者が新しいテンプレートを設計したり、既存のテーマを改善したりするために使用するツールです。実際、コード エディターの使用は、オンライン ストアを改善する際の最後の手段にすぎません。
選択したテーマが要求や期待を満たさない場合は、コードを編集することなく、Web サイトでより多くのカスタマイズ機能を有効にできるサードパーティ アプリがあります。
使用できるアプリの 1 つは、 PageFly のようなページ ビルダーです。
PageFly を使用すると、ドラッグ アンド ドロップ プロセスでストアをカスタマイズできます。クリック可能な要素やアニメーションを追加したり、Web サイトの速度を向上させたり、テーマでは通常実現できないその他のことを行うことができます。
PageFly でできることのいくつかを説明する 9 分間のビデオを以下に示します。
結論：本当に重要なことに焦点を当てる
起業家として成功するには、最も重要なことと、ビジネス全体に役立つ側面に焦点を当てることが最も重要です。eコマースのみでビジネスを行っている場合は、Web サイトを最優先事項の 1 つにする必要があります。
しかし、これは、コードの編集方法を含め、Web サイトを機能させるために必要なすべてのことを学ぶ必要があるという意味ではありません。テーマ エディターやページ ビルダーを使用して Web サイトの使用方法や小さな変更方法を知ることは重要です。ただし、Liquid などの技術的なことは、間違いを避けて適切に実行するために専門家に任せる必要があります。
さらに、eコマースビジネスを始めたばかりの場合、またはすでにしばらく運営している場合でも、コードエディターに触れる必要はまったくない可能性があります。ただし、必要な場合は、いつでもShopify Expertsを通じて主題の専門家を雇うことができます。
最も重要なことに集中し、技術的なことは専門家に任せることで、膨大な時間を節約し、ビジネスを次のレベルに引き上げることができます。成功に一歩近づきます。
