テーマエディターでストアをデザインする – SHOPLINE ヘルプセンター

お好みのストアテーマを選択したら、SHOPLINEの組み込みツールを使ってストアをパーソナライズするためにテーマエディターにアクセスできます。このガイドでは、エディターへのアクセス方法、その主要な機能、および高度な設定について説明し、魅力的なオンラインストアを素早く作成する手助けをします。

テーマエディターへのアクセス

ストアのテーマを選択した後、テーマエディターにアクセスしてカスタマイズを開始するには、以下の手順に従ってください：

SHOPLINE管理画面から、オンラインストア > デザインに移動します。
マイテーマタブに移動し、現在のテーマセクションを見つけて、デザインをクリックします。
テーマエディター内でテーマのカスタマイズを開始します。

テーマエディターの機能紹介

デザインボタンを現在のテーマでクリックすると、SHOPLINEテーマエディターに入ります。ここでは利用可能な主要なツールの概要を紹介します：

ページセレクターとプレビュー操作

ページセレクターとプレビューツールを使って、レイアウトを素早く切り替え、変更内容が公開前にどのように見えるかを確認できます。

ページセレクター：異なるページ（例：トップページ、商品ページ）間を移動して、個別のレイアウトをカスタマイズします。
プレビューボタン：右上のプレビューをクリックして、以下のいずれかを選択します：
- エディター内プレビュー：現在のエディターウィンドウ内で変更を表示します。
- オンラインストアを表示：公開されたバージョンを新しいウィンドウで開いてライブのストアフロントを確認します。

コンポーネントサイドバー（左サイドバー）

コンポーネントサイドバーを使って、ページのパーツを追加、並べ替え、カスタマイズし、サイトのビジュアル構造を管理します。

パーツの追加：新しいページモジュールを挿入して設定し、さらなるカスタマイズを行うには、パーツを追加をクリックします。
ドラッグ＆ドロップ：セクションやブロックを簡単に移動して、ページ構成を再配置できます。

テーマ設定

ストア全体のブランドの一貫性を保つために、グローバルスタイルを設定します。ロゴやファビコンなどのブランディング、タイポグラフィ、色、ボタン、カード、メディアコンテナなどのレイアウトパーツをカスタマイズして、統一感のあるアイデンティティを確立できます。

デバイスプレビューオプション

さまざまなプレビュー方法で、あらゆる画面サイズでストアがプロフェッショナルに見えることを確認できます：

アイコン切り替え：ページセレクターの隣にあるPCまたはモバイルのアイコンをクリックして、ビューを素早く切り替えます。
プレビューデバイス選択：エディターの下部でプレビューデバイスをクリックし、人気のスマートフォンやタブレットモデルから選択します。
モバイル二次元コード：二次元コードアイコンにカーソルを合わせてスマートフォンでスキャンし、テーマを直接ご自身のデバイスでプレビューします。

クイック編集の元に戻す・やり直し

ストアをカスタマイズしている間、レイアウトや設定の最近の変更を簡単に元に戻したりやり直したりできます。これにより、さまざまなデザインを自信を持って試し、保存済みの作業に影響を与えることなく、以前の編集をすばやく復元したり変更を再適用したりできます。

ストアのデフォルトテキストのカスタマイズ

各テーマには組み込みのデフォルトテキストがありますが、デフォルトテキストの編集機能を使ってカスタマイズできます。これにより、ストア全体のシステム文言をブランドの声により合うようにパーソナライズできます。以下は、始めるための2つの一般的な使用例です。

Note: すべてのテーマ管理機能の概要については、記事「SHOPLINEテーマの紹介」をご参照ください。

使用例1：著作権テキストのカスタマイズ

設定方法：

テーマエディターで、三点リーダーアイコン [...]をクリックし、デフォルトテキストを編集を選択します。
検索バーを使って特定のメッセージ（例：Copyright）を見つけます。
フィールドにカスタムテキストを入力し、更新をクリックします。

使用例 2：多言語最適化

ストアが複数言語に対応している場合、言語タブを切り替えて、各デフォルトラベルが異なる市場向けに自然かつ正確に翻訳されていることを確認できます。

設定方法：

テーマエディターで、三点リーダーアイコン [...]をクリックし、デフォルトテキストを編集を選択します。
編集画面の上部で、切り替えをクリックして最適化したい言語タブを選択します。変更を保存するには完了をクリックします。
調整したいフレーズ（例：エラー404メッセージ）を検索し、ローカライズされたテキストを入力して、更新をクリックします。

テーマコードのカスタマイズとダウンロード

技術的な知識を持つユーザー向けに、SHOPLINEはテーマ構造に対するより深い制御を提供しています。これらの高度なオプションには、三点リーダーアイコン [...]をクリックしてアクセスできます。

コードの編集

この機能を使って、テーマのソースファイル（HTML、CSS、JSON）を編集し、高度なカスタマイズを行います：

SHOPLINE管理画面で、オンラインストア > テーマ に移動します。
現在のテーマを見つけ、テーマカードの三点リーダーアイコン […]をクリックし、コードを編集を選択します。
コードエディタで、左のサイドバーから編集したいファイルを選択します（例：レイアウト、テンプレート、セクション、スニペット、アセット、設定、または ロケールの下）。

警告： コードを変更するとテーマはプライベートテーマに変わります。プライベートテーマはSHOPLINEからの自動システムアップデートを受け取ることができません。

テーマコードのダウンロード

この機能を使って、テーマのソースコードのZIPファイルをローカルバックアップ用にダウンロードできます：

SHOPLINE管理画面で、オンラインストア > テーマ に移動します。
現在のテーマを見つけ、テーマカードの三点リーダーアイコン […]をクリックし、コードをダウンロードを選択します。
ポップアップウィンドウで、メールを送信をクリックしてダウンロードリクエストを確認します。ダウンロードリンクは管理アカウントに紐づくメールアドレスに送信されます。

Note: コード編集はサポートされていますが、ストアが14日間のトライアル期間中の場合はテーマコードの完全なダウンロードは利用できません。

この記事はAIを使用して翻訳されており、不正確な部分が含まれている可能性があります。最も正確な情報については、元の英語版をご参照ください。