カスタムコード

注目のリンク

1. セクションとブロックに関するShopifyドキュメント
2. カスタムコードセクションに関するCompany XYZドキュメント
3. カスタムアセットブロックに関するCompany XYZドキュメント
4. カスタムCSSブロックに関するCompany XYZドキュメント
5. カスタムJavaScriptブロックに関するCompany XYZドキュメント

役立つ動画

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

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

このセクションを使用して、カスタム CSS、JavaScript、または完全なアセット埋め込みをテンプレートに直接配置します。スタイルの上書き、埋め込みサービス、特定の領域でのみ読み込むスクリプトなど、ページ固有の高度な変更に最適です。

カスタムコードは、レイアウト、パフォーマンス、アクセシビリティ、インタラクティブな動作に影響する場合があります。変更を公開する前に、デスクトップとモバイルで慎重にテストしてください。

基本設定

このセクションには、視覚的なセクションコントロールは含まれません。代わりに、ブロックを使って構築するため、CSS、JavaScript、外部アセットの挿入を分けて管理しやすくできます。テーマエディターの構造の概要については、セクションとブロックに関するShopifyドキュメント を参照してください。

このセクションのヘルプテキストには、カスタムコード の正規の参照先が含まれます。実際には、このセクションは、より広範なサイト全体の変更ではなく、テンプレートレベルのカスタム動作が必要な場合に最適です。

対応ブロックタイプ

1. カスタムアセット
2. カスタム CSS
3. カスタム JavaScript

ブロックリファレンス

カスタムアセット

スタイルシートリンクや外部スクリプトタグなど、完全なアセットの挿入を貼り付ける必要がある場合は、このブロックを使用します。生の CSS や JavaScript ではなく、完全な埋め込みやアセットスニペットを提供するサードパーティサービスに適しています。ブロックリファレンスについては、カスタムアセット を参照してください。

1. 更新やトラブルシューティングを簡単に保つため、サービスまたはファイルごとに 1 つのブロックを使用します。
2. スタンドアロンの CSS ルールや JavaScript コードではなく、完全なアセット挿入にこのブロックを使用してください。

エディター設定

サイドバーで識別しやすくするために、ブロックのエディタータイトルを設定できます。これは、同じセクションに複数のサービスやファイルを追加する場合に特に便利です。

カスタム CSS

このブロックを使用して、style タグで囲まずに CSS ルールをテンプレートへ直接追加します。このテンプレートのコンテキストにのみ適用される、小規模で対象を絞った見た目の上書きに役立ちます。ブロックリファレンスについては、カスタムCSS を参照してください。

ヒント

セレクターの適用範囲をできるだけ狭く保つと、CSS の影響が意図した領域のみに限定され、今後のテーマ更新後も管理しやすくなります。

1. CSS ルールのみを貼り付けます。
2. 大きなカスタムスタイルシートではなく、絞り込んだ上書きにはこのブロックを使用してください。

エディター設定

スペーシングの修正やランディングページの調整など、目的が分かるようにエディターでブロック名を変更できます。分かりやすいタイトルにしておくと、後でクリーンアップしやすくなります。

カスタム JavaScript

このブロックを使用して、script タグを使わずに JavaScript をテンプレートへ直接追加します。埋め込みウィジェット、サービスの初期化、現在のテンプレートに結びついた小さなインタラクティブ動作に適しています。ブロックリファレンスについては、カスタム JavaScript を参照してください。

注意

JavaScript エラーにより、他のページ機能が中断される場合があります。変更後に何かが動作しなくなった場合は、まず最新のスクリプトブロックを無効にして再テストしてください。

1. JavaScript のみを貼り付けます。
2. 関連のないスクリプトは別々のブロックに分けると、各変更を確認または削除しやすくなります。

エディター設定

サービス名または用途でスクリプトをラベル付けするために、エディタータイトルを使用します。これはフロントエンドを変更しませんが、継続的な保守がはるかに簡単になります。

標準セクション設定

このセクションには、レイアウト、余白、背景、表示、幅の共有設定は含まれません。その動作は、追加するブロックとその中に配置するコードだけに完全に依存します。

使用上の注意

1. タスクに合ったブロックを使う。 スタイルルールには Custom CSS、スクリプトロジックには Custom JavaScript、完全な外部挿入を貼り付ける必要がある場合は Custom asset を使用します。
2. 変更はモジュール化する。 関連のないカスタマイズは別々のブロックに分け、問題をすばやく切り分け、他に影響を与えずに 1 つの変更を削除できるようにします。
3. ブロック名は分かりやすく付ける。 説明的なエディタータイトルを使うと、繰り返し使うスニペットも後で簡単に識別できます。
4. ブロック内容が結果を左右することを想定する。 ブロックを追加すると、単純なセクションレベルのコンテンツを置き換えたり、追加の埋め込みや動作で拡張したりする場合があるため、各変更後に完成したテンプレートを確認してください。
5. 重要な操作をテストする。 各コード変更後に、重要なページ操作、レスポンシブレイアウト、埋め込みサービスを確認してください。
6. テンプレート固有のコードは最小限にする。 このテンプレートに必要なものだけを追加し、競合、保守負荷、不要なページ重量を減らしてください。