カスタムコードは、コーディングの専門知識を持つユーザーがオンラインストアの外観と機能を強化するための強力なツールです。カスタムHTML、CSS、またはトラッキングコードをストアページに直接追加することで、ストアフロントのスタイルをカスタマイズし、マーケティング活動を改善し、Google AnalyticsやFacebook Pixelなどの重要な分析ツールを統合できます。
この記事では、カスタムコードアプリを使用してコードの追加、設定、有効化/無効化の手順を説明します。
目次
コードの追加
カスタムコード を使用すると、複数のコードを同時に追加でき、それぞれを独立して管理できます。次の手順に従ってコードを追加してください:
- SHOPLINEの管理画面から、アプリ > カスタムコード に移動します。まだインストールされていない場合は、アプリをインストールします。
-
アプリのホームページで、コードを追加 をクリックします。
- コードを追加するページでコードを入力してください。
Note: カスタムコードは、公開済みのテーマと未公開のテーマの両方に有効です。 |
コードの設定
カスタムコードを設定する際には、構成オプションの動作方法を理解することが重要です。 追加 をクリックすると、コードが即座に有効になります。
- コード名: 管理しやすいようにコードに説明的な名前を割り当てます。
- ページトリガー:コードを適用するページテンプレート(例:カスタムページ)を選択します。特定のページにコードを適用する場合は、Handlebarsテンプレート構文を使用してください。例:{{#if page.handle ‘===’ ‘custom page handle’}}ここにコードを入力{{/if}}
- コード内容:ページに適用したいコードを入力します。アプリは、動的なコード配置を可能にするHandlebarsテンプレート言語をサポートしています。
-
表示オプション:コードを適用するデバイスを選択します: PCとモバイルPCのみモバイルのみ挿入位置:コードを挿入する位置を選択します:
- トップ:ページコンテンツの前にコードが読み込まれます。ページ要素に依存しないコードに最適です。
- ボトム:ページコンテンツの後にコードが読み込まれます。既に読み込まれている要素を変更するのに適しています。
コードの設定が完了したら、追加 をクリックして保存します。
Note: テーマ固有の機能は異なる場合がありますので、異なるテーマのスタイルをカスタマイズする際にはこれらの違いを考慮してください。 |
コードの有効化と無効化
カスタムコードを追加すると、デフォルトで 有効 になります。必要に応じてコードを有効または無効にできます。
- 有効:コードがアクティブでページに適用されます。
- 無効:コードが失効し、適用されません。
コメント