テーマOS 3.0の紹介

SHOPLINEは、新しいOS 3.0テーマフレームワークをリリースしました。これは、刷新されたパーツ構造、柔軟なレイアウト設定、専用のモバイル構成、そして全く新しいテンプレートエンジンを備えています。これらのアップグレードにより、マーチャントは高性能でブランドに沿ったオンラインストアを簡単に作成できるようになります。PC版でもモバイルでも、新しいテーマ構造はよりスムーズでカスタマイズ可能なデザイン体験を提供します。

新しいパーツ構造

OS 3.0では、各パーツ内で最大5階層のネストされたブロックをサポートする再設計された構造を導入しました。この強化により、ストアフロント全体でより高度なモジュール制御と階層的なデザインの柔軟性が可能になります。ネストされたブロックを追加するには：

1. SHOPLINEテーマエディターを開き、パーツリストに移動します。

2. 新しいパーツを挿入したいセクション／ブロックの右側にあるコンテンツを追加アイコンをクリックします。

   

3. 追加するブロックタイプを選択し、子要素として追加します。

このモジュールの柔軟性により、単一ページ内で動的なコンテンツ配置が可能になります。

柔軟なレイアウト表示設定

OS 3.0テーマでは、ページ要素の位置、間隔、配置を簡単に調整して、デザイン要件により適合させることができます。複雑なレイアウトを扱う際には、これらの正確な調整により、要素のスタイルと配置を効果的にコントロールできます。レイアウト表示を調整するには：

1. 修正したいセクションまたはブロックを選択します。

2. ツールバーを使ってレイアウト、利益率、寸法を微調整します。

   

レイアウト設定

レイアウト設定	操作	効果
配置方向	複数のパーツが一緒に配置されている場合の順序を調整します。 例として、商品詳細ページでの画像と商品情報の位置を変更することが挙げられます。
自動折り返し	パーツがコンテナの幅・高さを超えた場合に自動的に次の行に折り返します。
配置と位置調整	コンテナ内でのパーツの相対的な配置を制御します。 例として、バナー画像上のテキストの配置を調整することが挙げられます。
間隔	パーツ間の行間および列間のスペースを管理します。 例として、商品カード内の画像、タイトル、販売価格の間隔を設定することが挙げられます。

利益率設定

選択したコンテナの内側のパディングを定義します。

サイズ設定

選択したパーツの絶対的な幅と高さ、または親コンテナ内での相対的なサイズを指定します。

モバイル専用の調整とプレビュー

すべてのレイアウト、利益率、サイズ設定はPC版とモバイルで別々にカスタマイズ可能です。デバイス別の調整が行われると、変更された設定に下線のインジケーターが表示されます。

モバイルでは、さまざまな一般的なデバイス種別でページをプレビューし、最適な閲覧体験を確認できます。

OS 3.0 と OS 2.1：機能比較

OS 3.0 パーツ比較

OS 3.0では現在、2つのテーマを提供しています：Fashion と Bottle。

• Fashion は一般的なeコマースパーツを含み、中小規模のマーチャントに適しています。追加の開発なしで迅速なセットアップと公開が可能です。

• Bottle は機能が少なく、カスタムのプライベート開発向けに設計されています。簡単なマーチャント展開や、サードパーティ開発者が独自のテーマを構築・販売するための基盤として理想的です。

トップページパーツの比較：

OS 3.0 アプリ互換性リスト

Fashion と Bottle テーマについては、以下のアプリはまだサポートされていないか、完全に互換性がありません。まずはテーマを下書きモードでテストし、実際の結果を参考にすることをお勧めします。

OS 3.0 テーマの使い方

OS 3.0 でデザインを始めるには：

1. オンラインストア > デザイン > テーマストア に移動します。

   

2. 「Fashion」テーマを検索して選択するか、テーマ紹介ページをクリックしてテーマページにアクセスします。

3. テーマを追加をクリックして、テーマライブラリに追加します。

   

4. Fashionテーマの隣にあるデザインボタンをクリックしてテーマエディターを開きます。
5. 設定を確認したら、公開をクリックしてライブにします。

よくある質問

1. OS 2.1 カスタムテーマ開発者はどのようにして OS 3.0 に対応すればよいですか？
   OS 3.0 は新しい Sline テンプレート構文を使用しているため、再開発が必要です。最善の方法については、「OS 2.1 から 3.0 へのカスタムテーマ移行ガイド」を参照してください。
2. OS 3.0 テーマエディターで「左揃え」を選択してもコンテンツコンテナが動かないのはなぜですか？
   
   OS 3.0 テーマでコンテンツコンテナを左揃えにしようとしても左揃えを選択しても変化がない場合、誤ったレイヤーを揃えている可能性があります。
   コンテンツコンテナを左に動かすには、コンテンツコンテナを包む親の画像ブロックを選択し、その後に左揃えを適用する必要があります。画像ブロックの揃えを調整して初めて、コンテンツコンテナがそれに応じて移動します。