スマートフォン用のお店ページを作り込む⑤
－その他の設定をカスタマイズ－

○ ショッピングカートのカートページを作り込む
○ デザインをカスタマイズする

サイト内のテキストや背景色を変更する
スタイルシートを編集してデザインを変更する
フロートボタンを表示する

○ headタグを編集する

ショッピングカートのカートページを作り込む

ショッピングカートのカートページのパーツを編集していきます。必要なパーツのご案内だけご確認ください。
ここではＰＣページと連動する設定になっているパーツは、他のページでご案内するので省略します。

■「リンク（買い物を続ける）」のパーツを編集します

ショッピングカートから商品ページに戻るリンクを設置するパーツです。

リンク（買い物を続ける）の「編集」ボタンをクリックします。
編集画面が開きます。
リンクとして表示する文言を入力します。
「買い物を続ける」のままで構いませんが、「戻る」など別の呼び方で表したければ、別の名称を入力します。
「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
画面右上の「お店ページに反映する」ボタンをクリックします。

■「フリーエリア」のパーツを編集します

フリーエリアを表示するパーツです。
文章や画像を自由に記述して表示できます。

フリーエリアの「編集」ボタンをクリックします。
編集画面が開きます。
フリーエリアに入力したい文章を入力します。
入力欄上部のアイコンメニューを使えば、太字、斜体、下線、フォントサイズ変更、文字色変更などの装飾などもできます。
また、画像の挿入、顔文字などもできます。
さらに、「HTML」アイコンを押せば、入力欄が html モードに切り替わり、html ソースを入力することもできます。
「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
画面右上の「お店ページに反映する」ボタンをクリックします。

■「購入手続きボタン」のパーツを編集します

支払い方法や住所などを、入力するページへ移動するボタンを表示する
パーツです。

購入手続きボタンの「編集」ボタンをクリックします。
編集画面が開きます。
「非会員用エリア」「会員用エリア」のいずれを上に表示するかを選択します。新規顧客の注文、会員のリピート注文、いずれの利便性を重視するかを考慮して決定してください。
カート画面を開いた時、非会員用エリアをそのまま全部表示するか折りたたんで閉じておくかを選択します。
会員用エリアへの誘導を重視したい場合は「閉じて表示する」を選択します。
「会員登録して購入」に対する案内文を入力します。
非会員のお客さんが会員登録しつつ、購入するためのボタンです。そのボタンに記述される名称を入力します。
「リンクで表示する」にチェックを入れると、ボタンではなくテキストリンクにできます。会員登録などあまり気にせず注文手続きに集中して欲しいためにあまり目立たせたくない場合などに活用できます。
「会員登録しないで購入」に対する案内文を入力します。

会員登録せずに手続きするとポイントが発行されないなどの注意事項もご案内すると安心です。
非会員のお客さんが会員登録せずに、そのまま購入するためのボタンです。そのボタンに記述される名称を入力します。「リンクで表示する」にチェックを入れると、ボタンではなくテキストリンクにできます。できるだけ会員登録して欲しいため、あまり目立たせたくない場合などに活用できます。
非会員用エリア内にドメイン指定受信に関する案内文を表示できます。
なお、「__DOMAIN__」のタグは自動的にお店のドメインに変換されて表示されます。
上へ戻り、「会員用エリア」のタブをクリックして開き、同様に「会員用エリア」の設定をします。
カート画面を開いた時、会員用エリアをそのまま全部表示するか折りたたんで閉じておくかを選択します。
新規顧客向けに非会員用エリアへの誘導を重視したい場合は「閉じて表示する」を選択します。
会員にログインしていただくための案内文を入力します。
会員のお客さんにログインして購入してもらうためのボタンです。そのボタンに記述される名称を入力します。「リンクで表示する」にチェックを入れると、ボタンではなくテキストリンクにできます。会員登録が必須であると勘違いされて離脱されたくないため、あまり目立たせたくない場合などに活用できます。
「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
画面右上の「お店ページに反映する」ボタンをクリックします。

デザインをカスタマイズする

お店ページのデザインをより自由に変更できます。必要な店舗さんだけご確認ください。
ここではＰＣページと連動する設定は、他のページでご案内するので省略します。

サイト内のテキストや背景色を変更する

■カラーを指定します

「利用する」をチェックします。
変更したい項目を選び、カラーコードを入力します。
もしくは、カラーコード入力欄の左側にある、色を表示しているエリアをクリックするとカラーパレットが表示されるので、そこで色を選びます。
「プレビューに反映する」ボタンをクリックして、編集画面を閉じます。
画面右上の「お店ページに反映する」ボタンをクリックします。

スタイルシートを編集してデザインを変更する

■スタイルシートの編集画面を開きます

「スタイルシートを作成する」ボタンをクリックします。
編集画面が開きます。

■スタイルシートを編集します

編集のベースとするテーマを選び、「読み込む」ボタンをクリックします。
編集するスタイルシートを保存するために、名前をつけます。
スタイルシートを編集します。
記述方法は貴社でお調べください。
「プレビューに反映する」ボタンをクリックします。
画面右側のプレビューで変更内容が反映したことをご確認ください。
画面右上の「お店ページに反映する」ボタンをクリックします。
スタイルシートがお店ページに反映し、同時に保存されます。
「スタイルシート一覧」画面に戻ると、②で名付けたスタイルシート名が保存され、「利用中」になっています。

画面下部の「設定を保存する」をクリックすると、編集したスタイルシートをお店ページに反映せずに保存し、スタイルシート一覧画面に戻ります。