ショップデザイン機能は、メニューの「デザイン」から豊富なテーマから好きなデザインを選んだり、選んだテーマを自由にカスタマイズして、オリジナルのショップページを作成することができます。
- 基本の操作
- 「テーマ」を選ぶ
- 「ロゴ」を設定する
- 「ナビゲーション」を設定する
- 「スタイル」を設定する
- 「背景」を設定する
- 「パーツ」を追加する
- 「商品リスト」を編集する
- 「テーマ設定」を編集する
- デザインの編集や項目の追加ができないページ
基本の操作
基本的な操作は、画面上部の操作メニューからおこなうことができます。
テーマを選んだり、デザインのカスタマイズをしたい場合は、各編集メニューからおこないます。
【PCの場合】
【スマートフォンの場合】
【操作メニュー】
| 1. 編集メニュー | 各メニューから、デザインの詳細なカスタマイズをおこなうことができます。 |
|---|---|
| 2. ページ切り替え | 編集するページを切り替えます。 編集できるページは、 ・HOME（トップページ） ・ABOUT ・商品一覧（ALL ITEMページ、CATEGORYページ（※1）、商品検索結果ページ（※2）） ・商品ページ ・「ページ追加 App」で追加したページ です。 商品ページは表示順1番目の商品が表示されます。 |
| 3. プレビュー | プレビュー画面を表示します。プレビュー画面では、ショップ内の編集可能なページ以外もプレビューすることができます。ただし、外部リンク先などショップ外のページはプレビューできません。 |
| 4. 保存する | 編集内容を保存して、ショップページに反映します。 |
| 5. 終了する | 編集内容を破棄して、ショップデザイン機能を終了します。 |
「テーマ」を選ぶ
「テーマ」メニューからは、デザインテーマを選択することができます。 ショップページをデザインするには、まずはテーマを選んで、全体の構成を決めてください。テーマは、見た目の印象だけではなく、ショップの特徴にあったテーマを選ぶことも大切です。
※テーマを変更すると、それまでのカスタマイズ内容はリセットされますので、ご注意ください。
【PCの場合】
【スマートフォンの場合】
| 1．デモショップを見る | デモショップを表示します。 デモショップでは、商品登録や拡張機能（Apps）の設定をおこなった状態でどのようなデザイン・操作性となるのか、詳細に確認することができます。 ※デモショップでは、カート画面を操作することはできません。 |
|---|---|
| 2．プレビューを見る | プレビュー画面を表示します。 プレビュー画面で「このテーマに変更する」をクリックすることで、テーマを変更できます。 |
| 3．購入済み・カスタムのテーマ | 「BASEデザインマーケット」で購入したテーマや、「HTML編集 App」で作成したテーマを選ぶページに切り替えます。 |
| 4．AIでオリジナルデザインを作成する | 複数の質問に答えると、AIがオリジナルデザインを提案します。 |
【デザインテーマの種類】
| オフィシャルテーマ | BASEのオフィシャルテーマです。無料でご利用いただけます。 最新の拡張機能（Apps）に対応しています。 「デザインパーツ」でのカスタマイズに対応しています。 |
|---|---|
| デザイナーズテーマ |
デザインマーケットで購入したテーマです。 ※デザインパーツには対応していません。 ※対応している拡張機能（Apps）は、テーマによって異なります。 |
| カスタムテーマ | 「HTML編集 App」を利用して作成したテーマです。 ※デザインパーツなど、一部のカスタマイズは利用できません。 |
「ロゴ」を設定する
「ロゴ」メニューからは、ショップロゴを設定することができます。
画像を指定するには、「ロゴ画像」を選んで、表示したい画像をアップロードしてください。
「表示する場所ごとにロゴをカスタマイズする」では、表示する場所にあわせて、ロゴの表示をカスタマイズができます。
「表示する場所ごとにロゴをカスタマイズする」で設定したロゴは、該当する場所のみに表示され、ほかの場所には表示されません。
くわしくは、こちらをご確認ください。
「ナビゲーション」を設定する
「ナビゲーション」メニューからは、ナビゲーションのテキストや並び順を変更したりすることができます。
「ナビゲーションを追加する」で、ショップの公式HPなど任意のリンク先を最大2つまでナビゲーションに追加することが可能です。
「CONTACT」メニューは、非表示にすることはできません。
「スタイル」を設定する
「スタイル」メニューからは、「フォント」や「カラー」を設定することができます。
【設定できるオプション】
| ナビゲーションカラー | ナビゲーションのテキストカラーです。 |
|---|---|
| タイトルカラー | タイトルに設定されるカラーです。 |
| 本文カラー | 本文に設定されるカラーです。 |
| ボタンカラー | ボタンに設定されるカラーです。 |
| アクセントカラー | 予約商品ラベルや抽選商品ラベルなど、目立たせたい部分に設定されるカラーです。 |
| タイトルフォント | タイトルに設定されるフォントです。 |
| タイトルサイズ | タイトル全体の表示サイズを「小」「中」「大」「特大」で指定できます。 |
| タイトルの配置 | タイトル全体を「左寄せ」「中央寄せ」で表示するかを指定できます。 |
| 本文フォント | 本文に設定されるフォントです。 |
「背景」を設定する
「背景」メニューからは、背景カラーや背景画像を設定することができます。
選択したテーマによっては、エリアごとに背景を設定することが可能です。
「パーツ」を追加する
「パーツ」メニューからは、ショップページに、「画像」や「テキスト」のようなデザインパーツを自由に追加することができます。
※このメニューは、無料のオフィシャルテーマを選択している場合のみご利用いただけます。
【PCの場合】
- 「パーツ」メニューを開きます。
- 好きなパーツを選び、ドラッグ＆ドロップでページに追加します。
- パーツを選択状態にすると、パーツの詳細なカスタマイズをおこなうことができます。
【スマートフォンの場合】
- 「＋」をタップしてください。「ここにパーツを追加」が表示され、「パーツ」メニューが開きます。
- 追加したいパーツを選んでください。選んだパーツがページに追加されます。
- 追加されたパーツを選択すると、パーツの詳細なカスタマイズをおこなうことができます。
※詳細は、デザインパーツの使い方 をご確認ください。
「商品リスト」を編集する
商品リストとは、公開中の商品を商品管理で設定した表示順に、一覧で表示するコンテンツです。
トップページ（HOME）、ALL ITEMページ、CATEGORYページ（※1）、商品検索結果ページ（※2）に、表示されます。
編集メニューの「商品リスト」から、商品リストのデザインをカスタマイズできます。
| タイトル | タイトルの表示／非表示、表示するテキストを入力します。 |
|---|---|
| タイトルの種類 | テキストの表示サイズを「小タイトル」「中タイトル」「大タイトル」で指定できます。 |
| レイアウト | 商品リスト全体のデザインを選択します。 ※テーマによってカスタマイズできる内容が異なります。 |
| 商品の追加読み込み | 商品が多い場合の追加読み込みの方法を選択できます。 |
| 商品画像のデザイン | 商品画像のフレームの表示や透過の有無を選択できます。 ※テーマによってはカスタマイズできません。 |
| トップページに表示する | OFFにすると、トップページ（HOME）から商品リストを非表示にすることができます。 |
「テーマ設定」を編集する
「テーマ設定」メニューからは、各テーマ固有のオプションを設定することができます。
デザインマーケットで購入したテーマの詳細な設定方法につきましては、テーマの紹介ページをご確認ください。
※このメニューは、「デザインマーケットで購入した有料のテーマ」「『HTML編集 App』で編集をしたカスタムテーマ」を選択している場合のみ、ご利用いただけます。
【スマートフォン用のデフォルトテーマ設定】
「スマートフォン用のデフォルトテーマ設定」をONにすると、BASEがご提案するスマートフォン用のデフォルトテーマ（デザインはお選びいただけません）がスマートフォンで表示されます。
※「スマートフォン用のデフォルトテーマ」は、2022年2月28日にて、動作の保証を終了させていただくこととなりました。あらたに、「スマートフォン用のデフォルトテーマを使用する」をONにすることはできません。くわしくは、こちらをご確認ください。
※1 CATEGORYページ：「カテゴリ管理 App」で作成したカテゴリを選択したさいに表示されるページ
※2 商品検索結果ページ：「商品検索 App」の検索窓でキーワード検索をしたさいに表示される検索結果ページ
デザインの編集や項目の追加ができないページ
以下のページはデザインを編集したり、入力項目を追加したりすることができません。
ページ自体を削除することもできません。
- CONTACTフォーム（お問い合わせフォーム）
- カート画面
- 購入者情報の入力画面
- 購入完了画面