Theme OS 3.0のご紹介

SHOPLINEでは、新しいテーマフレームワーク「OS 3.0」をリリースしました。新しい構成では、コンポーネントの構造が刷新され、柔軟なレイアウト設定、モバイル専用の表示設定、そして新しいテンプレートエンジンが搭載されています。これにより、より高性能でブランドに合ったオンラインストアを、デスクトップでもモバイルでも簡単に構築できます。

新しいコンポーネント構造

OS 3.0 では、各コンポーネント内に最大5階層までのブロックネスト（入れ子構造）をサポートする、新しい構成が導入されました。これにより、ストアフロントにおけるモジュールの自由度が向上し、より柔軟で階層的なデザインが可能になります。

ネストされたブロックを追加するには、以下の手順に従ってください：

1. SHOPLINEのテーマエディタを開き、コンポーネントリストに移動します。
2. 新しい要素を追加したいセクション／ブロックの右側にある「コンテンツを追加」アイコンをクリックします。
   
    
3. 追加したいブロックタイプを選択すると、それが子要素として挿入されます。

このモジュール構造により、1ページ内でのダイナミックなコンテンツ配置が実現できます。

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

OS 3.0 テーマでは、ページ要素の位置、間隔、配置を簡単に調整でき、デザイン要件に沿った柔軟なレイアウトが実現可能です。複雑なレイアウト構成でも、要素のスタイルや並び順を細かく制御できます。

レイアウトを調整するには：

1. 修正したいセクションまたはブロックを選択します。
2. ツールバーを使用して、レイアウト、マージン、サイズを調整します。
   

レイアウト設定

レイアウト設定項目	操作内容	効果の例
配置方向	複数の要素を並べた際の並び順を調整します。 例：商品詳細ページで画像と商品情報の表示位置を入れ替える場合など。
自動折り返し	要素がコンテナの幅や高さを超える場合、自動的に次の行に折り返します。
配置と位置合わせ	要素の相対的な位置を調整します。 例：バナー画像上のテキスト位置を調整する場合など。
間隔設定	要素間の行・列の間隔を管理します。 例：商品カード内で画像・タイトル・価格の間隔を調整する場合など。

マージン設定

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

サイズ設定

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

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

すべてのレイアウト、マージン、サイズ設定は、PCとモバイルそれぞれで個別にカスタマイズできます。特定のデバイス向けに設定を変更すると、変更された項目に下線が表示されます。

モバイルでは、複数の一般的なデバイスタイプでページをプレビューでき、閲覧体験が最適化されているかを事前に確認できます。

OS 3.0 と OS 2.1 の機能比較

OS 3.0 テーマの使用方法

OS 3.0 テーマでのデザインを開始するには、以下の手順に従ってください：

1. オンラインストア ＞ デザイン ＞ テーマストア に移動します。
   
    
2. 「Bottle」テーマを検索して選択するか、テーマ紹介ページから詳細を確認します。
3. ［テーマを追加］をクリックして、テーマライブラリに追加します。
   
    
4. ［デザイン］ボタンをクリックして、Bottle テーマのエディタを開きます。
5. セットアップが完了したら、［公開］をクリックしてサイトに反映させます。

よくある質問

OS 2.1 のプライベートテーマ開発者は、OS 3.0 にどのように対応すればよいですか？

OS 3.0 は新しいテンプレート構文「Sline」を使用しており、再開発が必要です。対応にあたっては、「OS 2.1 から OS 3.0 へのプライベートテーマ移行ガイド」をご参照ください。