OS 3.0 テーマでのカスタムページカバーの設定方法

ストアの検索結果の視覚的な魅力を高め、ブランドの一貫性を維持するために、SHOPLINEはカスタムページのカスタムページカバーをサポートするようになりました。カスタムページに独自のカバー画像を設定することで、予測検索や検索結果ページで目立たせることができ、顧客のエンゲージメント向上につながります。

この記事では、管理画面でのフィーチャー画像の設定方法と、ストアフロントでの表示方法についてご案内します。

カスタムページカバーの機能

フィーチャー画像は、さまざまなストアフロントのセクションでのカスタムページの視覚的表現を柔軟に管理する方法を提供します。この機能を活用することで、検索やページレイアウトの両方でカスタムコンテンツをプロフェッショナルに表示できます。

• 強化された検索体験：顧客がカスタムページに関連するキーワードを検索すると、カスタムページカバーが予測検索のドロップダウンやメインの検索結果に表示されます。
• 視覚的一貫性：テキストのみのリンクではなく、顧客に視覚的な手がかりを提供し、Lookbook、会社概要、プロモーションページなどのカスタムコンテンツがブランドの美学に調和します。

• SEOとアクセシビリティ：検索エンジンが画像コンテンツを理解し、ストアの全体的なSEOランキングを向上させるためのALTテキスト専用フィールドが含まれています。

  注：画像を検索エンジン向けに最適化する方法の詳細については、"ファイルライブラリの画像にALT属性を追加する"をご参照ください。

カスタムページカバー機能の設定

カスタムページカバーの設定は、SHOPLINE管理画面のページ管理セクションから始まります。この画像は検索結果やOS 3.0テーマブロックの「ソース」として機能します。

方法1：ページ設定から

この方法では、検索結果およびすべてのテーマブロックの主要な「ソース」として機能するグローバルカバーを設定します。

1. SHOPLINE管理画面で、オンラインストア > ページ に移動します。ページを作成 ボタンをクリックして新しいページを開始するか、編集したい既存の カスタムページ のタイトルをクリックします。
   
2. 右側のサイドバーで、カスタムページカバー エリアを見つけます。
   
3. デバイスから画像をアップロードするか、ファイルライブラリ から選択します。
   • 画像を選択した後、目のアイコン をクリックしてカバーの表示プレビューを確認できます。
     
4. アップロード後、画像にカーソルを合わせて管理できます：
   
   • 変更： 現在の画像を別の画像に差し替えます。
   • 削除： ページから画像を削除します（確認のプロンプトが表示されます）。

   • ALT： SEOとアクセシビリティのために、ファイルライブラリ で画像の代替テキストを編集します。

     注： 詳細な手順については、"ファイルライブラリの画像にALT属性を追加する方法" をご参照ください。

技術仕様と制限事項

最適なパフォーマンスとSEOインデックスを確保するために、以下の技術要件とテーマの制限を守ってください。

• 画像要件： 
  • 対応フォーマット：JPGおよびPNG。
  • ファイルサイズ：4MB未満であること。
  • 推奨サイズ：1200px x 1600px。
• テーマの対応状況：この機能は、Bottleテーマを除くすべての公式SHOPLINE OS 3.0テーマでサポートされています。
• データの永続性と表示ロジック：
  • グローバルデータ共有：カスタムページ設定で設定されたカバー画像はページのコアデータ内に保存されます。つまり、異なるOS 3.0テーマ間で切り替えても画像は自動的に同期され、利用可能なままです。
  • セクション固有の上書き：テーマエディターのセクション内で特定のカバー画像を直接アップロードした場合、その画像はその特定のテーマの設定に紐づきます。テーマを切り替えると、新しいテーマでそのセクションの画像を再選択または再アップロードする必要があります。
• 開発者向けカスタマイズ：他のOS 3.0テーマ（例：Bottle）やカスタムテーマの場合、開発者はfeatured_image Slineオブジェクトにアクセスしてこの画像を手動で表示できます。このオブジェクトにはalt、src、height、およびwidth属性が含まれています。
• 検索インデックス：これらのページのカスタムURLもインデックス化されており、URL内のキーワードが検索結果でのカバー画像表示をトリガーすることがあります。