ノーコードデザイン：テンプレートの選択・編集

設定画面：ショップデザイン / テンプレート選択・編集 / ノーコードデザイン

ノーコードデザインでは「テンプレート」を選択し、編集してショップに適用します。
このページでは、テンプレート一覧画面・編集画面の操作方法を説明します。

テンプレート選択・編集

ショップデザイン / テンプレート選択・編集 / ノーコードデザインを開くと、作成済み場合はテンプレートが一覧で表示されます。
右上の「テンプレートを追加」から、5つまで追加することができます。

各テンプレートはカード形式で表示され、以下の情報・操作ボタンが表示されます。

テンプレートを追加する

1. 「テンプレートを追加」ボタンをクリックします。
2. 利用できるテンプレートの一覧が表示されます。
3. 使いたいテンプレートを選んで確認すると、新しいテンプレートが作成されます。

※テンプレートは最大5件まで作成できます。上限に達すると「テンプレートを追加」ボタンは押せなくなります。
※2026/06現在、7種類のテンプレートがあります。

テンプレート名を変更する

1. テンプレート名の横にある鉛筆マークをクリックします。
2. 入力欄が表示されるので、新しい名前を入力します。
3. 確定すると保存されます。

テンプレートを削除する

1. テンプレート右上の3点リーダー内、削除ボタン（ゴミ箱アイコン）をクリックします。
2. 確認画面が表示されます。
3. 確認すると削除されます。

■注意事項
現在ショップに適用中のテンプレートは削除できません（削除ボタンが押せない状態になります）。

ショップに適用する

1. 適用したいテンプレートの「ショップに適用する」ボタンをクリックします。
2. 確認画面が表示されます。
3. 確認すると、テンプレートが本番ショップに反映されます。

■注意事項
「ショップに適用する」は即時に本番ショップへ反映されます。
お客様が見るショップのデザインがすぐに切り替わりますのでご注意ください。

テンプレート編集画面

テンプレート選択・編集画面で「テンプレートを編集」ボタンをクリックすると、テンプレート編集画面が開きます。
画面は左右2つのパネルで構成されています。

• 左パネル（操作エリア）：テンプレート設定やセクションの編集を行います。
• 右パネル（プレビュー）：編集中のデザインがリアルタイムで表示されます。

プレビューの確認

左パネルで行った変更は、右パネルのプレビューに即時で反映されます。

• 右上のPC表示・モバイル表示を切り替えて確認できます。
• メインの「商品詳細」は、通常商品・セール商品・バリエーション商品など（※）表示を切り替えて確認できます。
• 画面下部で保存して、右上のプレビュー（目のマーク）をクリックすると、実際のショップページの画像や文言が反映された状態をプレビューできます。

※メインの「商品詳細」のプレビュー切替

■注意事項

• すでに適用中のテンプレートを編集して保存した場合、その変更は即時に本番ショップにも反映されます。
  公開中のデザインを編集する際はご注意ください。
• 利用案内・特定商取引法・プライバシーポリシーの3ページは、本文のセクションの追加・削除・並べ替え・表示切替ができません。ヘッダー・フッターは編集できます。

関連マニュアル

• ノーコードデザインとは
• ノーコードデザイン：テンプレートの選択・編集 
• ノーコードデザイン：テーマ（サイト全体）とエリア
• ノーコードデザイン：セクション
• ノーコードデザイン：フリーページ