デザインパーツは、ショップページに自由に追加して、デザインをカスタマイズするための部品です。
デザインパーツには、「テキスト」「画像」のようなシンプルで汎用的なパーツから、「SNSバナー」「ピックアップ商品」のような、ファンを増やしたりショップ運営の工夫にご利用いただけるパーツまで、幅広くご用意があります。
それぞれのパーツには、詳細なカスタマイズ設定も用意されており、細部までこだわったショップページを作ることができます。
パーツの追加・移動・削除
パーツメニューから、好きなパーツを選んで任意の場所に追加することができます。
パーツによっては、追加できる数やエリアが限定されます。
【PCの場合】
- 「パーツ」メニューを開きます。
- 好きなパーツを選び、ドラック＆ドロップでページに追加します。
- パーツを選択状態にすると、パーツの詳細なカスタマイズをおこなうことができます。
【スマートフォンの場合】
- 「＋」をタップしてください。「ここにパーツを追加」が表示され、「パーツ」メニューが開きます。
- 追加したいパーツを選んでください。選んだパーツがページに追加されます。
- 追加されたパーツを選択すると、パーツの詳細なカスタマイズをおこなうことができます。
「↑」「↓」でパーツを移動することができます。
「ゴミ箱アイコン」でパーツを削除することができます。
タイトル
タイトルを表示することができます。
コンセプトや見出しなど、目立たせたいテキストの入力のさいに利用してください。
説明文など、複数行で表示したい場合は「テキスト」パーツを利用してください。
【設定できるオプション】
| テキスト | 表示するテキストを入力します。 |
|---|---|
| 文字の配置 | テキスト全体を「左寄せ」「中央寄せ」「右寄せ」で表示するかを指定できます。 |
| 文字サイズ | テキストの表示サイズを「普通」「大きい」「特大」で指定できます。 |
| 下線 | 下線の表示／非表示、カラーをそれぞれ指定できます。 |
| アイコン | アイコンの表示／非表示、カラー、表示するアイコンの種類をそれぞれ指定できます。 |
テキスト
テキストを表示することができます。
説明文など、複数行で表示したいテキストの入力に利用してください。
コンセプトや見出しなど、目立たせたい1行のテキストを表示したい場合は「タイトル」パーツを利用してください。
【設定できるオプション】
| テキスト | 表示するテキストを入力します。 |
|---|---|
| 強調 | テキストの一部分を指定して、強調表示を指定することができます。 |
| リンク | テキストの一部分を指定して、リンクURLを指定することができます。 |
| 文字の配置 | テキスト全体を「左寄せ」「中央寄せ」「右寄せ」で表示するか指定できます。 |
ボタン
ボタンを作成することができます。
【設定できるオプション】
| レイアウト | パーツのレイアウトを指定します。 |
|---|---|
| テキスト | ボタンに表示するテキストを入力します。 |
| リンク先 | ボタンをクリックしたときのリンク先URLを指定します。 |
| テキストカラー | テキストのカラーを指定します。 |
| 背景カラー | ボタンの背景カラーを指定します。 |
| 枠線カラー | ボタンの枠線カラーを指定します。 |
画像
画像を表示することができます。
【設定できるオプション】
| 画像 | 画像を指定します。10MBまでの jpg,png,gif ファイルを指定できます。 |
|---|---|
| リンク先URL | 画像をクリックしたときのリンク先URLを指定します。 |
| 高さ | 画像の高さを指定します。 |
| 画像の切り抜き方 | 画像の切り抜き方を選択します。 |
画像とテキスト
テキスト付きの画像を表示することができます。
画像とテキストパーツには、上下型と左右型があります。
画像とテキストパーツ（上下）
上下型では、「カラムを追加する」で画像を最大3個まで追加することができます。
カテゴリの説明など、さまざまな用途で利用することができます。
【設定できるオプション（上下型）】
| レイアウト | パーツのレイアウトを指定します。 |
|---|---|
| 画像 | 画像を指定します。10MBまでの jpg,png,gif ファイルを指定できます。 |
| 画像のリンク先 | 画像をクリックしたときのリンク先URLを指定します。 |
| テキスト | 表示するテキストを入力します。 |
画像とテキストパーツ（左右）
左右型では、画像とテキストを左右に配置することができます（スマートフォンでは、テキストは画像の上下への配置となります）。
ショップのこだわりや、商品の紹介など、さまざまな用途で利用することができます。
【設定できるオプション（左右型）】
| PCのレイアウト | PCサイトでのパーツのレイアウトを指定します。 |
|---|---|
| スマートフォンのレイアウト | スマートフォンサイトでのパーツのレイアウトを指定します。 |
| 画像 | 画像を指定します。10MBまでの jpg,png,gif ファイルを指定できます。 |
| 画像のリンク先 | 画像をクリックしたときのリンク先URLを指定します。 |
| テキスト | 表示するテキストを入力します。 |
| 文字の配置（水平方向） | テキスト全体を「左寄せ」「中央寄せ」「右寄せ」で表示するかを指定できます。 |
| 文字の配置（垂直方向） | テキスト全体を「上寄せ」「中央寄せ」「下寄せ」で表示するかを指定できます。 |
スライドショー
スライドショーを作成することができます。
「スライドを追加する」で、最大5枚までスライドさせることができます。
【設定できるオプション】
| 画像 | 画像を指定します。10MBまでの jpg,png,gif ファイルを指定できます。 推奨サイズは、1,000px x 420px です。 |
|---|---|
| 画像のリンク先 | 画像をクリックしたときのリンク先URLを指定します。 |
動画
＜YouTube＞＜Vimeo＞の公開中の動画URLを指定することで、ページへ動画を追加することができます。
【設定できるオプション】
| 動画URL | 追加したい動画のURLを指定します。＜YouTube＞＜Vimeo＞で公開中の動画のURLを指定することができます。 |
|---|
お知らせエリア
お客様へのお知らせなど、目立たせたい情報の表示に適したテキストセットです。
枠線や背景カラーを自由に指定することができます。
【設定できるオプション】
| タイトル | タイトルテキスト（1行目）を指定します。 |
|---|---|
| テキスト | 説明テキスト（2行目）を指定します。 |
| テキストカラー | テキストカラーを指定します。 |
| 背景カラー | 背景カラーを指定します。 |
| 枠カラー | 枠線のカラーを指定します。 |
送料案内
送料を表示することに適したテキストセットです。
表示内容は、実際の送料設定に応じてカスタマイズしてご利用ください。
※ショップ情報や「送料詳細設定 App」の設定とは自動で連携されませんので、ご注意ください。
カテゴリメニュー
※このパーツは「カテゴリ App」インストール時のみご利用いただけます。
カテゴリを一覧でメニュー表示することができます。
登録されているすべてのカテゴリが自動で表示されます。
【設定できるオプション】
| タイトル | タイトルテキストを表示することができます。 |
|---|
ブログメニュー
※このパーツは「Blog App」インストール時のみご利用いただけます。
ブログ記事を一覧でメニュー表示することができます。
新着順に3件表示されます。
【設定できるオプション】
| タイトル | タイトルテキストを表示することができます。 |
|---|
商品一覧
商品一覧を表示することができます。
商品一覧パーツには、グリッド型とリスト型があり、1ページにいずれか1パーツまで追加することができます。
商品一覧パーツは、「HOME」にのみ表示することができます。
※商品一覧パーツを削除すると、「カテゴリ管理 App」で設定したカテゴリを選択した場合や、「商品検索 App」で表示される商品検索をした場合に、商品一覧が表示されなくなりますので、ご注意ください。
【設定できるオプション（グリッド型）】
| PCのレイアウト | PCサイトでの商品一覧パーツの全体デザインを選択します。 |
|---|---|
| スマートフォンのレイアウト | スマートフォンサイトでの商品一覧パーツの全体デザインを選択します。 |
| 商品レイアウト | 商品枠のレイアウトを選択できます。 ※PCサイト用の設定です。スマートフォンサイトにはこの設定は反映されません。 |
| タイトル | タイトルテキストを表示することができます。 |
| フレーム | 商品枠にフレームを表示するかどうか選択できます。 |
| フレームの透過 | フレームを透過表示にするかどうか選択できます。 |
| 商品の追加読み込み | 商品が多い場合の追加読み込みの方法を選択できます。 |
【設定できるオプション（リスト型）】
| PCの商品レイアウト | PCサイトでの商品枠のレイアウトを選択します。 |
|---|---|
| スマートフォンの商品レイアウト | スマートフォンサイトでの商品枠のレイアウトを選択します。 |
| タイトル | タイトルテキストを表示することができます。 |
| 商品の追加読み込み | 商品が多い場合の追加読み込みの方法を選択できます。 |
セール商品
※このパーツは「セール 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サイト用の設定です。スマートフォンサイトにはこの設定は反映されません。 |