Shopifyで休業日を設定して画面に追従する営業日カレンダーを表示できるアプリについて徹底解説｜ご利用ガイド

株式会社UnReact

2026/06/15

はじめに

Shopify（ショッピファイ）は、誰でもかんたんにオンラインストアを開設・運営できる EC プラットフォームです。そして「Shopify アプリ」は、そのストアに機能を追加して、より便利で魅力的なお店にするための拡張機能です。

「シンプル追従営業日カレンダー」は、お店の営業日・休業日をカレンダーにしてストアに表示できる Shopify アプリです。毎週の定休日や、年末年始・臨時休業などの不定休をかんたんに設定でき、お客様は「いつ発送されるのか」「いつ問い合わせできるのか」をひと目で確認できます。画面の隅に追従するバブル型と、ボタンから開くポップアップ型の2スタイルから選べ、位置・大きさ・色・アイコン・フォントまで細かくカスタマイズできます。コーディングは不要で、ワンクリックでテーマに追加できます。

料金: Basic Plan $6.99/月（１週間の無料期間あり／年払いで実質2ヶ月分無料でお得にご利用いただけます）
アプリストア: シンプル追従営業日カレンダー

シンプル追従営業日カレンダーのアプリストアヘッダー画像

「シンプル追従営業日カレンダー」でできること

このアプリを使えば、お店の営業日・休業日をひと目でわかるカレンダーとしてストアに表示できます。「この日は発送されるのかな」「いつなら問い合わせできるのかな」というお客様の不安を解消し、安心してお買い物いただける環境を整えられます。定休日や臨時休業の設定もかんたんで、表示するページやデザインも自由に選べます。

シンプル追従営業日カレンダーのアプリストアヘッダー画像

主な特徴

定休日と不定休日（臨時休業）をかんたんに設定できます。
バブル型・ポップアップ型の2スタイルから選べます。
位置・色・アイコン・フォントを自由にカスタマイズできます。
トップページや商品ページなど表示ページを選べます。
コーディング不要でワンクリックでテーマに追加できます。

追従する営業日カレンダーをストアに導入できる！

画面の隅に常に表示される追従型のカレンダーで、お客様がどのページを見ていても営業日・休業日をすぐに確認できます。スクロールしても画面に残るので、見落とされる心配がありません。

ストアの隅に追従表示された営業日カレンダー

定休日・臨時休業を管理画面から簡単設定！

毎週の定休日や、年末年始・臨時休業などの不定休を、管理画面からかんたんに設定できます。設定した休業日はカレンダー上にわかりやすく表示されるので、お客様に正確な営業情報を伝えられます。

定休日・臨時休業を設定する管理画面

2種類の追従営業日カレンダーを設定可能！

画面の隅に常に開いて表示される「バブル型」と、ボタンをクリックすると開く「ポップアップ型」の2スタイルをご用意しています。ストアの雰囲気や表示したい情報量に合わせて、お好みのスタイルを選べます。

バブル型とポップアップ型の2種類のカレンダー

営業日カレンダーのデザインは自由にカスタマイズ可能！

位置・大きさ・色・アイコン・フォントまで、カレンダーの見た目を細かく調整できます。ストアの雰囲気にぴったり合ったデザインに仕上げられるので、違和感なくお店になじみます。

自由にカスタマイズできる営業日カレンダーのデザイン

1クリックでテーマに追加！

アプリの管理画面から「テーマに追加」をクリックするだけで、カレンダーをストアに設置できます。難しいコーディングは一切不要なので、はじめての方でも安心してご利用いただけます。

1クリックでテーマに追加する操作画面

シンプル追従営業日カレンダーのインストール

まずはアプリをストアにインストールしましょう。

アプリストア: シンプル追従営業日カレンダー
料金: Basic Plan $6.99/月（１週間の無料期間あり／年払いで実質2ヶ月分無料でお得にご利用いただけます）

インストール手順は以下の通りです。

Shopify 管理画面の左下にある「設定」をクリックします。

Shopify 管理画面の左下にある「設定」をクリック

「アプリと販売チャネル」をクリックし、「Shopify App Store」へ移動します。

「アプリと販売チャネル」から Shopify App Store へ移動

検索窓にアプリ名「シンプル追従営業日カレンダー」を入力し、表示されたアプリをクリックします。

検索窓にアプリ名を入力して表示されたアプリをクリック

アプリ詳細画面で「インストール」をクリックします。

権限の確認画面が表示されるので内容を確認し、「インストール」を完了します。

権限の確認画面で「インストール」を完了

シンプル追従営業日カレンダーをテーマに追加

インストールが終わったら、カレンダーをストアに表示するためにアプリブロックをテーマに追加します。「自動で追加する方法」と「手動で追加する方法」の2通りがあります。

自動でアプリをテーマに追加（1クリック追加）

かんたんに設置したい場合は、こちらの方法がおすすめです。

アプリの管理画面を開きます。

アプリの管理画面

「テーマを選択」で追加したいテーマを選び、「テーマに追加」をクリックします。

テーマを選択して「テーマに追加」をクリック

テーマエディタが開いたら、表示位置や設定を確認して「保存する」をクリックします。

テーマエディタで設定を確認して「保存する」をクリック

手動でアプリをテーマに追加

自動追加がうまくいかない場合は以下の手順で手動追加してください。

アプリ管理画面を開いてください。
「テーマを選択」でアプリを手動追加したいテーマを選択し、「テーマをプレビュー」ボタンをクリックします。

テーマを選択して「テーマをプレビュー」をクリック

テーマエディタが開くので、サイドバーの埋め込みアプリアイコンをクリックします。

テーマエディタのサイドバーで埋め込みアプリアイコンをクリック

埋め込みアプリが一覧表示されるので、「シンプル追従営業日カレンダー｜お手軽追従休業日設定」を有効化してください。

埋め込みアプリ一覧でシンプル追従営業日カレンダーを有効化

アプリを有効化できたら、「保存する」ボタンをクリックしてください。

アプリ有効化後に「保存する」をクリック

以上で、手動での有効化は完了です。

休業日の設定

アプリブロックの追加ができたら、休業日の設定を行なっていきましょう。
休業日は、定休日と不定休日を設定できます。

定休日の設定

まず、定休日を設定していきましょう。
定休日の設定では特定の曜日を指定することで、毎週の決まった休業日を指定することができます。

アプリ管理画面の「休業日の設定」の項目から、曜日を指定して「定休日を保存」をクリックしてください。

曜日を指定して「定休日を保存」をクリック

曜日を指定して「定休日を保存」をクリックする管理画面

これで定休日の設定が完了しました。

不定休日の設定

次に、不定休日を設定しましょう。
不定休日の設定では、特定の日にちや日にちの範囲を指定することで定休日以外の休業日を指定できます。

特定の日にちを指定する
特定の日にちを指定する場合は、「不定休日の設定」のカレンダーで1箇所のみを指定した状態で「不定休日を追加」をクリックします。

カレンダーで1箇所を指定して「不定休日を追加」をクリック

すると、以下のように選択した日にちが休業日として追加されます。

選択した日にちが休業日として追加された状態

日にちの範囲を指定する

日にちの範囲を指定する場合は、「不定休日の設定」のカレンダーで開始日と終了日を指定した状態で「不定休日を追加」をクリックします。

カレンダーで開始日と終了日を指定して不定休日を追加

すると、以下のように選択した日にちの範囲が休業日として追加されます。

選択した日にちの範囲が休業日として追加された状態

不定休日の削除

不定休日を削除する場合、「不定休日の一覧」の右側にあるゴミ箱アイコンをクリックすることで削除できます。

不定休日の一覧でゴミ箱アイコンをクリックして削除

バブル型カレンダーのカスタマイズ

画面の隅に常に開いた状態で表示される「バブル型」カレンダーの設定項目です。テーマエディタの設定パネルから、見た目や表示ページを自由に調整できます。

バブル設定

カレンダーアイコン（バブル）の位置や大きさ、色などを設定します。

バブルの位置: バブルを表示する画面の角を選びます。「右下」「左下」「右上」「左上」から選べます。よく見られる右下がおすすめです。
横方向の余白: 画面の左右の端からどれくらい離して表示するかを調整します。
縦方向の余白: 画面の上下の端からどれくらい離して表示するかを調整します。
バブルの大きさ: バブルアイコンのサイズを調整します。目立たせたい場合は大きめがおすすめです。
アイコンの種類: バブルに表示するアイコンを「カレンダー」「時計」「インフォ」から選べます。
アイコンの大きさ: アイコンのサイズを調整します。
バブル背景色: バブルの背景色を設定します。ストアの雰囲気に合わせて選びましょう。
アイコンの色: アイコンの色を設定します。背景色とのコントラストをつけると見やすくなります。
枠線の太さ: バブルの枠線の太さを設定します。枠線が不要な場合は 0px のままにします。
枠線の色: バブルの枠線の色を設定します。

展開時設定

バブルをクリックして開いたときのカレンダーの表示を設定します。

展開時の幅: 開いたカレンダーの横幅を調整します。情報を見やすく表示したい場合は広めがおすすめです。

バブル型カレンダーの展開時設定画面

カレンダー色設定

カレンダー部分の配色を設定します。

曜日ヘッダー背景色: 曜日（日〜土）を表示するヘッダー部分の背景色を設定します。
日付セル枠線の色: 日付のマス目を区切る枠線の色を設定します。
本日の枠線の色: 「今日」の日付を囲む枠線の色を設定します。目立つ色にすると現在地がわかりやすくなります。
休日背景色: 休業日として設定した日付の背景色を設定します。営業日との違いがひと目でわかる色にするのがおすすめです。

バブル型カレンダーのカレンダー色設定画面

テキスト・フォント設定

見出しや日付などの文字の大きさ・色・言語を設定します。

見出しの文字: カレンダー上部に表示する見出しのテキストを入力します（初期値: 営業日カレンダー）。
見出しのフォントサイズ: 見出しの文字の大きさを調整します。
月タイトルのフォントサイズ: 「〇月」などの月タイトルの文字の大きさを調整します。
曜日のフォントサイズ: 曜日表示の文字の大きさを調整します。
日付のフォントサイズ: 日付の数字の大きさを調整します。
文字の色: カレンダー全体の文字色を設定します。
休業日凡例のテキスト: 休業日を説明する凡例のテキストを入力します（初期値: 休業日）。
カレンダーの言語: カレンダーに表示する曜日・月名の言語を選びます。日本語・英語をはじめ19言語に対応しています。海外のお客様が多いストアでは、お客様に合わせた言語を選ぶと親切です。

バブル型カレンダーのテキスト・フォント設定画面

その他の設定

月移動ボタンを表示: 前月・翌月へ移動するボタンの表示・非表示を切り替えます。お客様が先の予定まで確認できるようにしたい場合はオンがおすすめです。

バブル型カレンダーの月移動ボタン表示設定

表示ページ設定

カレンダーを表示するページを選びます。それぞれオン・オフで切り替えられます。

トップページに表示
コレクションページに表示
商品ページに表示
カートページに表示
固定ページに表示
ブログページに表示
記事ページに表示

すべてのページに常時表示することも、特定のページだけに絞ることもできます。お店の運用に合わせて調整しましょう。

バブル型カレンダーの表示ページ設定画面

追加のCSS

追加のCSS: より細かくデザインを調整したい場合に、独自の CSS を記述できます。ブラウザの検証機能でカスタマイズしたい要素のクラス名を確認し、CSS を上書きしてください。

バブル型カレンダーの追加のCSS設定

ポップアップ型カレンダーのカスタマイズ

ボタンをクリックすると開く「ポップアップ型」カレンダーの設定項目です。普段はコンパクトなボタンだけを表示し、必要なときにカレンダーを大きく見せられるのが特徴です。

ボタン設定

カレンダーを開くためのボタンの位置・大きさ・色などを設定します。

ボタンの位置: ボタンを表示する画面の角を選びます。「右下」「左下」「右上」「左上」から選べます。
横方向の余白: 画面の左右の端からの距離を調整します。
縦方向の余白: 画面の上下の端からの距離を調整します。
アイコンの種類: ボタンに表示するアイコンを「カレンダー」「時計」「インフォ」から選べます。
アイコンの大きさ: アイコンのサイズを調整します。
テキストを表示: ボタンにテキストを表示するかどうかを切り替えます。アイコンだけでなく文言も添えたい場合はオンにします。
ボタンのテキスト: ボタンに表示する文言を入力します（初期値: 営業日）。
文字の大きさ: ボタンテキストの文字の大きさを調整します。
ボタンの余白: ボタン内側の余白を調整します。大きくするとボタンがゆったりした印象になります。
ボタン背景色: ボタンの背景色を設定します。
ボタン文字色: ボタンの文字・アイコンの色を設定します。
枠線の太さ: ボタンの枠線の太さを設定します。
枠線の色: ボタンの枠線の色を設定します。
枠線の丸み: ボタンの角の丸みを調整します。値を大きくすると丸いボタンになります。

ポップアップ型カレンダーのボタン設定画面

ポップアップ設定

ボタンをクリックして開くポップアップ本体の表示を設定します。

ポップアップの余白: ポップアップ内側の余白を調整します。
ポップアップの角丸: ポップアップの角の丸みを調整します。
日付セルの大きさ: カレンダーの日付マスの大きさを調整します。大きくすると見やすく、小さくするとコンパクトになります。

ポップアップ型カレンダーのポップアップ設定画面

カレンダー色設定

カレンダー部分の配色を設定します。

カレンダー背景色: カレンダー全体の背景色を設定します。
曜日ヘッダー背景色: 曜日を表示するヘッダー部分の背景色を設定します。
日付セル枠線の色: 日付のマス目を区切る枠線の色を設定します。
本日の枠線の色: 「今日」の日付を囲む枠線の色を設定します。
休日背景色: 休業日として設定した日付の背景色を設定します。

ポップアップ型カレンダーのカレンダー色設定画面

テキスト・フォント設定

見出しや日付などの文字の大きさ・色・表示スタイル・言語を設定します。PC（パソコン）とスマホで別々に文字サイズを設定できるのが特徴です。

大見出しの文字: ポップアップ上部に表示する大見出しのテキストを入力します（初期値: 営業日カレンダー）。
大見出し(PC時)のフォントサイズ: パソコン表示時の大見出しの大きさを調整します。
大見出し(スマホ時)のフォントサイズ: スマホ表示時の大見出しの大きさを調整します。
月タイトル(PC時)のフォントサイズ: パソコン表示時の月タイトルの大きさを調整します。
月タイトル(スマホ時)のフォントサイズ: スマホ表示時の月タイトルの大きさを調整します。
日付(PC時)のフォントサイズ: パソコン表示時の日付の大きさを調整します。
日付(スマホ時)のフォントサイズ: スマホ表示時の日付の大きさを調整します。
見出し・月タイトル・休業日凡例の文字の色: これらの文字色をまとめて設定します。
日付の文字の色: 日付の数字の色を設定します。
曜日テキストの色: 曜日表示の文字色を設定します。
休業日凡例のテキスト: 休業日を説明する凡例のテキストを入力します（初期値: 休業日）。
カレンダー表示スタイル: カレンダーを「単月」で表示するか「二ヶ月」分まとめて表示するかを選べます。先の予定まで見せたい場合は「二ヶ月」がおすすめです。
カレンダーの言語: カレンダーに表示する曜日・月名の言語を選びます。日本語・英語をはじめ19言語に対応しています。