こんにちは、MakeShopのあらいです。
いつもMakeShopをご利用いただきありがとうございます。

今回はショップにカレンダーを表示する方法をご紹介します!

こんなお悩みありませんか?

・自分のショップにカレンダーを表示したい!
・カレンダーに定休日や祝日を設定して色をつけたいけどどうやるの?

[難易度 ★☆☆ ]
営業日や休業日をお客様に伝えよう!
カレンダーを表示する方法

まずは、基本的な表示方法からみていきましょう!

PCの設定方法

(1)表示設定する!

【ショップ作成】>【オプション機能の設定】>【カレンダーの設定】

からカレンダーの表示を設定しましょう。

「営業日表示カレンダー」を「使用する」を選択します。
「カレンダーの表示位置」は「左側(左メニュー)」または「右側(中央画面)」から選択します。

カレンダーの設定

色の設定方法については、オンラインマニュアル「カレンダーの設定」を参考にしてください。

(2)変数タグを追加!

【独自デザイン(PC)】>【トップページ編集】>【左メニュー管理】

 または

【独自デザイン(PC)】>【トップページ編集】>【中央画面管理】

 のエディタエリアへ下記の変数タグをdivで囲んで追記します。

(3)完了!

カレンダーの設定

→かんたんですね。

スマホの設定方法

現時点ではスマートフォンは未対応です。

カレンダーに定休日を設定!

次は、運用に合わせて定休日を設定してみましょう!
今回は例として「祝日」を「休業日」として設定してみます。

設定方法

(1)日付の設定をしましょう!

【ショップ作成】>【オプション機能の設定】>【カレンダーの設定】

「日別内容入力」で「背景カラー」「日付選択」「カラー説明」を設定をします。

保存すると、設定した内容がカレンダーに表示されます。

カレンダーの設定

参考:オンラインマニュアル「カレンダーの設定」

↓↓反映後
カレンダーの設定

・「カラー説明」に入力した内容は、ショップに表示されるので分かりやすい内容を記載しましょう。
・祝日は自動では反映されませんので、表示したい場合は個別に設定してください。

カレンダーの表示を調整する!

カレンダーの表示を調整したい場合はCSSを追加します!

【独自デザイン(PC)】>【トップページ編集】>【共通CSS管理】

下記のスタイル指定を追記してください。

▼色を指定してカレンダーの枠線を表示したい場合

↓↓反映後

カレンダーの設定

▼カレンダーの横幅を指定したい場合

↓↓反映後
カレンダーの設定

いかがでしたでしょうか。
休みの日があるショップの場合、休業日の明記は大事ですが
カレンダーの記載があるとより分かりやすく親切ですね。

それではまた!