Section Gallery：OS 3.0テーマへのオープンソースパーツの追加方法

Section Gallery アプリを使うと、OS 3.0 テーマを使用しているマーチャントは、柔軟でカスタマイズ可能、かつ完全に編集可能なオープンソースのパーツを簡単に追加できます。この機能により、ストアデザインのコントロールが向上し、PC版とモバイルの両方でレイアウト編集が効率化されます。

このガイドでは、Section Gallery アプリの使用タイミングと方法、インストール手順、カスタマイズのコツ、パーツコードの編集、制限事項、よくある質問について説明します。

アプリを使うタイミング

現在のテーマにない高度なページパーツや、より柔軟なレイアウトが必要な場合は、Section Gallery の利用を検討してください。

よくあるシナリオ

• 専門的なページ表示パーツの追加：Section Gallery は、画像とテキストのレイアウト、商品ショーケース、口コミセクション、動画モジュール、仕様表、ファイルダウンロードブロック、スクロールバナーなど、多彩なオープンソースパーツを提供します。これらのパーツは多様な用途に対応し、ページ単位やブロック単位で柔軟に設定可能です。
• テキスト、ボタン、背景、間隔などの要素のカスタマイズ：Section Gallery では、詳細な設定で個々のパーツの見た目やレイアウトを微調整できます。画像の角丸、影、パディング、フォントスタイルなどのビジュアル要素をコードに触れずに簡単に調整し、ブランドデザインに合わせられます。

アプリのインストールと使用方法

以下の手順に従って Section Gallery をインストールし、OS 3.0 テーマにパーツを追加してください：

SHOPLINE アプリストアから Section Gallery をインストールする方法

1. SHOPLINE 管理画面のアプリに移動し、アプリストアへ移動ボタンをクリックします。

2. Section Gallery を検索し、インストールをクリックしてアプリを承認し、インストールを完了させます。

   

Section Gallery パーツをテーマに追加する方法

1. アプリをインストールした後、テーマに追加するパーツを選択します。

   

2. ポップアップウィンドウで、パーツをインストールしたいOS 3.0テーマを選択します。

   

3. テーマエディターに移動をクリックして、ビジュアルエディターを開きます。

   

または、オンラインストア > デザインに移動してテーマエディターにアクセスし、必要に応じてパーツを追加します。テーマの使用と公開に関する詳細は、このヘルプセンターガイドのテーマエディターへのアクセスと使用セクションをご参照ください。

パーツの配置とカスタマイズ方法

1. + パーツを追加をクリックし、使用したいセクションギャラリーパーツを選択します。追加後、パーツをテーマ内の希望のロケーションにドラッグします。セクションギャラリーは、セクショングループや個別ブロック内に配置するなど、複数レベルの配置をサポートしています。

   

2. 組み込みの設定パネルを使って、テキスト、ボタン、背景、間隔、レイアウトスタイルをカスタマイズします。

   

3. デザインが完了したら、保存をクリックして変更を適用します。次に、プレビュー > オンラインストアを表示をクリックして、ライブのストアフロントでパーツの表示を確認します。

パーツコードの修正

コーディングの経験がある場合は、セクションギャラリーパーツのコードを直接修正して、レイアウトや動作をさらにカスタマイズできます。

1. SHOPLINE管理画面から、オンラインストア > デザインに移動し、Section Galleryパーツがインストールされているテーマを見つけます。テーマの横にある⋯（三点リーダーアイコン）をクリックし、コードを修正を選択します。

   

2. コードエディタの左サイドバーで、sectionsフォルダを開き、インストールされているパーツを表示します。

   

3. SGC-で始まるファイル（例：SGC-product-list.css）を探します。検索バーでSGCを検索すると、すべてのSection Galleryパーツを素早く見つけることができます。

   

4. 編集したいファイルをクリックして、パーツのコード編集を開始します。

   

コードを更新または復元するためのパーツの再インストール

Section Galleryパーツを元の状態に戻す必要がある場合（バグ修正の適用、最新バージョンへの更新、ローカルでのコード編集の取り消しなど）、Section Galleryアプリから直接パーツを再インストールできます。

再インストールは、SHOPLINEが提供する元のパーツコードを更新しますが、レイアウト構造、コンテンツ、スタイル設定など、テーマエディタ内の既存のビジュアル設定には影響しません。これにより、ストアフロントの外観を維持しながら安全にコードをリセットできます。

パーツを再インストールする方法

1. SHOPLINE管理画面から、アプリに移動し、Section Galleryアプリを検索して開きます。

   

2. 再インストールしたいパーツを見つけて、再インストールをクリックし、操作を確認します。

   

制限事項

• OS 3.0 テーマのみ対応：セクションギャラリーのパーツはOS 3.0で構築されたテーマにのみ追加可能です。OS 3.0以外のテーマはテーマ選択のドロップダウンに表示されません。

• パーツを追加するとテーマはカスタムテーマになります：セクションギャラリーのパーツを追加すると、テーマはカスタムバージョンに変換されます。

  重要：カスタムテーマは自動または手動で更新できません。将来的にテーマバージョンを更新するには、SHOPLINEに連絡してホワイトリストサポートを申請する必要があります。

   

よくある質問

1. OS 3.0以外のテーマでセクションギャラリーを使えますか？
   いいえ。セクションギャラリーはOS 3.0テーマのみ対応しています。OS 3.0以外のテーマはパーツ追加時のテーマ選択ドロップダウンに表示されません。

2. パーツを追加すると既存のテーマ設定に影響しますか？
   いいえ。新しいセクションギャラリーパーツを追加しても、現在のページレイアウトや他のパーツには影響しません。
   バグ修正やローカル編集の取り消しのために再インストール機能を使ってパーツの元のコードを復元する場合、システムはパーツのコードのみを更新します。テーマエディターで設定したレイアウト、テキスト、スタイルなどの既存のビジュアル設定は変更されません。

   注：同じパーツを再インストールまたは再追加し、フォルダ名が既存のバージョンと一致する場合、システムは元のコード構造を上書きする可能性があります。パーツファイルの名前を手動で変更している場合、システムが認識せず新しいコピーをインストールすることがあります。

3. 同じテーマ内で複数のセクションギャラリーパーツを使えますか？
   はい。OS 3.0テーマ内で複数のパーツをインストールして使用できます。各パーツは独立して機能し、ストアの異なるエリアに配置可能です。