カスタムコードは、コーディングの専門知識を持つユーザーがオンラインストアの外観と機能を強化するための強力なツールです。カスタムHTML、CSS、またはトラッキングコードをストアページに直接追加することで、ストアフロントのスタイルをカスタマイズし、マーケティング活動を改善し、Google AnalyticsやFacebook Pixelなどの重要な分析ツールを統合できます。

この記事では、カスタムコードアプリを使用してコードの追加、設定、有効化／無効化の手順を説明します。

 

目次

• コードの追加
• コードの設定
• コードの有効化と無効化

 

---

 

コードの追加

カスタムコード を使用すると、複数のコードを同時に追加でき、それぞれを独立して管理できます。次の手順に従ってコードを追加してください：

1. SHOPLINEの管理画面から、アプリ > カスタムコード に移動します。まだインストールされていない場合は、アプリをインストールします。
2. アプリのホームページで、コードを追加 をクリックします。
   
3. コードを追加するページでコードを入力してください。

 

---

 

コードの設定

カスタムコードを設定する際には、構成オプションの動作方法を理解することが重要です。 追加 をクリックすると、コードが即座に有効になります。

• コード名： 管理しやすいようにコードに説明的な名前を割り当てます。
• ページトリガー：コードを適用するページテンプレート（例：カスタムページ）を選択します。特定のページにコードを適用する場合は、Handlebarsテンプレート構文を使用してください。例：{{#if page.handle ‘===’ ‘custom page handle’}}ここにコードを入力{{/if}}
• コード内容：ページに適用したいコードを入力します。アプリは、動的なコード配置を可能にするHandlebarsテンプレート言語をサポートしています。
• 表示オプション：コードを適用するデバイスを選択します： PCとモバイルPCのみモバイルのみ挿入位置：コードを挿入する位置を選択します：
  • トップ：ページコンテンツの前にコードが読み込まれます。ページ要素に依存しないコードに最適です。
  • ボトム：ページコンテンツの後にコードが読み込まれます。既に読み込まれている要素を変更するのに適しています。

コードの設定が完了したら、追加 をクリックして保存します。

 

---

 

コードの有効化と無効化

カスタムコードを追加すると、デフォルトで 有効 になります。必要に応じてコードを有効または無効にできます。

• 有効：コードがアクティブでページに適用されます。
• 無効：コードが失効し、適用されません。