OS 3.0 テーマの新機能
SHOPLINEのOS 3.0テーマは、ストアデザインの柔軟性とパーソナライズ性を高める新機能とともに、継続的に進化しています。
このガイドでは、OS 3.0テーマ専用の最新機能をご紹介します。
| 注: OS 3.0テーマを初めてご利用の場合は、構造、パーツ、編集機能の概要について「Theme OS 3.0の紹介」をご参照ください。 |
モバイルデバイスで顧客が1行あたりの商品の表示数を選択可能にする
顧客がモバイルデバイスでの閲覧体験をより自由に調整できるようにし、商品の表示方法を選べるようにしましょう。
商品表示レイアウトのカスタマイズ機能を使うと、顧客は1行に1商品または2商品を表示する切り替えが可能になり、詳細をじっくり見たい場合は大きなタイル、素早く一覧を確認したい場合は小さなタイルを選べます。
設定方法
- SHOPLINE管理画面で、オンラインストア > デザイン > マイテーマに進みます。OS 3.0テーマ(例:Fashion)を選択し、デザインをクリックしてテーマエディタを開きます。
- テーマエディタでモバイル表示に切り替え、カテゴリページに移動して商品一覧のレイアウトをカスタマイズします。
- ドロップダウンリストからカテゴリを選択し、商品リストセクションでマルチ列切り替えをオンにしてモバイル表示の切り替えを有効にします。
- デフォルトと切り替え可能な列数を選択し、保存をクリックして変更を適用します。
|
注: 列のオプションはモバイル表示のみ利用可能です。
|
機能の制限
- 対応状況:Bottleを除くすべてのOS 3.0テーマでサポートされています。
- デバイス対応:現在はモバイルデバイスのみで利用可能です。
- 互換性:適切な表示を確認するために、すべての有効なプラグインでテストしてください。一部のカスタムプラグインは商品一覧ページのグリッド表示に影響を与える場合があります。
- 統合:APIやファイルアップロード機能は関与していません。
設定可能なパンくずリストパスによるナビゲーションの改善
従来のパスベースのパンくずリストを実装することで、顧客に標準的で明確なストアのナビゲーション方法を提供します。これらの改善により、顧客がたどったページ階層(例:ホーム / カテゴリ / 商品)を表示する、普遍的に利用可能なナビゲーションが実現します。
新しいパンくずリストシステムは、明確なパスベースのナビゲーションを提供し、顧客体験とストアの使いやすさを向上させます。パス内のすべてのノード(現在のページを除く)は完全にクリック可能で、顧客が簡単に前のページ、カテゴリ、またはトップページに戻ることができます。
3種類のパンくずリストパーツの理解
機能の明確化のために、OS 3.0テーマ内には配置やロジックが異なる3つの異なるパンくずリストパーツが存在します:
-
新しいユニバーサルパンくずリストブロック(推奨標準):
- ロジック:従来のページパス階層を使用(例:ホーム / カテゴリ / 商品)。
- 配置:テーマエディターの新しい専用セクションからすべてのページに追加可能。
-
パスの例:
- 商品詳細ページ:通常はホーム / {カテゴリタイトル} / {商品タイトル} または ホーム / {商品タイトル} と表示されます。
- ブログ記事ページ:ホーム / {ブログカテゴリタイトル} / {ブログ記事タイトル} と表示されます。
- 使用法:一般的なナビゲーションにはこのブロックを推奨します。
-
レガシー多階層カテゴリパンくずリスト(商品詳細ページのみ)
- ロジック:商品ドメインの多階層分類データに依存。
- 配置:商品詳細ページ内のブロックとしてのみ表示されます。
|
注意事項:
|
-
レガシーカテゴリページの「ホーム」ノード(修正可能):
- ロジック: カテゴリ画像の上にハードコードされた「ホーム」ノード。
- 配置場所: コレクションリストページにのみ表示されます。
- 使用法: 以前は設定不可でエラーと見なされていましたが、新しい設定によりアップデート後にマーチャントが非表示にできるようになりました。
設定方法
新しい推奨のパンくずリスト機能を有効にし、レガシー表示の問題を解決するには、以下の手順に従ってください。
SHOPLINE管理画面から、オンラインストア > デザイン > マイテーマに移動します。OS 3.0テーマを選択し、デザインをクリックしてテーマエディタに入ります。
シナリオ1. ユニバーサルパンくずリストブロックの有効化:
推奨される新しいパンくずリストブロックを有効にするには、以下の手順を実行してください:
- テーマエディタで目的のページ(例:トップページ、商品詳細ページ)に移動します。
- 該当モジュールの下でパーツを追加をクリックし、テーマタブに移動してパンくずリストを見つけて選択します。
-
パンくずリストブロックを追加した後、好みのカラースキームを設定し、PC版および/またはモバイルでの表示を選択し、必要に応じてレイアウトを調整します。完了したら保存をクリックして設定を適用します。
| 注: 標準的なパスベースのナビゲーションには、このユニバーサルパンくずリストブロックの使用を強く推奨します。 |
シナリオ2. レガシーカテゴリページノードの非表示:
設定不可のコレクションページノードを非表示にしたい場合は、以下の手順に従ってください:
- テーマエディタでコレクションページに移動します。
- コレクションヘッダーモジュールでコレクション画像をクリックし、設定パネルでパンくずリストを非表示をオンにします。
- 保存をクリックして変更を適用します。
機能の制限
- レガシーパンくずリストのアクセス: レガシーパンくずリスト要素(現在は多階層カテゴリパンくずリストに名称変更)は、商品ドメインの多階層分類データの使用が必要で、マーチャントはアクセスのためにホワイトリスト登録が必要です。
- 旧要素の削除: コレクションページのハードコードされた「ホーム」要素は完全に削除できませんが、新機能で非表示にすることが可能です。
商品詳細ページ内での柔軟な左右レイアウトの有効化
この改善により、マーチャントやサードパーティアプリが商品詳細ページの情報セクション内で複雑な垂直以外の配置を実装できるようになり、以前のテーマレイアウトの重要な制限を解消します。従来は商品情報ブロックが単一の垂直スタックに制限されていたため、数量セレクターを購入ボタンの横に配置したり、ウィッシュリストボタンを商品タイトルの隣に置くといった現代的なデザインニーズに対応できませんでした。
新しい構造要素を導入することで、商品詳細ページ上の特定の商品要素の配置を正確に制御でき、OS 3.0テーマの全体的な柔軟なデザイン哲学に沿ったレイアウトが可能になります。
設定方法
商品情報エリア内の要素に左右レイアウトを適用するには、新しいコンテンツコンテナを使用します:
- SHOPLINE管理画面から、オンラインストア > デザイン > マイテーマに移動します。OS 3.0テーマ(例:Fashion)を選択し、デザインをクリックしてテーマエディターに入ります。
- テーマエディターで、商品ページに移動します。
- <strong>商品</strong>モジュールの下で、<strong>商品セクション</strong> > <strong>商品情報</strong>を見つけます。<strong>商品情報</strong>にカーソルを合わせ、<strong>+アイコン</strong>をクリックし、<strong>テーマ</strong>の下にある<strong>コンテンツコンテナ</strong>を選択します。このコンテナは中間のレイアウト層として機能します。
- コンテナを追加した後、その上にカーソルを合わせてタイトル、販売価格、数量セレクターなどの情報ブロックを追加します。ブロックはドラッグ&ドロップで順序を調整できます。この新しいコンテナ内に、左右に配置したい標準の商品情報ブロック(例:タイトル)を追加してください。
- ブロックを追加したら、<strong>コンテンツコンテナ</strong>をクリックしてレイアウト(ブロックの配置、利益率、サイズ)を設定します。コンテナ専用のレイアウトコントロールを使って、前のステップで追加した要素の左右配置と整列を設定できます。これにより、購入ボタンと数量セレクターなど複数のパーツを横並びに配置できます。
- 変更を適用するには、<strong>保存</strong>をクリックします。
機能の制限
- <strong>テーマの対応状況:</strong>この機能は、現在唯一対応していないOS 3.0テーマであるBottleテーマでは利用できません。
- <strong>配置の制限:</strong>左右レイアウトコントロールは、<strong>商品情報</strong>セクションの下にある専用のコンテンツコンテナノード内でのみ利用可能です。商品詳細ページテンプレート全体の垂直配置を上書きするものではありません。
高度な商品レイアウトのための多層説明ブロックの使用
この強化により、マーチャントは一行のコードも書かずに洗練された高性能な商品詳細ページを作成できるようになりました。これまでは、「プロモーションカード」や「商品認証」、「関連商品ハイライト」などの構造化された情報を表示するには、カスタム開発や整列が難しいリッチテキストエディタの多用が必要でした。多階層説明ブロックを利用することで、商品情報エリア内で直接、プロフェッショナルなカードスタイルのビジュアルレイアウトを作成できるようになりました。
ベストプラクティス:構造化レイアウトでコンバージョンを向上
この機能の利点を最大限に活用するには、多階層説明ブロックを使って複雑な詳細をスキャンしやすいセクションに整理してください。高額商品には、タイトル、リッチテキスト、ロゴブロックをこのコンテナ内にネストして「信頼カード」(例:ブランドロゴと保証書の表示)を作成することを推奨します。この方法により、初期画面表示内の情報密度が高まり、プロフェッショナルな視覚的階層が生まれ、商品競争力が向上し、直帰率が低減します。
設定方法
商品情報エリア内で多階層説明ブロックを使ってプロフェッショナルな詳細分割を実装するには、以下の手順に従ってください:
- SHOPLINE管理画面から、オンラインストア > デザイン > マイテーマに移動します。OS 3.0テーマを選択し、デザインをクリックしてテーマエディタに入ります。
- テーマエディタで、商品ページに移動し、変更をプレビューしたい商品を選択します。
-
商品情報セクションにカーソルを合わせ、+ (コンテンツを追加)をクリックし、多階層説明ブロックを選択します。
-
多階層説明ブロックをクリックして設定にアクセスします。ここで、タイトル、リッチテキスト、ロゴなどのさまざまな汎用ブロックをこのメインブロック内に追加して、希望のレイアウトを構築できます。
注:右側の設定パネルでタイトルを更新すると、左側のサイドバーメニューの名前も自動的に同期され、複数のブロックを簡単に識別・管理できます。 -
折りたたみ表示オプションを切り替えて、説明をデフォルトで閉じるか完全に表示するかを設定できます。
- ネストされたブロックを配置して、「インライン画像テキストの整列」や「カードベース」のビジュアル効果を実現します。
- 保存をクリックして変更を適用します。
機能の制限
- テーマの対応状況:この機能は、Bottleテーマを除くすべてのOS 3.0テーマでサポートされています。
- レイアウトの範囲:このブロックは、商品情報セクション内の構造的レイアウト専用に設計されており、外部ファイルのアップロードやAPI連携はサポートしていません。
- コンテンツのスケーリング:モバイルのパフォーマンスを維持するために、単一の多層説明コンテナ内のネストされたブロック数を制限し、レイアウトが小さい画面でも見やすく整然とした状態を保つことを推奨します。
テキストラベルとツールチップを使って商品情報を強化する
この強化は、商品詳細ページで情報密度の高さとクリーンなユーザーインターフェースのバランスを取る課題に対応しています。これまでマーチャントは、専門用語やポリシーの詳細で顧客を圧倒するか、意思決定を助ける詳細な商品情報を省略するかの選択を迫られていました。テキストラベルブロックとそのインタラクティブなツールチップサブブロックを活用することで、補足情報をホバーやタップで簡単に表示できる非侵襲的な方法で専門的な説明を提供できるようになりました。
この階層的な情報提供アプローチにより、テキストラベルは「詳しくはこちら」や「配送情報」などの視覚的なアンカーとして機能し、ツールチップはホバーで表示されるバブル内に二次的な詳細を隠します。このデザインは、主要なコンバージョン経路を集中かつ整理された状態に保ちつつ、顧客が追加の文脈を求めるときにのみ即座に価値を提供する、現代の閲覧習慣に合致しています。
ベストプラクティス:専門的な視覚的階層の強化
スキンケアや医療グレードの商品など専門性の高い商品には、テキストラベルブロック内で成分説明や効果の詳細を設定することを推奨します。ツールチップサブブロックの即時バブルプロンプトを使うことで、技術的な詳細をより専門的かつ階層的に提示できます。これにより、ページのインタラクティブな質感が大幅に向上し、顧客が商品価値を素早く理解できるため、意思決定のプロセスが短縮されます。
設定方法
商品情報エリア内でインタラクティブなラベルとツールチップを有効化および設定するには、以下の手順に従ってください:
- SHOPLINE管理画面で、オンラインストア > デザイン > マイテーマに移動します。OS 3.0テーマを選択し、デザインをクリックしてテーマエディターに入ります。
- テーマエディターで、商品ページに移動し、変更をプレビューしたい商品を選択します。
-
商品モジュールの下で、商品情報セクションを見つけてホバーし、+(コンテンツを追加)をクリックして、テキストラベルを選択します。
ヒント:レイアウトの柔軟性を高めるために、まず商品情報セクションの下にコンテンツコンテナを追加し、そのコンテナ内にテキストラベルブロックを追加することができます。コンテナの位置を揃えたり移動したりするには、その親ブロックを選択して配置設定を適用してください。コンテナ自体を直接揃えても位置は変わらない場合があります。 -
テキストラベルブロックをクリックして、希望のテキスト(例:「詳しくはこちら」)を入力し、ブランドのスタイルに合わせて背景色を調整します。
- サイドバーのテキストラベルブロックエリア内で、ツールチップサブブロックを見つけてホバーし、+(コンテンツを追加)をクリックしてリッチテキストを選択します。提供されたエディターを使って説明用のバブルコンテンツを作成します。
- ライブストアでは、テキストラベルが商品情報の下に表示されます。ユーザーがラベルにホバー(PC版)またはタップ(モバイル)すると、ツールチップで設定した内容がバブルポップアップで表示されます。
- 変更を適用するには、保存をクリックします。
機能の制限
- テーマの対応状況:この機能は、Bottleテーマを除くすべてのOS 3.0テーマでサポートされています。
- コンテンツの最善の方法:ツールチップサブブロックはリッチテキストやリンクをサポートしていますが、ユーザーの流れをスムーズに保つために、簡潔で効果的な説明に適しています。
- APIおよびアップロード:この機能はテーマエディター内で直接管理されており、外部APIやファイルアップロードの連携はサポートしていません。
商品メディアの拡張拡大鏡カスタマイズの使用
この機能強化により、マーチャントは商品詳細ページの画像ズーム操作を特定の商品カテゴリに応じてカスタマイズできるようになります。ホバー、スクロール、矢印トグルなど複数のズームモードを提供することで、マーチャントは顧客の商品の検査体験を向上させることができます。この機能は、顧客が購入前に商品テクスチャや仕様を詳しく確認できるようにすることで、ページ滞在時間の増加、購入の自信構築、返品率の低減を目的としています。
ベストプラクティス:業界に適したズームスタイルの選択
商品属性に合ったズームスタイルを選ぶことは、コンバージョン率に大きな影響を与えます:
- 3Cエレクトロニクス(例:キーボード、カメラ): マウスホバーを推奨します。顧客は「インターフェースの種類」や「ボタン配置」を素早く確認する必要があり、ホバーズームがこれらの技術的詳細を最も効率的に表示します。
- ホーム用品&デコレーション: 全画面矢印トグルを推奨します。これらの商品は構成や雰囲気に依存しており、矢印でシーンを切り替えられることで、商品の没入感を高めます。
- 高級ファッション&アクセサリー: クリックして画像詳細を表示または全画面縦長画像スクロールを推奨します。このセグメントの顧客は、布地の質感や職人技の極端なクローズアップを見る必要があります。
設定方法
商品メディアの拡大鏡設定をカスタマイズするには、以下の手順に従ってください:
- SHOPLINE管理画面から、オンラインストア > デザイン > マイテーマ に移動します。互換性のあるOS 3.0テーマ(例:ファッション)を選択し、デザイン をクリックしてテーマエディターに入ります。
- テーマエディターで、商品 ページに移動し、変更をプレビューしたい商品を選択します。
- 商品モジュールの下で、商品セクションを開き、商品メディアパーツをクリックします。
-
商品メディアファイルサブブロックをクリックして、拡大鏡の設定にアクセスします。
-
拡大鏡設定グループを見つけて、拡大鏡を有効にするをオンに切り替えます。
注意:
- 拡大鏡設定はメディア画像のみをズームし、オーバーレイはズームされません。
- 最適なズームの鮮明さを得るために、商品画像が「画像サイズガイド」の推奨仕様に従っていることを確認してください。
-
拡大鏡設定では、異なるデバイスごとにズームスタイルを独立して設定できます:
-
PC版ズームスタイル:
-
全画面長い画像スクロール(デフォルト):長く詳細な画像の閲覧に最適です。
-
全画面矢印切替:雰囲気重視のライフスタイルショットに最適です。
-
マウスホバー:特定の商品の部分を技術的に検査するのに最適です。
-
全画面長い画像スクロール(デフォルト):長く詳細な画像の閲覧に最適です。
-
モバイルズームスタイル:
-
全画面矢印切替(デフォルト):標準的なモバイル閲覧体験です。
-
全画面長い画像スクロール:全画面モードで縦スクロールが可能です。
-
クリックで画像詳細表示:最大スケールで画像を表示する新しいレイヤーが開き、ユーザーはドラッグして詳細を確認し、再度クリックして戻れます。
-
全画面矢印切替(デフォルト):標準的なモバイル閲覧体験です。
-
PC版ズームスタイル:
- 必要に応じて、拡大鏡を表示を有効にして、メディア上に拡大鏡アイコンを表示し、画像ズームの視覚的な手がかりとしてください。
- 保存をクリックして変更を適用します。
機能の制限
- テーマの対応状況:この機能はFashionテーマおよびその子テーマ専用です。現在、Bottleテーマではサポートされていません。
- 動画の制約:動画モジュールのユーザーインターフェースが非表示の場合、その特定の動画パーツに対して拡大鏡は機能しません。
- 効果の範囲:拡大鏡効果は生のメディア画像のみに適用されます。テキストオーバーレイやUIパーツは元のスケールのままです。
ソーシャルメディアアイコンのカスタマイズ
マーチャントがFacebookやInstagramのような一般的なアイコン以外に、Discord、LINE、Redditなどのニッチまたは地域特化型プラットフォームをプロモートできるように、SHOPLINEはカスタムソーシャルメディア表示をサポートしています。これにより、カスタムコーディングやサードパーティアプリなしで、パーソナライズされたアイコンのアップロードとリンク先の設定が可能になります。
設定方法
ストアのヘッダーまたはフッターにカスタムソーシャルメディアアイコンを設定するには、以下の手順に従ってください:
- SHOPLINE管理画面から、オンラインストア > デザイン > マイテーマに移動します。対応するOS 3.0テーマ(例:Fashion)を選択し、デザインをクリックしてテーマエディターに入ります。
- テーマエディターで、テーマ設定 > ソーシャルメディアに進みます。
- 画面下部までスクロールすると、カスタムソーシャルメディアセクションがあります。ソーシャルメディア1からソーシャルメディア5までの5つのスロットが利用可能です。任意のスロットを選択して設定を開始します。
- 各エントリーに対して以下の設定を行います:
- アイコンのアップロード:カスタム画像をアップロードします(画像がアップロードされるまではアイコンはグレー表示されます)。
-
リンク:リンク先の完全なURLを入力します。
注:リンク欄は必須です。設定を保存するには、有効なURL形式(例:https://...)を入力してください。
-
保存をクリックして、アイコンをヘッダーまたはフッターに適用します。
アイコンの仕様
最適な表示のために、以下のガイドラインに従ってください:
- 対応フォーマット:JPG、SVG、およびPNG
- ファイルサイズ:200KB以下を推奨します。
- 推奨寸法:20px x 20px または 25px x 25px
機能の制限
- 数量制限:最大5つのカスタムソーシャルメディアアイコンを追加できます。
-
テーマの対応状況:この機能は、Bottleテーマを除くすべての公式OS 3.0無料テーマでサポートされています。サードパーティの支払い済みテーマではサポートされていません。
ページ間でのセクションのコピー
一貫したストアページのデザインが、クリップボードにコピー機能でより簡単になりました。セクション全体(カスタマイズされたコンテンツと設定を含む)をコピーし、ストア内の他の任意のページテンプレートに貼り付けることができます。
このアップデートにより、ホームページ、カテゴリページ、またはブログ投稿間で移動する際に、同一のセクション(バナー、画像ブロック、プロモーションエリア、カスタムコンテンツなど)を手動で再構築する必要がなくなりました。
| 注:ほとんどのセクション(バナー、画像ブロック、プロモーションエリアなど)はコピー可能です。ただし、特定のページテンプレートに組み込まれているセクション(商品やおすすめ商品などの商品詳細ページのセクション)はコピー操作をサポートしていません。 |
設定方法
異なるテンプレート間でページレイアウトを複製するには、以下の手順に従ってください:
- SHOPLINE管理画面から、オンラインストア > デザイン > マイテーマに移動します。対応するOS 3.0テーマ(例:Fashion)を選択し、デザインをクリックしてテーマエディターに入ります。
- テーマエディターで、目的のページに切り替え、左側のサイドバーで再利用したいセクションを見つけます。
-
三点リーダーアイコン(その他の操作)をクリックし、クリップボードにコピーを選択します。
-
セクションを追加したいページに移動します。既存のセクションの三点リーダーアイコンをクリックし、下に貼り付けを選択します。
ヒント:この機能は特にブログ投稿や商品ページで効果的です。記事本文や商品情報などの固定コンテンツの直上または直下にプロモーションセクションを直接貼り付けることができます。 - セクションが自動的に挿入され、エディターがスクロールして新しく貼り付けたコンテンツを表示します。
- 保存をクリックします。
機能の制限
- セクションの制限:すべてのセクションがコピー操作に対応しているわけではありません。特定のページタイプに不可欠なセクションはコピーできません。例えば、商品やおすすめ商品のセクションは他のページテンプレートにコピーできません。
- 数量制限:最適なページパフォーマンスを確保するため、各ページのセクション数は25個までに制限されています。制限に達したページでは、貼り付けオプションがグレーアウトします。
- クリップボードの保持:コピーしたコンテンツはエディターの内部メモリに保存されます。テーマエディターを閉じるとクリアされます。
- テーマの対応状況:この機能は、公式のOS 3.0無料テーマすべてでサポートされていますが、Bottleテーマは除きます。サードパーティの支払い済みテーマではサポートされていません。
この記事はAIを使用して翻訳されており、不正確な部分が含まれている可能性があります。最も正確な情報については、元の英語版をご参照ください。