カスタムコード：総合的なガイド

カスタムコードは、コーディングの専門知識を持つユーザーがオンラインストアの外観や機能を強化できる強力なツールです。カスタムのHTML、CSS、またはトラッキングコードをストアのページに直接追加することで、ストアフロントのスタイルをカスタマイズし、マーケティング効果を向上させ、Google AnalyticsやFacebook Pixelなどのエッセンシャルな分析ツールを連携できます。

このガイドでは、カスタムコードアプリを使ってコードを追加、設定、そして有効化/無効化する手順を説明します。

コードの追加

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

1. SHOPLINE管理画面から、アプリ > カスタムコードに移動します。まだインストールしていない場合は、アプリをインストールしてください。

2. アプリのトップページで、コードを追加をクリックします。
   

3. コードを追加ページでコードの入力を開始します。

コードの設定

カスタムコードを設定する際は、設定オプションの動作を理解することが重要です。追加をクリックすると、コードは即座に反映されます。

• コード名：コードを管理しやすくするために説明的な名前を付けます。

• ページトリガー：コードを適用するページテンプレートを選択します（例：カスタムページ）。特定のページにコードを適用する場合は、Handlebarsテンプレート構文を使用します。例：{{#if page.handle ‘===’ ‘custom page handle’}}ここにコード内容{{/if}}

• コード内容：ページに適用したいコードを入力します。このアプリはHandlebarsテンプレート言語をサポートしており、動的なコード配置が可能です。

• 表示オプション：コードを適用するデバイスを選択します：PC版とモバイル、PC版のみ、またはモバイルのみ。

• 挿入位置：コードを挿入する場所を選択します：

  • 上部：ページ内容の前にコードが読み込まれます。ページ要素に依存しないコードに最適です。

  • 下部：ページ内容の後にコードが読み込まれます。既に読み込まれた要素を変更するのに適しています。

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

コードの有効化/無効化

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

• 有効: コードは有効で、ページに適用されます。
• 失効: コードは無効で、適用されません。