BASE DESIGN THEME

HOW TO USE

ショップロゴの設定

STEP01

左のメニューでショップロゴを選択。ここでロゴを設定するとヘッダーとフッターに表示されます。

ショップロゴは画像とテキストのどちらかで設定が可能です。

ショップロゴは画像で、横長のロゴを推奨しております。正方形や縦長のロゴの場合は小さくなり、見えずらくなる可能性がございますので、ご注意ください。横幅は640px以上を推奨しておりますが、横に長すぎる場合は、スマートフォンなどで見えにくくなる可能性がございます。ヘッダーの縦幅は56pxが最大となります。

ショップロゴの色指定はございませんが、見えやすくするためにヘッダーとフッターの背景色を調整していただく事を推奨しております。

ナビゲーションとメッセージAppの色の設定

STEP02

左のメニューのテーマ設定を選択。メッセージAppをインストールしている方は、アイコンの色を変更できます。ここではナビゲーションの色を変更出来ません。

ナビゲーションの背景色の設定

STEP03

左のメニューのテーマ設定を選択。メニューのテキストの右にある丸枠をクリックすることで、色を変更することができます。

希望の色がない場合は「HTML カラーコード」と検索して、お好きな色をお選びください。設定には「#」を除いた英数字の部分だけを入力することで、お好みのカラーを設定できます。

ヘッダー、フッター、ナビゲーションの背景色は、すべて同じ色になります。

ナビゲーションのテキスト色の設定

STEP04

左のメニューのテーマ設定を選択。メニューのテキストの右にある丸枠をクリックすることで、色を変更することができます。

背景色に合わせて、色を調整してください。

ナビゲーションのテキスト変更

STEP05

左のメニューのテーマ設定を選択。下記の文言は、日本語でも英語でもお好きな文字に変更できます。また見出し(PRODUCTS以外)とも連携しておりますので、自動的に見出しも変更になります。

  • HOME
  • ABOUT
  • BLOG
  • CATEGORY
  • COMMUNITY
  • CONTACT

※文字数が長くなる場合、表示が崩れる場合がございますので、その際はご調整ください。

SNSアイコンに背景色(白)をつける

STEP20

左のメニューのテーマ設定を選択。フッターのSNSアイコンが、背景色の兼ね合いで見えにくくなる場合は「ON」にしてください。

背景の設定

STEP06

左のメニューの背景を選択。「カラーから選ぶ」か「パターンから選ぶ」のどちらかで設定できます。

タイトルと文章のテキスト色を設定

STEP07

左のメニューのテーマ設定を選択。メニューのテキストの右にある丸枠をクリックすることで、色を変更することができます。

背景色に合わせて、色を調整してください。

商品一覧のタイトルテキストの設定

STEP08

左のメニューのテーマ設定を選択。PRODUCTSから変更する場合は、フォームに任意のテキストを入力してください。

テキストリンク色を設定

STEP09

左のメニューのテーマ設定を選択。メニューのテキストの右にある丸枠をクリックすることで、色を変更することができます。

背景色、全体のテキスト色に合わせて、色を調整してください。

フォントの設定

STEP10

左のメニューのテーマ設定を選択。フォントは下記画像の5パターンからお選びいただけます。欧文フォント(サンセリフ、スラブセリフ、サンセリフのラウンド、セリフ)と日本語フォント(ゴシック、丸文字、明朝)の相性が良い、モダンなフォントを組み合わせております。

Google Fonts

メインビジュアルロゴの設定

STEP11

左のメニューのテーマ設定を選択。メインビジュアルにロゴを設置したい場合は設定を「ON」にしてください。ロゴの色は白を推奨しております。横幅は800px以上を推奨しております。高さの指定はございません。

メインビジュアルの設定

※エフェクトは同時に使用することはできません。

◉グリッジ

STEP12

左のメニューのテーマ設定を選択。メインビジュアルエフェクト(グリッチ)を「ON」に設定します。他のエフェクトは「OFF」にしてください。

次にメインビジュアル画像(縦)01、メインビジュアル画像(横)01に画像をアップロードします。

  • 縦用画像の推奨サイズ[856px × 1852px
  • 横用画像の推奨サイズ[1920px × 1080px

◉カラーグラデーション

STEP12

左のメニューのテーマ設定を選択。メインビジュアルエフェクト(カラーグラデーション)を「ON」に設定します。他のエフェクトは「OFF」にしてください。

次にメインビジュアル画像(縦)01、メインビジュアル画像(横)01に画像をアップロードします。

  • 縦用画像の推奨サイズ[856px × 1852px
  • 横用画像の推奨サイズ[1920px × 1080px

◉フェード

STEP12 STEP12

左のメニューのテーマ設定を選択。メインビジュアルエフェクト(フェード)を「ON」に設定します。他のエフェクトは「OFF」にしてください。

次にメインビジュアル画像(縦)01~03、メインビジュアル画像(横)01~03に画像をアップロードします。

※メインビジュアル画像が3種、計6枚無い場合は正しい挙動になりませんのでご注意ください。

  • 縦用画像の推奨サイズ[856px × 1852px
  • 横用画像の推奨サイズ[1920px × 1080px

◉エフェクトなし

STEP12

左のメニューのテーマ設定を選択。メインビジュアルエフェクト(エフェクトなし)を「ON」に設定します。他のエフェクトは「OFF」にしてください。

次にメインビジュアル画像(縦)01、メインビジュアル画像(横)01に画像をアップロードします。

  • 縦用画像の推奨サイズ[856px × 1852px
  • 横用画像の推奨サイズ[1920px × 1080px

◉画像の圧縮

※表示速度を上げるために、背景画像は TinyJPG のようなサイトで、画像を圧縮することを推奨しております。

ボタンの設定

STEP12

左のメニューのテーマ設定を選択。ボタンの背景色、テキスト色、文言を変更できます。

商品ステータスの色の設定

STEP14

SALE、SOLD OUT、会員限定商品、抽選販売、COMING SOON、テイクアウトなどの商品ステータスの色

左のメニューのテーマ設定を選択。メニューのテキストの右にある丸枠をクリックすることで、色を変更することができます。

背景色に合わせ、本文テキストより目立つ色で設定することを推奨します。

トップページのABOUTエリアの設定

STEP15

左のメニューのテーマ設定を選択。表示・非表示を選択できます。フリーテキストエリアを設けておりますので、ショップの簡単な説明などにご利用ください。

入力範囲が小さい場合は入力範囲の右下の部分にマウスを持っていくとカーソルが矢印に変わりますので、縦方向に引き延ばしてください。

ABOUTページの設定

STEP16

左のメニューのテーマ設定を選択。フリーテキストエリアを設けておりますので、ショップの説明などにご利用ください。BASEの仕様上1000文字が最大です。

ABOUTページのACCESSの設定

STEP17

左のメニューのテーマ設定を選択。ACCESS表示・非表示を選択できます。リアル店舗をお持ちの方向けに設置しておりますので、必要のない方は「OFF」にしてください。

Google Map

Google Mapの設定は、「① Google Mapを開く」→「② 住所を入力」→「③ 共有」→「④地図を埋め込む」→「⑤ HTMLをコピー」→「⑥ 入力欄にペースト」で完了です。

商品詳細ページの関連商品の設定

STEP18

左のメニューのテーマ設定を選択。関連商品の表示・非表示を選択できます。

スマートフォン用デフォルトテーマ設定

STEP19

左のメニューのテーマ設定を選択。「スマートフォン用デフォルトテーマ設定」は必ず「OFF」にしてください。「ON」にすると「ARTISTIC」のデザインテーマが反映されませんのでご注意ください。