設定画面:ショップデザイン / テンプレート選択・編集 / ノーコードデザイン
テンプレート編集画面の左パネルにある「ヘッダー」「メイン」「フッター」の3エリアがあります。
それぞれに「セクション」を並べてページを構成します。
このページでは、テンプレート全体に適用されるテーマ設定、および、セクションの基本操作を説明します。
| セクション内の詳しい「項目」の説明は、ノーコードデザイン:セクション をご参考ください。 |
テーマ(サイト全体)
左パネル上部の「テーマ(サイト全体)」を開くと、テンプレートの全ページに共通して適用されるデザインを設定できます。
設定を変更すると、全ページのプレビューに即時反映されます。
| 設定項目 | 種別 | 選択肢 | 初期値 |
|---|---|---|---|
| 背景カラーを変更する 文字カラーを変更する |
カラー | — | — |
| フォントの種類 | セレクト | ゴシック/明朝 | ゴシック |
| 見出しの文字サイズ | セレクト | 最小(20px)/標準(24px)/大きめ(28px)/最大(32px) | 標準(24px) |
| 本文の文字サイズ | セレクト | 最小(12px)/標準(14px)/大きめ(16px)/最大(18px) | 標準(14px) |
| 通常ボタン文字カラー | カラー | — | — |
| 通常ボタンカラー | カラー | — | — |
| 通常ボタンの枠 | チェック | ON/OFF | OFF |
| カートボタン文字カラー | カラー | — | — |
| カートボタンカラー | カラー | — | — |
| カートボタンの枠 | チェック | ON/OFF | OFF |
| アイコンカラー | カラー | — | — |
| 左右の余白(px) | セレクト | 16/24/32/48 | 32 |
| 要素の角丸(px) | セレクト | 0/4/8/16 | 8 |
| カテゴリ・検索結果の商品列数 | セレクト |
2/3/4 ※「カテゴリ・検索結果の商品列数」は、カテゴリ・商品検索結果・まとめ買い割引ページの商品の並びに適用されます。トップページなどの「商品一覧」セクションは、セクションごとに個別で列数を設定できます。 |
4 |
| カード形式にする | チェック | ON/OFF | ON |
| カード背景カラー(カード形式ON時) | カラー | — | — |
| カードシャドウ(カード形式ON時) | チェック | ON/OFF | ON |
| カード枠(カード形式ON時) | チェック | ON/OFF | ON |
| カード枠カラー(カード形式ON時) | カラー | — | — |
| 表示項目:カテゴリ、商品説明文、割引率(額)、在庫状況、割引前価格、獲得ポイント、SALEアイコン、レビュー、システム商品コード、カテゴリー識別コード、独自商品コード、製造元原産地、特殊表示 | チェック | ON/OFF | ON |
| 価格表記 | ラジオ | 1,000円/¥1,000 | 1,000円 |
| (税込)を表示する | チェック | ON/OFF | ON |
| 在庫ありの文字色 | カラー | — | — |
| 残りわずかの文字色 | カラー | — | — |
| ポイントカラー | カラー | — | — |
■注意事項
- 「見出しの文字サイズ」「本文の文字サイズ」は、一部のセクション(画像バナー・テキスト+画像・バナーギャラリー・見出し+テキスト)では、そのセクション側の文字サイズ設定が優先されます。
計測用タグを挿入する
下記の各ページに、計測用のタグを挿入できます。
「head に出力するタグ」と「</body> 直前に出力するタグ」を設定することができます。
(それぞれ最大20,000文字)
head に出力するタグ:<head>〜</head> 内に出力します。
</body> 直前に出力するタグ:</body> 直前に出力します。
|
出力対象ページ
|
※「全ページ共通」に入力した内容は、フリーページにも自動適用されます。
エリア内の基本操作
テンプレート編集画面の左パネルには、「ヘッダー」「メイン」「フッター」の3エリアに分かれて表示されます。
| 操作 | 方法 |
|---|---|
| セクションを追加 | 「+」ボタンをクリックし、追加できるセクションの一覧から選びます。 |
| 並べ替え | 6点リーダーにて、セクションをドラッグ&ドロップで上下に移動できます(同じエリア内のみ)。 |
| 表示/非表示 | 3点リーダーにて、セクションの表示/非表示を切り替えできます。 |
| 複製 | 3点リーダーにて、セクションの「コピー」ができます。 |
| 削除 | 3点リーダーにて、セクションの「削除」ができます。 |
| デザインの編集 | セクションの「∨」マークから設定画面を開き、各種設定(カラー選択・プルダウン・文言入力など)で見た目や内容を調整できます。 |
・セクションを追加
・(例)見出し+テキスト
■注意事項
- 追加できるセクションの種類は、編集中のエリアやメインのページによって異なります。
追加できるものだけが一覧に表示されます。 - セクションの削除は確認なしで即時におこなわれます。
- ヘッダー・フッターは全ページ共通です。
どのページで編集しても、ヘッダー・フッターの変更はすべてのページに反映されます。
「メイン」エリアのページ
切替プルダウンから、以下のページを切り替えて編集できます。
| トップページ 商品詳細 商品カテゴリ 商品検索結果 買い物かご お知らせ一覧 お知らせ詳細 利用案内(※) 会社概要 特定商取引法(※) プライバシーポリシー(※) カタログ(有料オプション) まとめ買い割引 会員確認/年齢確認 |
※「利用案内・特定商取引法・プライバシーポリシー」の3ページは、セクションの追加・複製・削除ができません。既存セクション内の編集のみ可能です。
「メイン」エリアのページ別セクション
各ページに追加できるセクションは以下のとおりです。
ヘッダーには「アナウンス/ヘッダー/SNSボタン」、フッターには「フッター/SNSボタン」が共通で追加できます。
| セクション内の詳しい「項目」の説明は、ノーコードデザイン:セクション をご参考ください。 |
| ページ | 本文に追加できる主なセクション |
|---|---|
| トップページ | アナウンス、トップページイメージ、画像バナー、バナーギャラリー、テキスト+画像、見出し+テキスト、商品一覧、レビュー、YouTube、最新のお知らせ、カレンダー、マーキー、SNSボタン |
| 商品詳細 | 商品詳細、アナウンス、見出し+テキスト、商品一覧、YouTube、カレンダー、マーキー、SNSボタン |
| 商品カテゴリ | カテゴリーヘッダー、カテゴリーページャー、商品一覧(カテゴリー)、アナウンス、見出し+テキスト、商品一覧、YouTube、カレンダー、マーキー、SNSボタン |
| 商品検索結果 | 商品検索結果一覧、アナウンス、見出し+テキスト、商品一覧、YouTube、カレンダー、マーキー、SNSボタン |
| 買い物かご | カート、アナウンス、見出し+テキスト、商品一覧、YouTube、カレンダー、マーキー、SNSボタン |
| お知らせ一覧 | お知らせ一覧、アナウンス、見出し+テキスト、商品一覧、YouTube、カレンダー、マーキー、SNSボタン |
| お知らせ詳細 | お知らせ詳細、アナウンス、見出し+テキスト、商品一覧、YouTube、カレンダー、マーキー、SNSボタン |
| 利用案内 | 利用案内 |
| 会社概要 | 会社概要、アナウンス、見出し+テキスト、商品一覧、YouTube、カレンダー、マーキー、SNSボタン |
| 特定商取引法 | 特定商取引法 |
| プライバシーポリシー | プライバシーポリシー |
| カタログ(有料オプション) | カタログ、アナウンス、見出し+テキスト、商品一覧、YouTube、カレンダー、マーキー、SNSボタン |
| まとめ買い割引 | まとめ買い割引対象商品一覧、アナウンス、見出し+テキスト、商品一覧、YouTube、カレンダー、マーキー、SNSボタン |
| 会員確認/年齢確認 | 会員確認・年齢確認、アナウンス、見出し+テキスト、商品一覧、YouTube、カレンダー、マーキー、SNSボタン |