設定方法

サイトデザインや購入フローステップなどの設定ができます。
※デザイン機能についてはこちら

※設定された色が表示される前に、一瞬デフォルト色が表示されます。避けたい場合は import.css で直接色を指定してください 。

設定画面

[基本設定＞カートシステム設定] ＞「デザイン関連設定」タブ

サイトデザイン

項目内容
サイトデザイン　・設定例 レイアウト
レイアウト

サイトのレイアウトを選択してください。
初期値は２カラム（左）です。



・２カラム（左）


＜PC版＞
レフトナビ、中央カラムの2カラム構成です。
サイト幅：レスポンシブ（980px~1500px）
画像スライダー（推奨サイズ）：980×400px
※画像スライダーなど、一部要素は画面幅100%表示
＜SP版＞
1カラム構成です。
設定／設定変更する場合は、テンプレートの登録 が必須です。

・１カラム（右）


＜PC版＞
中央カラムのみの1カラム構成です。
※ヘッダー・フッター・レフトナビ設定のテンプレートの自動選択で「レフトナビを表示しない」にチェックを入れてください。ヘッダーにカテゴリーメニューの設置があります。
※レイアウトを変更した場合は、ヘッダー・フッター・レフトナビ設定から編集が可能です。
サイト幅：レスポンシブ（980px~1024px）
※画像スライダーなど一部画面幅100%
＜SP版＞
1カラム構成です。
設定／設定変更する場合は、テンプレートの登録 が必須です。


サイトカラー　・設定例 サイトカラー

※推奨ブラウザ
Google Chrome （最新版）,Microsoft Edge （最新版）,Mozilla Firefox （最新版）,Safari （最新版）
メインカラーサイト全体のメインカラーを選択してください。
メインカラー（文字）メインカラーの箇所に適用される文字色を選択してください。
ベースカラー（背景）サイト全体のベースカラーを選択してください。
ベースカラー（線）ベースカラーの箇所に適用される線の色を選択してください。
ベースカラー（文字）ベースカラーの箇所に適用される文字色を選択してください。
アクセントカラーサイト全体のアクセントカラーを選択してください。
購入フローに関わるボタンやMYページ内のボタンに適用されます。
メッセージカラー（背景）サイト全体のメッセージカラーを選択してください。
メッセージカラー（線）メッセージカラーの箇所に適用される線の色を選択してください。
メッセージカラー（文字）メッセージカラーの箇所に適用される文字色を選択してください。
フォントファミリーフォントを選択してください。
初期値は「-apple-system…」です。
  • 「-apple-system, BlinkMacSystemFont, “Helvetica Neue”, “Yu Gothic Medium”, YuGothicMedium, Verdana, Meiryo, “M+ 1p”, sans-serif」
    （例）
  • 「”ヒラギノ角ゴシック Pro”, “Hiragino Kaku Gothic Pro”, メイリオ, Meiryo, Osaka, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif」
    （例）

※IE非対応

各種カラーの選択は、カラーコードを入力、もしくはカラーピッカーより選択可能です。
 

購入フローステップ

項目 内容
PCタイプ PC版の購入フローのステップ画像を選択してください。
初期値は「標準」です。

  • 標準
  • Type-A
  • Type-R
  • Type-Y
強調カラー（背景） 購入フローステップの強調カラーを選択してください。
強調カラー（文字） 購入フローステップの強調カラーの箇所に適用される文字色を選択してください。
スマホタイプ SP版の購入フローのステップ画像を選択してください。
初期値は「標準」です。

  • 標準
  • Type-R
  • Type-Y
  • なし
    ステップ画像が非表示となります。

おすすめバリエーション

おすすめのカラーテンプレートを５種類ご用意しています。
選択すると、サイトデザインと購入フローステップが自動的に選択されます。

A

購入フローステップ [PCタイプ] Type-A

B

購入フローステップ [PCタイプ] Type-R

C

購入フローステップ [PCタイプ] 標準

D

購入フローステップ [PCタイプ] 標準

E

購入フローステップ [PCタイプ] 標準

商品画像拡大

商品詳細ページに表示される画像の拡大方法を選択してください。
※PC版のみ初期値は「facebox」です。

facebox

商品画像をクリックすると、画像登録サイズでモーダル表示されます。

raku2loupe

※PCテンプレートC,F,Gではご利用になれません。
商品画像にカーソルをのせると選択範囲が拡大されて表示されます。
※サムネイル画像数は商品画像の登録枚数と同じです。（9枚まで）
※画像推奨サイズ：1000px×1000px以上

使用しない

スライダー設定

項目 内容
使用スライダー（PC） PC版のスライダーの種類を選択してください。
jQueryプラグインが切り替わります。

  • bxSlider
  • slick

・設定例　スライダー設定
・モジュールの初期化（設定／設定変更する場合は必須）
使用スライダー（スマートフォン） SP版のスライダーの種類を選択してください。
jQueryプラグインが切り替わります。
※slickを利用する場合はスマートフォンのトップページからbxSliderの記述を削除してください。

  • bxSlider
  • slick

・設定例　スライダー設定
・モジュールの初期化（設定／設定変更する場合は必須）

顧客情報入力

項目 内容
必須表示内容 必須部分に表示される文言の設定が可能です。
未設定の場合は「※」が表示されます。
デザイン（PC） PC版の必須部分のデザインの変更が可能です。
「.required_label{}」にスタイルを指定してください。
（例）
デザイン（スマートフォン） SP版の必須部分のデザインの変更が可能です。
「.required_label{}」にスタイルを指定してください。
（例）

設定例

レイアウト
２カラム１カラム

PC






スマートフォン






※カスタムコンテンツの詳細はこちら

▲ 設定画面 レイアウトに戻る

サイトカラー

【配色例】

▲ 設定画面 サイトカラーに戻る

スライダー設定

■bxSlider（PC版）

■bxSlider（SP版）

■Slick（PC版）

■Slick（SP版）