カスタムJavaScript

注目のリンク

1. セクションとブロックに関するShopifyドキュメント
2. Company XYZのカスタムJavaScriptブロックに関するドキュメント

役立つ動画

Shopify Academy動画：ストアをカスタマイズする

Shopify Academy動画：ストアをカスタマイズする

このブロックは、埋め込みフォーム、ウィジェット、サードパーティサービスなどのカスタムJavaScriptをページ内の特定の位置に配置する必要がある場合に使用します。影響を受けるコンテンツの近くに配置して管理しやすくする、小規模で対象を絞った追加に適しています。テーマエディターでのブロックの仕組みについて詳しくは、セクションとブロックに関するShopifyドキュメントを参照してください。

基本設定

コードフィールドには、このブロックで実行するJavaScriptを貼り付けます。scriptタグで囲まず、JavaScript本体のみを貼り付けてください。詳しくは、カスタムJavaScriptを参照してください。

JavaScriptのみを入力してください。コードと一緒にscriptタグを貼り付けると、ブロックが期待どおりに動作しない場合があります。

組み込み機能では同じ結果を実現できない場合にのみ、このブロックを使用してください。カスタムスクリプトは、ページの読み込み、動作、異なる画面サイズでの応答を変更する可能性があるため、更新するたびに慎重にテストしてください。

注意

サードパーティ製またはテストされていないコードは、ページ速度、アクセシビリティ、レイアウトの安定性、顧客とのインタラクションに影響を与える可能性があります。

標準ブロック設定

エディター設定

これらの設定を使用すると、エディター内でブロックを整理できます。特に同じテンプレートで複数のカスタムコードブロックを使用する場合は、エディタータイトルを設定して各ブロックに分かりやすい内部ラベルを付けてください。

説明的なタイトルを付けると、後でメンテナンスしやすくなります。ニュースレターフォーム、サイズガイドウィジェット、商品ページのトラッキングなど、ブロックの目的または配置場所に基づいて名前を付けてください。

使用上の注意

1. 各ブロックの目的を絞る。 テスト、トラブルシューティング、必要に応じた削除を簡単にするため、1つのタスクにつき1つのブロックを使用します。
2. コードを正しく貼り付ける。 保存する前に周囲のscriptタグを削除し、ブロックにJavaScriptの内容のみが渡されるようにします。
3. ブロックには分かりやすい名前を付ける。 複数のカスタムコードブロックを使用する場合は、スクリプトの目的または場所を反映したエディタータイトルを設定します。
4. 実際のページでテストする。 コードを追加または変更した後、デスクトップとモバイルで読み込み、スタイル、インタラクションを確認します。
5. カスタムコードは必要な場合にのみ使用する。 標準のテーマ設定では実現できない、正確な動作が必要な場合にこのブロックを選択します。