セクションギャラリー:OS 3.0 テーマにオープンソースパーツを追加する
「セクションギャラリー」アプリを使用すると、OS 3.0テーマを利用しているビジネスオーナーは、柔軟でカスタマイズ可能、かつ完全に編集可能なオープンソースのパーツを簡単に追加できます。この機能により、ストアデザインの制御が強化され、PCおよびモバイルのレイアウト編集が効率化されます。
このガイドでは、セクションギャラリーアプリの使用方法、インストール手順、カスタマイズのヒント、パーツコードの編集、制限事項、およびよくある質問について説明します。
|
重要な注意事項:
|
アプリを使用するタイミング
レイアウトの柔軟性が必要な場合や、現在のテーマでは利用できない高度なページパーツにアクセスする必要がある場合は、セクションギャラリーの使用を検討してください。
一般的なシナリオ
- 専門的なページ表示パーツの追加:セクションギャラリーは、画像とテキストのレイアウト、商品ショーケース、テストモニアルセクション、動画モジュール、仕様テーブル、ファイルダウンロードブロック、スクロールバナーなど、幅広いオープンソースのパーツを提供します。これらのパーツは多様なユースケースをサポートし、ページおよびブロックレベルでの柔軟な構成を可能にします。
- テキスト、ボタン、背景、または間隔などの要素のカスタマイズ:セクションギャラリーを使用すると、個々のパーツの外観やレイアウトを詳細な設定で微調整できます。コードに触れることなく、ブランドデザインに合わせて画像の角、影、パディング、フォントスタイルなどの視覚要素を簡単に調整できます。
| 注意:すべてのセクションギャラリーのパーツはOS 3.0テーマと互換性があり、マルチレベル構造をサポートしているため、セクションレベルや個々のブロック内など、さまざまなエリアにパーツを追加できます。 |
アプリのインストールと使用
以下の手順に従って、セクションギャラリーをインストールし、OS 3.0テーマにパーツを追加します:
SHOPLINEアプリストアからセクションギャラリーをインストールする方法
- SHOPLINEの管理画面からアプリに移動し、アプリストアに移動ボタンをクリックします。
- 「セクションギャラリー」を検索し、インストールをクリックして、アプリのインストールを完了するために認証します。
テーマにセクションギャラリーのパーツを追加する方法
- アプリをインストールした後、テーマに追加するパーツを選択します。
- ポップアップウィンドウで、パーツをインストールしたいOS 3.0テーマを選択します。
-
テーマエディタに移動をクリックして、ビジュアルエディタを開きます。
または、オンラインストア > デザインに移動して、テーマエディタにアクセスし、必要に応じてパーツを追加します。テーマの使用と公開に関する詳細は、このヘルプセンターガイドのテーマエディタへのアクセスと使用のセクションを参照してください。
パーツの配置とカスタマイズ方法
- 「+ パーツを追加」をクリックし、使用したいセクションギャラリーパーツを選択します。追加したら、テーマ内の希望の位置にパーツをドラッグします。セクションギャラリーは、セクショングループ内や個々のブロック内に配置するなど、複数のレベルをサポートしています。
- 組み込みの設定パネルを使用して、テキスト、ボタン、背景、間隔、レイアウトスタイルをカスタマイズします。
- デザインが完了したら、保存をクリックして変更を適用します。その後、プレビュー > オンラインストアを表示をクリックして、ライブストアフロントでのパーツの表示を確認します。
パーツコードの編集
コーディングの経験がある場合は、セクションギャラリーのパーツのコードを直接編集して、レイアウトや動作をさらにカスタマイズできます。
- SHOPLINEの管理画面からオンラインストア > デザインに移動し、セクションギャラリーパーツがインストールされたテーマを見つけます。テーマの横にある⋯(三点アイコン)をクリックし、コードを編集を選択します。
- コードエディタの左サイドバーでsectionsフォルダを開いて、インストールされたパーツを表示します。
-
SGC-で始まるファイルを探します(例:SGC-product-list.css)。検索バーを使用してSGCを検索すると、すべてのセクションギャラリーパーツを迅速に見つけることができます。
- 編集したいファイルをクリックして、パーツのコードの編集を開始します。
| 重要:セクションギャラリーコンポーネントが追加されると、テーマはプライベートテーマになり、自動的または手動で更新できなくなります。 |
コンポーネントの再インストールによるコードの更新または復元
セクションギャラリーコンポーネントを元の状態に復元する必要がある場合、バグ修正を適用したり、最新バージョンに更新したり、ローカルコードの編集を元に戻したりすることができます。セクションギャラリーアプリから直接コンポーネントを再インストールできます。
再インストールすると、テーマエディタ内のレイアウト構造、コンテンツ、スタイル設定など、既存の視覚設定に影響を与えることなく、SHOPLINEが提供する元のコンポーネントコードが更新されます。これにより、ストアフロントの外観を保持しながら、安全にコードをリセットできます。
| 注意:セクションギャラリーコンポーネントにコードレベルの変更を加え、レイアウト設定を失うことなくデフォルトバージョンに戻したい場合は、この機能を使用して元の構造を復元してください。 |
コンポーネントの再インストール方法
- SHOPLINEの管理画面からアプリに移動し、セクションギャラリーアプリを検索して開きます。
- 再インストールしたいコンポーネントを見つけて再インストールをクリックし、アクションを確認します。
| 重要:システムは元のファイル名に基づいてインストールされているコンポーネントを判断します。コンポーネントファイルの名前を手動で変更した場合(例:sgc-shopping-image.liquid)、システムはそれを認識せず、新しいコピーをインストールする可能性があります。 |
制限事項
- OS 3.0テーマとのみ互換性があります:セクションギャラリーコンポーネントは、OS 3.0で構築されたテーマにのみ追加できます。非OS 3.0テーマはテーマ選択のドロップダウンに表示されません。
-
コンポーネントを追加するとテーマはプライベートテーマになります:セクションギャラリーコンポーネントが追加されると、テーマはプライベートバージョンに変換されます。
重要:プライベートテーマは自動的または手動で更新できません。将来的にテーマバージョンを更新するには、SHOPLINEにホワイトリストサポートをリクエストする必要があります。
よくある質問
-
セクションギャラリーを非OS 3.0テーマで使用できますか?
いいえ。セクションギャラリーはOS 3.0テーマとのみ互換性があります。非OS 3.0テーマはコンポーネントを追加する際にテーマ選択のドロップダウンに表示されません。 -
コンポーネントを追加すると既存のテーマ設定に影響しますか?
いいえ。新しいセクションギャラリーコンポーネントを追加しても、現在のページレイアウトや他のコンポーネントには影響しません。
コンポーネントの元のコードを復元するために再インストール機能を使用する場合(例えば、バグ修正を適用したりローカル編集を元に戻したりするため)、システムはコンポーネントのコードのみを更新します。テーマエディタで設定されたレイアウト、テキスト、スタイルなどの既存の視覚設定は変更されません。注意:同じコンポーネントを再インストールまたは再追加し、フォルダ名が既存のバージョンと一致する場合、システムは元のコード構造を上書きする可能性があります。コンポーネントファイルの名前を手動で変更した場合、システムはそれを認識せず、新しいコピーをインストールする可能性があります。 -
同じテーマ内で複数のセクションギャラリーコンポーネントを使用できますか?
はい。同じOS 3.0テーマ内で複数のコンポーネントをインストールして使用できます。各コンポーネントは独立して機能し、ストアの異なるエリアに配置できます。
この記事はAIを使用して翻訳されており、不正確な部分が含まれている可能性があります。最も正確な情報については、元の英語版を参照してください。