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>この機能はBottleテーマではサポートされていません。Bottleは現在唯一除外されているOS 3.0テーマです。
- <strong>配置の制限:</strong>左右レイアウトコントロールは、<strong>商品情報</strong>セクションの下にある専用のコンテンツコンテナノード内でのみ利用可能です。商品詳細ページテンプレート全体の垂直配置を上書きするものではありません。
購入ボタングループによる商品詳細ページの最適化
このアップデートでは、ショッピングエリアを集約し、より集中した視覚体験を作り出すことでコンバージョン率を向上させることを目的とした購入ボタングループブロックを導入しました。
以前は、購入要素が個別のブロックとして管理されており、カスタマイズ中にレイアウトがずれたり誤って削除されたりすることがありました。新しい購入ボタングループは、これらの要素を一つのまとまったユニットに「再パッケージ化」しています。これにより、エディター内でグループ全体を簡単にドラッグでき、プロフェッショナルな単一行レイアウト(数量セレクターとカートに追加のオプションを横並びに配置)をサポートします。これは、世界のトップeコマースブランドでよく使われる高いコンバージョン率を誇るデザインです。
設定方法
商品詳細ページで購入ボタンブロックとセレクターを整列させ、よりコンパクトでプロフェッショナルなチェックアウトエリアを作成するには、以下の手順に従ってください:
- SHOPLINE管理画面から、オンラインストア > デザイン > マイテーマに移動します。OS 3.0テーマ(例:Fashion)を選択し、デザインをクリックしてテーマエディターに入ります。
- テーマエディターで、商品ページに移動します。
- 左のサイドバーで、階層に従って:商品 > 商品情報を開きます。商品情報を展開して、組み込みの購入ボタンパーツを見つけます。
- <strong>配置</strong>で、<strong>数量セレクター</strong>と<strong>ショップボタン</strong>のレイアウト方向を選択します:
- 左右:同じ行に横並びで配置します(コンパクトで高いコンバージョン率を目指す場合に推奨)。
- 上下:縦に積み重ねて配置します。
- ボタングループ全体の設定を行うには、購入ボタンパーツをクリックし、必要に応じてオプションを調整します。
- グループ全体を一つのユニットとしてドラッグし、商品情報セクション内の希望の位置に移動できます。
- レイアウトを適用するには、保存をクリックします。
機能の制限
- 階層別価格設定は非対応:このパーツは現在、「階層別価格設定」の表示をサポートしていませんのでご注意ください。
- 配置制限:このパーツは商品詳細ページでの下部固定をサポートしていますが、他のページ(ポップアップやカテゴリページなど)での下部固定はサポートしておらず、これらのページに追加しても購入ボタンは自動的に含まれません。
商品一覧ページのインタラクション機能の設定
顧客が閲覧から購入へより迅速に移行できるように、商品一覧ページを強化しました。これにより、サードパーティのアプリや複雑なカスタム開発を必要とせずに、豊富でインタラクティブな体験を提供し、顧客の購入経路を短縮します。
主な機能
- クイックビュー機能:顧客が商品一覧ページを離れることなく商品詳細を確認し、アクションを起こせるように、商品カードにクイックビューボタンを追加します。
- 柔軟な購入経路:「カートに追加」の動作を定義します。ポップアップ、フローティングレイヤー、または直接カート追加から販売戦略に合った方法を選択できます。
- 商品カードのカスタマイズ:商品カードは再利用可能なブロックと動的ソースに対応し、よりパーソナライズされた表示が可能になりました。
設定方法
閲覧および直接購入アクションをサポートする商品一覧ページの機能を設定するには、以下の手順に従ってください。
機能1:クイックビューボタン
クイックビューボタン機能は、顧客が商品一覧ページを離れることなく商品詳細を確認し、アクションを起こせるようにします。設定方法は以下の通りです:
-
テーマエディターで、カテゴリページに移動します。カテゴリセクションの下にある下向き矢印アイコンをクリックして、プレビューするカテゴリを選択します。
-
商品一覧ブロックの下で、商品カードセクションにカーソルを合わせ、+(コンテンツを追加)をクリックし、クイックビューボタンを選択します。
- 追加すると、商品カードの下にデフォルトテキストもっと見るのボタンが表示されます。ボタンのテキスト、色、書式は設定でカスタマイズ可能です。
- 保存をクリックしてレイアウトを適用します。
機能2:フローティングホバーレイヤー
フローティングホバーレイヤー機能は、顧客が商品画像にカーソルを合わせたときに購入関連のアクションや追加コンテンツを表示します。設定方法は以下の通りです:
-
テーマエディターで、カテゴリページに移動します。カテゴリセクションの下にある下向き矢印アイコンをクリックして、プレビューするカテゴリを選択します。
-
商品一覧ブロックの下で、画像オーバーレイブロックにカーソルを合わせ、+(コンテンツを追加)をクリックし、クイックビューボタンを選択します。
-
画像オーバーレイブロックの設定セクションで、ホバー効果(例:持続、フェードイン、フェードアウト)を調整します。
- 保存をクリックしてレイアウトを適用します。
| 注:再利用可能なブロックや動的ソース(メタフィールド)参照を追加することで、フローティングレイヤーを強化できます。大規模なプロモーション期間中は、商品カードやフローティングレイヤーにアイコンやプロモーションテキストブロックを追加して、マーケティング効果を高めてみてください。 |
機能3:動的マーケティングラベル
動的マーケティングラベル機能を使うと、「限定版」や「オーガニック素材」などの目を引く柔軟なテキストラベルを商品詳細ページに直接表示できます。設定方法は以下の通りです:
-
テーマエディターで商品詳細ページに移動し、変更をプレビューしたい商品を選択します。
-
左サイドバーの希望するテンプレートレベルで、+(パーツを追加)をクリックしてカスタムセクションを追加します。そのセクション内にコンテンツコンテナを追加し、さらにリッチテキストブロックを追加します。
ヒント:レイアウトの柔軟性を高めるために、まずコンテンツコンテナを追加し、その中にリッチテキストブロックを追加することができます。コンテナの位置を揃えたり移動したりするには、親ブロックを選択して配置設定を適用してください。コンテナ自体を直接揃えても位置は変わらない場合があります。 -
プロフェッショナルなラベルの見た目を実現するために、リッチテキストブロックをクリックします。右側の設定パネルから、背景色、角の丸み、透明度をカスタマイズしてブランドのスタイルに合わせることができます。
ヒント:リッチテキストエディター内の動的ソースを追加アイコンを使って、ラベルを特定の商品メタフィールドに接続し、動的に内容を更新できます。 - 保存をクリックしてレイアウトを適用します。
機能の制限
- フローティングレイヤーの設定:フローティングメニューが正しく表示されるように、レイヤーの内容とアニメーションロジックを手動で設定する必要があります。
- テーマの対応状況:これらの商品一覧ページの強化機能は、Bottleテーマを除くすべてのOS 3.0テーマで利用可能です。
多階層説明ブロックを使った高度な商品レイアウト
この強化機能により、マーチャントはコードを一切書かずに洗練された高性能な商品詳細ページを構築できます。これまでは「プロモーションカード」や「商品認証」、「関連商品ハイライト」などの構造化情報を表示するには、カスタム開発や配置が難しいリッチテキストエディターの多用が必要でした。多階層説明ブロックを活用することで、商品情報エリア内にプロフェッショナルなカードスタイルのビジュアルレイアウトを直接作成できるようになりました。
ベストプラクティス:構造化レイアウトでコンバージョンを向上させる方法
この機能の効果を最大化するには、多階層説明ブロックを使用して複雑な詳細をスキャンしやすいセクションに整理してください。高額商品には、タイトル、リッチテキスト、およびロゴブロックをこのコンテナ内にネストして「信頼カード」(例:ブランドロゴと保証書を並べて表示)を作成することを推奨します。この方法により、最初の画面表示内の情報密度が高まり、プロフェッショナルな視覚的階層が生まれ、商品競争力が向上し、直帰率が低減します。
設定方法
商品情報エリア内で多階層説明ブロックを使ってプロフェッショナルな詳細分割を実装するには、以下の手順に従ってください:
- 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を使用して翻訳されており、不正確な部分が含まれている可能性があります。最も正確な情報については、元の英語版をご参照ください。