かわいいに出会える雑貨店「miim」という架空のショップをコンセプトにデザインを起こしたファンシーな雰囲気のテーマです。
レイアウトは癖がなくシンプル。
全体的に白ベースのデザインですが背景色や画像、ポイントでの色使いが変更できるため、販売する商品の雰囲気に合わせやすいです。
特に女性向けアクセサリーや子供向けの雑貨、ベビー用品、ペット用品など、「かわいい」商品にすっと馴染むデザインになっていると思います。
もちろん幅広いカスタマイズが可能なため、上記に限らずクールな印象にもできます。
設定項目が充実しているのでどんな商品の販売にも対応できます。
ぜひご利用ください！
=======================================
詳しい使い方はこちら
https://sharesl.net/base/miim/
デモサイトはこちら
https://sharesl.net/base/miim/demo/
※デモサイトは見た目の確認用です。
実際にBASEショップで作成したものではないため、機能や仕様が異なります。対応しているBASE Appsなども含めて機能や仕様の確認が必要な場合はプレビュー機能をご利用ください。
=======================================
■ 特徴
・シンプルで癖のないレイアウト
・バナー画像やキャンペーンバナー、フリースペースなど任意のコンテンツを追加できる箇所が豊富
・フォントや背景色、ボタンの色などを簡単に一括で変更可能
・ON/OFFの簡単操作で各エリアを表示・非表示
・複数デバイスに対応するレスポンシブデザイン
-------------------------------------
■ カスタマイズ
・テーマカラー変更
色をすることで、サイトの印象を変えることができます。
背景色やロゴの色、以外にこのテーマでは以下の部分の色を変更できます。
- へッダー背景色
- へッダー文字色
へッダーのカラー調整ができます。
- テキストカラー
- リンクカラー
背景の上に置かれるテキストの文字色を設定できます。
※枠付きコンテンツの文字色は別項目で設定できます。
- コンテンツ枠 背景色
- コンテンツ枠 文字色
- コンテンツ枠 リンクカラー
枠付きコンテンツのカラー調整ができます。
- ポイントカラー
ヘッダーカテゴリーの背景色、FAQのアイコンの背景色、カテゴリー一覧ページの子カテゴリ背景色など、サイトでポイントとして使われている色を一括で変更できます。
- ポイントテキストカラー
上記「ポイントカラー」で変更される部分のテキストカラーを変更できます。視認性が悪くなった場合に調整用としてお使いください。
- ボタンカラー
商品一覧下の「もっとみる」ボタンや、ブログ下のページネーション、お問い合わせフォームの確認・送信ボタンなど、ボタンの背景色を一括で変更できます。
- ボタンテキストカラー
上記「ボタンカラー」を変更して文字の視認性が悪くなった場合に調整用としてお使いください。
- 商品：価格テキストカラー：定価
- 商品：価格テキストカラー：セール
セールAppを使用したセール時の価格の文字色と、通常価格の文字色を調整できます。
- 商品：セールタグカラー
- 商品：セールタグテキストカラー
セールAppを使用した際に表示される割引率のタグの背景色と文字色を調整できます。
- 商品詳細：購入ボタン 背景色
- 商品詳細：購入ボタン 文字色
商品詳細ページの購入ボタン（カートに入れる等）の背景色・文字色を変更できます。
-------------------------------------
・フォント
文章全体はデフォルトはゴシック体ですが、明朝体など7種類の和文フォントに変更できます。
明朝体を選ぶと高級感が、丸ゴシックを選ぶと温かみが出ます。 サイトの雰囲気に合わせて変えてみてください。スマホ・PCのメニュー、下層ページのサブタイトルの見出しも個別に設定可能
です。
・ヘッダー
レイアウトの変更、ナビゲーションの追従の可否、スマホメニューの色設定を変更できます。
・ロゴ
テキストロゴの場合はフォントを変更できます。
欧文フォント11種類、和文フォント7種類の中から選べます。
ロゴ画像の場合はサイズの微調整が可能です。
※サイトのデザイン上、極端な縦長・横長のロゴは縮小表示される可能性がありますのでご了承ください。
・キャンペーンバナー
ヘッダー上部にキャンペーンやクーポンコードを掲載できるバナーを設置することができます。
バナーとして画像の設置、もしくは任意のテキストを追加してフォントや文字色・背景色を変更することができます。
-------------------------------------
・TOPページ
- スライド
TOPページのメインビジュアルにスライドを4枚まで追加できます。
スマホ用とPC用でそれぞれ違う画像を設定できます。
PCは横長、スマホは縦長の画像に切り替えることでよりデバイスに合ったデザインにできます。
非表示にすることも可能です。
※画像の推奨サイズ
PC : 横1970 × 縦1230（px）
スマホ : 横750 × 縦800（px）
- バナー
TOPページにバナー画像を3つまで表示できます。
※画像の推奨サイズ
横750 × 縦270（px）です。
※デザイン上、角丸になるように設定しています。ご注意ください。
- 商品一覧上 フリービジュアル
TOPページの商品一覧上に任意の画像を設置できます。商品のアピールやデザインとしてページのアクセントになります。
※画像の推奨サイズ
PC : 横2880 × 縦1020（px）
スマホ : 横750 × 縦600（px）
※小さい画像を設定した場合でも画面の幅いっぱいに広がるようになっていますのでご注意ください。
- 商品一覧
TOPページの商品一覧の表示・非表示を切り替えたりできます。
└「画像を幅いっぱいに合わせる」
ONにするとすべての枠内の商品画像が枠いっぱいに広がり画像の大きさを均一にします。
OFFにすると枠内に収まるようになりますが、画像の大きさは不均一になります。
※ONにすると、画像が小さい場合に引き延ばされます。
※画像の推奨サイズ
通常：横750×縦540（px）
Retinaディスプレイ対応：縦1500×縦1080（px）
- 商品一覧下 バナー
商品一覧、もっとみるボタンの下にバナーを設置できます。送料についてなどを画像に掲載する、送料や注意事項などを書いたブログへのリンクとして設置するなど、何かと工夫してお使いいただけると良いかと思います。
- ショップの特徴
ショップの簡単な特徴を掲載できるエリアです。(アイコン・特徴・概要)というグループを1つとして、最大3つまで追加できます。TOPページにショップのことが簡単にわかるコンテンツがあると、お客様もどんなお店かわかりやすいと思いますのでぜひご利用ください。
※ アイコン画像の推奨サイズは240×240（px）です。
- ブログ表示（BlogApp）
TOPページにブログ一覧（BlogAppの記事）を表示できます。
表示件数は最大2、4、6件から選択できます。
└「画像を幅いっぱいに合わせる」
ONにするとすべての枠内の商品画像が枠いっぱいに広がり画像の大きさを均一にします。
OFFにすると枠内に収まるようになりますが、画像の大きさは不均一になります。
※ONにすると、画像が小さい場合に引き延ばされます。
※画像の推奨サイズ
通常：横1200×縦720（px）
ブログのサムネイルはBlog Appで投稿する際に埋め込んだ画像の中で1番上にある画像が設定されます。
スタンプや絵文字などの画像も含まれるため、サムネイルを調整したい場合は文章を書き始める前に画像を最上部に埋め込んでおくことをオススメします。
- 順序変更
TOPページの「バナー」「商品一覧」「ショップの特徴」「ブログ」の4つのコンテンツの順番を変更できます。それぞれ1〜4の数字を設定することができます。1が最も上、4が最も下になります。
-------------------------------------
・Aboutページ
コンセプトやショップ情報やFAQなど、お店についてのコンテンツをより詳しく掲載できます。
- メイン画像
ABOUTページ画面上部に画像を設置できます。
※画像の推奨サイズ
横950×縦600（px）
- コンセプト
Aboutページにコンセプトとしてテキストコンテンツを追加できます。
- ショップ情報
お店の住所や営業時間といった詳細情報を表示できるエリアの表示・非表示を切り替えます。
- FAQ
FAQコンテンツをABOUTページ下部に最大10件追加できます。
- コンテンツ
画像、タイトル、説明をセットとしたコンテンツをさらに追加できます。
-------------------------------------
・商品詳細ページ
任意のテキストを置けるフリースペースの利用、関連商品の表示設定ができます。
-------------------------------------
・その他の機能
- コンテンツに影をつける
ボタンや商品一覧についている影の表示・非表示を切り替えられます。
- フッター
フッターのSNSアイコンを白に変更、表示・非表示、
ロゴの表示・非表示を切り替えられます。
- 「この記事を固定する」機能対応
Blog Appを使用して記事を投稿する際、「この記事を固定にする」にチェックを入れると各記事リストの先頭に固定記事が表示され、TOPページのメイン画像下にテキストリンクで記事が固定表示されます。メイン画像がない場合は最上部になります。
- 独自のスタイルシートを追加【上級者向け機能】
独自のスタイルシートでCSSを上書きできます。独自拡張になりますので上級者向けです。意味がわかる方のみご使用ください。テーマにもともと入っているCSSファイルの詳細についての質問は、お問い合わせいただいても細かくお答えできかねます。上書きする場合は確かな知識をお持ちの方が自己責任でお願いいたします。
※画像のサイズについてのご注意
アップロードできる画像の容量は上限1MBとなっています。
推奨サイズで作成した画像の容量が1MBより大きくなってしまう場合は画像圧縮ツールなどを活用することで容量を軽くできます。
-------------------------------------
■モバイル設定について
レスポンシブコーディングしていますので、スマホ・タブレット・PCでご覧いただけます。デザイン編集からデフォルトのモバイルテーマを使用をオフにしてお使いください。
-------------------------------------
■対応Appsについて
・BASEロゴ非表示App
・ラベルApp
・BlogApp
・カテゴリ管理App
・商品検索App
・レビューApp
・セールApp
・ショップコインApp
・販売期間設定App
・予約販売App
・デジタルコンテンツApp
・メッセージApp
・送料詳細設定App
・商品説明カスタムApp
・抽選販売App
・テイクアウトApp
・商品オプションApp
・コミュニティApp
・定期便App
・お知らせバナーApp
・再入荷自動通知App
・年齢制限App
・メールマガジンApp
・メンバーシップApp
※英語・外貨対応Appは対応していません。
※ショップの表示に影響のあるAppsの一覧です。その他のAppsは全てご利用いただけます。
---------------------------------------
■更新情報
・2024/11 Pay ID あと払いウィジェットに対応しました。
・2023/06 メンバーシップAppに対応しました。それに伴い、PC表示時の商品検索Appの表示を変更しました。
・2022/04 メールマガジンAppに対応しました。
・2021/12 お知らせバナーAppに対応しました。
・2021/11 年齢制限Appに対応しました。
・2021/09 「Youtube」「note」「Tik Tok」をSNSアイコンリンク一覧に追加しました。
・2020/11 コミュニティAppに対応しました。
・2020/06 テイクアウトAppに対応しました。
=======================================
もっと詳しいテーマの詳細はこちら
https://sharesl.net/base/miim/
テーマの関するご質問・ご要望はこちらから
https://sharesl.net/contact/
よくある質問はこちら
https://notes.sharesl.net/articles/1952/
=======================================
