デザインパーツは、ショップページに自由に追加して、デザインをカスタマイズするための部品です。
デザインパーツには、「テキスト」「画像」のようなシンプルで汎用的なパーツから、「SNSバナー」「ピックアップ商品」のような、ファンを増やしたりショップ運営の工夫にご利用いただけるパーツまで、幅広くご用意があります。
それぞれのパーツには、詳細なカスタマイズ設定も用意されており、細部までこだわったショップページを作ることができます。
パーツの追加・移動・削除
パーツメニューから、好きなパーツを選んで任意の場所に追加することができます。
パーツによっては、追加できる数やエリアが限定されます。
【PCの場合】
- 「パーツ」メニューを開きます。
- 好きなパーツを選び、ドラック＆ドロップでページに追加します。
- パーツを選択状態にすると、パーツの詳細なカスタマイズをおこなうことができます。
【スマートフォンの場合】
- 「＋」をタップしてください。「ここにパーツを追加」が表示され、「パーツ」メニューが開きます。
- 追加したいパーツを選んでください。選んだパーツがページに追加されます。
- 追加されたパーツを選択すると、パーツの詳細なカスタマイズをおこなうことができます。
「↑」「↓」でパーツを移動することができます。
「ゴミ箱アイコン」でパーツを削除することができます。
タイトル
タイトルを表示することができます。
コンセプトや見出しなど、目立たせたいテキストの入力のさいに利用してください。
説明文など、複数行で表示したい場合は「テキスト」パーツを利用してください。
【設定できるオプション】
| テキスト | 表示するテキストを入力します。 |
|---|---|
| 文字の配置 | テキスト全体を「左寄せ」「中央寄せ」「右寄せ」で表示するかを指定できます。 |
| タイトルの種類 | テキストの表示サイズを「小タイトル」「中タイトル」「大タイトル」で指定できます。 |
| 下線 | 下線の表示／非表示、カラーをそれぞれ指定できます。 |
| アイコン | アイコンの表示／非表示、カラー、表示するアイコンの種類をそれぞれ指定できます。 |
テキスト
テキストを表示することができます。
説明文など、複数行で表示したいテキストの入力に利用してください。
コンセプトや見出しなど、目立たせたい1行のテキストを表示したい場合は「タイトル」パーツを利用してください。
【設定できるオプション】
| テキスト | 表示するテキストを入力します。 |
|---|---|
| 強調 | テキストの一部分を指定して、強調表示を指定することができます。 |
| リンク | テキストの一部分を指定して、リンクURLを指定することができます。 |
| 文字の配置 | テキスト全体を「左寄せ」「中央寄せ」「右寄せ」で表示するか指定できます。 |
ボタン
ボタンを作成することができます。
【設定できるオプション】
| レイアウト | パーツのレイアウトを指定します。 |
|---|---|
| テキスト | ボタンに表示するテキストを入力します。 |
| リンク先 | ボタンをクリックしたときのリンク先URLを指定します。 |
| テキストカラー | テキストのカラーを指定します。 |
| 背景色 | ボタンの背景カラーを指定します。 |
| 枠線 | ボタンの枠線カラーを指定します。 |
画像
画像を表示することができます。
【設定できるオプション】
| 画像 | 画像を指定します。10MBまでの jpg,png,gif ファイルを指定できます。 |
|---|---|
| リンク先URL | 画像をクリックしたときのリンク先URLを指定します。 |
| 高さ | 画像の高さを指定します。 |
| 画像の切り抜き方 | 画像の切り抜き方を選択します。 |
画像とテキスト
テキスト付きの画像を表示することができます。
画像とテキストパーツには、上下型と左右型があります。
画像とテキストパーツ（上下）
上下型では、デザインを10種類から選ぶことができます。選択したデザインによって設定できるオプションは異なります。
画像・テキスト・リンク先URLを自由に組み合わせることができるため、バナー形式のメニュー作成やコーディネート掲載など、さまざまな用途で利用することができます。
【設定できるオプション（上下型）】
| デザイン | 「選択中のデザイン」を「変更する」から、デザインを選択できます。 |
|---|---|
| タイトル | タイトルの表示／非表示、表示するテキストを入力します。 |
| タイトルの種類 | テキストの表示サイズを「小タイトル」「中タイトル」「大タイトル」で指定できます。 |
| 画像の形 | 表示する画像の形を「正方形」「縦長（横:縦 3:4）」「横長（横:縦 9:5）」から指定できます。 |
| 画像 | 画像を指定します。10MBまでの jpg,png,gif ファイルを指定できます。 |
| テキスト | テキストを指定します。 ※デザインによっては指定できません。 |
| リンクボタンのテキスト | リンクボタンのテキストを指定します。 ※デザインによっては指定できません。 |
| リンク先のURL | 画像やリンクボタンをクリックしたときのリンク先URLを指定します。 |
| リンクボタンカラー | リンクボタンのカラーを指定します。※デザインによっては指定できません。 |
| 画像を追加する | 最大4枚まで、表示する画像を追加することができます。 画像の表示枚数によって、レイアウトは自動的に調整されます。 |
| 表示画像を減らす | 表示する画像を減らすことができます。 |
画像とテキストパーツ（左右）
左右型では、画像とテキストを左右に配置することができます（スマートフォンでは、テキストは画像の上下への配置となります）。
ショップのこだわりや、商品の紹介など、さまざまな用途で利用することができます。
【設定できるオプション（左右型）】
| PCのレイアウト | PCサイトでのパーツのレイアウトを指定します。 |
|---|---|
| スマートフォンのレイアウト | スマートフォンサイトでのパーツのレイアウトを指定します。 |
| 画像 | 画像を指定します。10MBまでの jpg,png,gif ファイルを指定できます。 |
| 画像のリンク先 | 画像をクリックしたときのリンク先URLを指定します。 |
| テキスト | 表示するテキストを入力します。 |
| 文字の配置（水平方向） | テキスト全体を「左寄せ」「中央寄せ」「右寄せ」で表示するかを指定できます。 |
| 文字の配置（垂直方向） | テキスト全体を「上寄せ」「中央寄せ」「下寄せ」で表示するかを指定できます。 |
スライドショー
スライドショーを作成することができます。
「スライドを追加する」で、最大5枚までスライドさせることができます。
【設定できるオプション】
| 画像 | 画像を指定します。10MBまでの jpg,png,gif ファイルを指定できます。 推奨サイズは 縦504px × 横1,200pxです。 |
|---|---|
| 画像のリンク先 | 画像をクリックしたときのリンク先URLを指定します。 |
動画
＜YouTube＞＜Vimeo＞の公開中の動画URLを指定することで、ページへ動画を追加することができます。
【設定できるオプション】
| 動画URL | 追加したい動画のURLを指定します。＜YouTube＞＜Vimeo＞で公開中の動画のURLを指定することができます。 |
|---|
カタログ
商品カタログを作成することができます。
【設定できるオプション】
| デザイン | 「選択中のデザイン」を「変更する」から、デザインを選択できます。 |
|---|---|
| タイトル | タイトルの表示／非表示、表示するテキストを入力します。 |
| タイトルの種類 | テキストの表示サイズを「小タイトル」「中タイトル」「大タイトル」で指定できます。 |
| 商品名の表示デザイン | デザインを選択できます。 ※デザインによっては選択できません。 |
| 非公開商品の商品名と 価格を表示する |
非公開商品の商品名と価格を表示するかを指定できます。 |
| セットを追加する | 最大20セットまで、表示するセットを追加することができます。 |
| このセットを削除 | 表示するセットを削除することができます。 |
| 表示画像を追加する | 最大4枚まで、表示する画像を追加することができます。 画像の表示枚数によって、レイアウトは自動的に調整されます。 |
| 表示画像を削除する | 表示する画像を減らすことができます。 |
| 商品を選択する | 最大10商品まで、商品を選択することができます。 |
お知らせエリア
お客様へのお知らせなど、目立たせたい情報の表示に適したテキストセットです。
枠線や背景カラーを自由に指定することができます。
【設定できるオプション】
| メインテキスト | メインテキスト（1行目）を指定します。 |
|---|---|
| サブテキスト | サブテキスト（2行目）を指定します。 |
| テキストカラー | テキストのカラーを指定します。 |
| 背景色 | 背景のカラーを指定します。 |
| 枠線 | 枠線のカラーを指定します。 |
送料案内
送料を表示することに適したテキストセットです。
表示内容は、実際の送料設定に応じてカスタマイズしてご利用ください。
※ショップ情報や「送料詳細設定 App」の設定とは自動で連携されませんので、ご注意ください。
【設定できるオプション】
| サブテキスト（上段） | サブテキスト（1行目）を指定します。 |
|---|---|
| メインテキスト | メインテキスト（2行目）を指定します。 |
| サブテキスト（下段） | サブテキスト（3行目）を指定します。 |
| テキストカラー | テキストのカラーを指定します。 |
| 背景 | 背景のカラーを指定します。 |
| 枠線 | 枠線のカラーを指定します。 |
カテゴリメニュー
※このパーツは「カテゴリ App」インストール時のみご利用いただけます。
カテゴリを一覧でメニュー表示することができます。
登録されているすべてのカテゴリが自動で表示されます。
【設定できるオプション】
| タイトル | タイトルの表示／非表示、表示するテキストを入力します。 |
|---|---|
| タイトルの種類 | テキストの表示サイズを「小タイトル」「中タイトル」「大タイトル」で指定できます。 |
ブログメニュー
※このパーツは「Blog App」インストール時のみご利用いただけます。
ブログ記事を一覧でメニュー表示することができます。
新着順に3件表示されます。
ブログ記事に追加したいちばん最初の画像が、サムネイルとして表示されます。
【設定できるオプション】
| デザイン | 選択中のデザイン」を「変更する」から、デザインを選択できます。 |
|---|---|
| タイトル | タイトルの表示／非表示、表示するテキストを入力します。 |
| タイトルの種類 | テキストの表示サイズを「小タイトル」「中タイトル」「大タイトル」で指定できます。 |
セール商品
※このパーツは「セール App」インストール時のみご利用いただけます。
セール中の商品を表示することができます。
表示する商品は、セール設定商品から自動で選択され、指定することはできません。任意の商品を表示したい場合は、「ピックアップ商品」パーツをご利用ください。
商品は、最大6個まで表示されます。
【設定できるオプション】
| タイトル | タイトルの表示／非表示、表示するテキストを入力します。 |
|---|---|
| タイトルの種類 | テキストの表示サイズを「小タイトル」「中タイトル」「大タイトル」で指定できます。 |
ピックアップ商品
任意の商品を、最大6個まで選択して表示することができます。
新着商品や季節の商品などのおすすめにご利用いただけます。
【設定できるオプション】
| デザイン | 「選択中のデザイン」を「変更する」から、デザインを選択できます。 |
|---|---|
| タイトル | タイトルの表示／非表示、表示するテキストを入力します。 |
| タイトルの種類 | テキストの表示サイズを「小タイトル」「中タイトル」「大タイトル」で指定できます。 |
| 商品 | 「公開中」の商品から最大6つまで選択することができます。 |
同じカテゴリの商品
※このパーツは「カテゴリ管理 App」インストール時のみご利用いただけます。
商品ページで表示中の商品と同じカテゴリの商品を表示することができます。
表示する商品は、表示中の商品と同じカテゴリ設定の商品から自動で選択され、指定することはできません。任意の商品を表示したい場合は、「ピックアップ商品」パーツをご利用ください。
商品は、最大6個まで表示されます。
このパーツは「商品ページ」のみに追加可能です。
【設定できるオプション】
| タイトル | タイトルの表示／非表示、表示するテキストを入力します。 |
|---|---|
| タイトルの種類 | テキストの表示サイズを「小タイトル」「中タイトル」「大タイトル」で指定できます。 |
おすすめ商品
ショップの商品を自動選択して表示します。
表示する商品は、購買記録などさまざまなデータをもとに自動で選択されます。任意のおすすめ商品を表示したい場合は、「ピックアップ商品」パーツをご利用ください。
商品は、最大6個まで表示されます。
このパーツは「商品ページ」のみに追加可能です。
【設定できるオプション】
| タイトル | タイトルの表示／非表示、表示するテキストを入力します。 |
|---|---|
| タイトルの種類 | テキストの表示サイズを「小タイトル」「中タイトル」「大タイトル」で指定できます。 |
最近チェックした商品
お客様が最近閲覧した商品を自動で表示します。
いちど興味を持った商品を表示することで、購入へのきっかけを強化します。
商品は、最大6個まで表示されます。
【設定できるオプション】
| タイトル | タイトルの表示／非表示、表示するテキストを入力します。 |
|---|---|
| タイトルの種類 | テキストの表示サイズを「小タイトル」「中タイトル」「大タイトル」で指定できます。 |
SNSバナー
「ショップ情報」で設定したSNSアカウントへのリンクバナーを表示することができます。
※事前に「ショップ情報」でSNS情報を設定する必要があります。
※「Pay IDアプリ」は、「ショップ設定」で「アプリ掲載」がONになっている場合のみ選択できます。
【設定できるオプション】
| SNS | 表示するSNSを選択します。 リンク先は、ショップ情報で設定したSNSアカウントとなります。 |
|---|
SNSアイコン
「ショップ情報」で設定したSNSのアイコンを表示することができます。
※事前に「ショップ情報」でSNS情報を設定する必要があります。
【設定できるオプション】
| 表示 | SNSアカウントごとに、表示ON／OFFを指定します。 |
|---|
シェアボタン
各種SNSへのシェアボタンを表示できます。
シェアするページは、パーツを追加するページによって変わります。
【シェアするページ】
| 商品ページ以外 | HOME（ショップのトップページ）をシェアします。 |
|---|---|
| 商品ページ | 商品ページをシェアします。 |
メールマガジン
※このパーツは「メールマガジン App」インストール時のみご利用いただけます。
メールマガジン登録フォームを設置することができます。
【設定できるオプション】
| メインテキスト | 表示するメインテキストを入力します。 |
|---|---|
| サブテキスト | 表示するサブテキストを入力します。 |
ショップの説明
「ショップ設定」で設定した「ショップの説明」を表示することができます。
【設定できるオプション】
| メインテキスト | メインテキストを表示することができます。 |
|---|
地図
住所を指定することで、ページに＜Googleマップ＞の地図を追加することができます。
【設定できるオプション】
| 住所または＜Google マップ＞上の登録名 | 住所または＜Googleマップ＞ 上の登録名を指定し、地図を表示させることができます。 |
|---|---|
| ズーム | 地図の縮尺を設定します。 |
商品詳細
商品詳細パーツは、任意で追加することができない特別なパーツです。
商品詳細ページに固定で1つだけ表示されています。
【設定できるオプション】
| 商品説明レイアウト | 商品説明の表示位置を選択できます。 ※PCサイト用の設定です。スマートフォンサイトにはこの設定は反映されません。 |
|---|---|
| 商品画像レイアウト | 商品画像の表示位置を選択できます。 ※PCサイト用の設定です。スマートフォンサイトにはこの設定は反映されません。 |