ZAKKA STORE 設定マニュアル

テーマを適用したら最初に確認すること

ZAKKA STOREを適用したら、BASE管理画面の「デザイン編集」からテーマの設定を行います。

最初に、以下の項目を確認しておくとスムーズです。

• SHOP NAME／ロゴ
• 背景色・背景画像
• メインフォント
• SHOP NAME・見出しフォント
• メインカラー
• テキストカラー
• 商品価格表示
• 商品ステータスラベル
• 購入ボタンカラー
• メインビジュアル
• News & Topics
• Pick up
• 外部WebサイトURL
• SNSリンク
• Shopping Guide
• 共通バナー

設定変更後は、PCだけでなくスマートフォンでの表示もご確認ください。

---

SHOP NAME・ロゴの設定

---

背景の設定

---

フォントの設定

ZAKKA STOREでは、本文用フォントとSHOP NAME・見出し用フォントをそれぞれ設定できます。

メインフォント

商品名、本文、説明文など、ショップ内の基本テキストに使用されます。

SHOP NAME・見出しフォント

SHOP NAMEや英数字の見出し部分などに使用されます。

フォントによってショップ全体の印象が大きく変わります。

雑貨店らしくやわらかい印象にしたい場合、シンプルなゴシック系、ナチュラルなセリフ系など、ショップの雰囲気に合わせてお選びください。

※端末やOSによって、実際に表示されるフォントが異なる場合があります。

---

カラーの設定

---

メニューの設定

メインビジュアルの設定

---

ABOUT・News & Topicsの設定

メインビジュアルの下には、ショップ紹介とお知らせを掲載できます。

ABOUT

BASEのショップ設定に登録されているショップ情報を表示します。

ショップのコンセプトや取扱商品などを簡潔に記載すると、初めて訪れたお客様にもショップの特徴が伝わりやすくなります。

News & Topics

トップページに簡単なお知らせを掲載できます。

最大3件まで、

• 日付
• テキスト
• リンク

を設定できます。

例えば、

• 新商品入荷のお知らせ
• SALEのお知らせ
• 配送スケジュール
• 長期休業のお知らせ
• Blog記事への誘導

などに利用できます。

必要ない場合は非表示にできます。

Pick upの設定

トップページに「Pick up」エリアを表示できます。

おすすめ商品やキャンペーン、特集ページなどへの誘導に利用できます。

設定できる内容は、

• 画像
• 説明文
• リンク

です。

例えば、

• 今月のおすすめ商品
• SALE
• 新商品特集
• ギフト特集
• Blog記事
• 外部サイト

などへの誘導にご利用ください。

必要ない場合はOFFにできます。

商品一覧について

商品はBASEに登録した商品情報をもとに一覧表示されます。

商品カードには、

• 商品画像
• 商品名
• 価格
• 各種商品ステータス

などが表示されます。

商品ラベルAppを利用している場合は、商品画像上に設定したラベルが表示されます。

商品ステータス

利用しているAppsや商品の設定に応じて、商品一覧・商品詳細ページに各種ステータスが表示されます。

例：

• SOLD OUT
• COMING SOON
• 販売期間設定
• 予約販売
• 抽選販売
• テイクアウト
• 会員限定商品

表示内容は、商品設定やBASE Appsの利用状況によって異なります。

カテゴリー表示について

カテゴリ管理Appを利用すると、商品をカテゴリーごとに分類できます。

ZAKKA STOREでは、カテゴリ情報をドロワーメニューやフッターなどに表示します。

カテゴリー設定や階層構造については、BASE側のカテゴリ管理Appの仕様に従います。

商品数が多いショップでは、カテゴリーを整理しておくことで、お客様が商品を探しやすくなります。

カテゴリー名が長すぎるとメニュー内で複数行になる場合がありますので、できるだけ簡潔な名称をおすすめします。

フッターについて

ページ下部には、ショップ内の基本的なナビゲーションを表示します。

ショップの設定や利用している機能に応じて、

• SHOP NAME／ロゴ
• 商品カテゴリー
• About
• プライバシーポリシー
• 特定商取引法に基づく表記
• 会員規約
• SNSリンク
• コピーライト

などが表示されます。

ページを見終わった後でも、別カテゴリーや基本情報へ移動しやすい構成になっています。

商品詳細ページについて

購入ボタンの設定

商品詳細ページの購入ボタンは、テーマ設定からカラーを変更できます。

ショップのメインカラーやブランドイメージに合わせて設定してください。

購入ボタンは特に重要な操作部分ですので、背景とのコントラストを十分に確保することをおすすめします。

Shopping Guideの設定

ZAKKA STOREでは、商品詳細ページとABOUTページに共通して表示できる「Shopping Guide」エリアを用意しています。

すべての商品に共通して伝えたい情報の掲載に適しています。

例えば、

• 配送について
• 送料について
• 返品・交換について
• ギフト包装
• 商品取扱上の注意
• 営業日
• 発送までの日数

などにご利用ください。

Shopping GuideはHTMLを使用して記述できます。

見出しや段落を使って内容を整理すると、読みやすくなります。

---

記述例

<h2>Shipping Guide</h2>

<h3>発送について</h3>
<p>
ご注文確認後、通常○営業日以内に発送いたします。
</p>

<h3>返品・交換について</h3>
<p>
商品到着後○日以内にご連絡ください。
</p>

HTMLを使用する場合は、タグの閉じ忘れなどにご注意ください。

---

共通バナーの設定

商品詳細ページに共通して表示する画像バナーを設定できます。

最大3枚まで登録でき、それぞれリンク先を指定できます。

例えば、

• SALE情報
• 送料無料キャンペーン
• ギフト案内
• 店舗案内
• Blog記事
• 特集ページ
• 外部Webサイト

などへの誘導に利用できます。

共通バナーの一部はABOUTページにも表示されます。

バナー画像を複数使用する場合は、デザインやサイズを揃えておくとページ全体がまとまりやすくなります。

---

ABOUTページについて

ABOUTページには、BASEのショップ設定に登録されているショップ情報が表示されます。

また、ZAKKA STORE独自設定のShopping Guideや共通バナーも表示できます。

ショップのコンセプトだけでなく、

• お買い物方法
• 配送について
• 注意事項
• ブランドサイトへの誘導

などをまとめて掲載するページとしても利用できます。

---

Blogについて

Blog Appを利用すると、ショップ内にBlog一覧・Blog詳細ページが表示されます。

新商品、キャンペーン、イベント、営業案内など、News & Topicsだけでは伝えきれない情報の掲載におすすめです。

Blog一覧では複数の記事をカード形式で表示します。

背景画像を設定しているショップでも記事を読みやすくするため、Blog本文エリアは読みやすさを考慮した表示になっています。

---

各種BASE Appsについて

ZAKKA STOREは、各種BASE Appsを利用したショップ表示に対応しています。

利用できるAppsやBASE側の仕様は随時変更されるため、最新の対応状況についてはBASE Design MarketのZAKKA STORE販売ページをご確認ください。

ZAKKA STORE販売ページ
https://design.thebase.com/detail/28

現在の販売ページでは、カテゴリ管理、年齢制限、Blog、ラベル、商品検索、定期便、レビュー、販売期間設定、予約販売、抽選販売、商品説明カスタム、商品オプション、コミュニティ、メンバーシップなどが対応Appsとして掲載されています。

---

英語・外貨対応について

英語・外貨対応Appを利用した場合でも、ZAKKA STORE独自の入力項目に日本語で登録したテキストについては、日本語のまま表示される箇所があります。

あらかじめご了承ください。

---

スマートフォン表示について

ZAKKA STOREはレスポンシブデザインに対応しています。

PC、タブレット、スマートフォンの画面幅に応じてレイアウトが変化します。

スマートフォンでは主に1カラム表示となり、商品一覧、商品詳細、メニューなどがスマートフォン向けのレイアウトに切り替わります。

BASEのデザイン編集画面にある「デフォルトのモバイルテーマを使用」がONになっている場合、スマートフォンでBASE標準のモバイルテーマが表示されます。

ZAKKA STOREをスマートフォンでも表示する場合は、「デフォルトのモバイルテーマを使用」をOFFにしてください。BASE公式開発ドキュメントでも、オリジナルテーマをスマートフォンで表示する場合はこの設定をOFFにするよう案内されています。

設定後は、実際のスマートフォンでも表示をご確認ください。

---

商品画像について

商品一覧をきれいに見せるため、商品画像はできるだけ同じ縦横比で登録することをおすすめします。

画像サイズや縦横比が大きく異なる場合、商品ごとに見え方に差が出ます。

特に、

• 商品一覧
• 関連商品
• 商品詳細のサムネイル

では、同じ比率の画像を使用するとまとまりのあるショップになります。

---

よくあるご質問

Q. スマートフォンでZAKKA STOREのデザインが表示されません

BASEのデザイン編集で「デフォルトのモバイルテーマを使用」がONになっていないかご確認ください。

ZAKKA STOREをスマートフォンでも表示する場合はOFFに設定してください。

---

Q. メニューにカテゴリーが表示されません

カテゴリ管理Appの設定をご確認ください。

カテゴリーの表示内容は、BASE側のカテゴリー設定や階層構造によって変わります。

---

Q. SEARCHやBlogなど、一部のメニューが表示されません

該当するAppsを利用している場合のみ表示される項目があります。

BASE管理画面からAppsの利用状況をご確認ください。

---

Q. 外部サイトへのリンクが表示されません

テーマ設定の外部WebサイトURLをご確認ください。

URLを設定した場合のみ、外部サイトへのリンクが表示されます。

---

Q. 背景画像を変更したら文字が読みにくくなりました

背景画像と文字色の組み合わせをご調整ください。

写真や柄のある背景を使用する場合は、文字とのコントラストが十分確保できるものをおすすめします。

---

Q. 商品一覧の商品画像の大きさが揃いません

登録している商品画像の縦横比をご確認ください。

できるだけ同じ縦横比で画像を作成すると、商品一覧が整いやすくなります。

---

Q. BASEの管理画面がこのマニュアルと違います

BASE側の管理画面やAppsは随時更新されるため、画面構成や名称が変更される場合があります。

BASE標準機能の操作については、BASE公式ヘルプをご確認ください。

---

更新履歴・お問い合わせ

ZAKKA STOREは、BASEの仕様変更や各種Appsの変更に合わせて、必要に応じてメンテナンスを行っています。

過去の主な更新内容は、更新履歴ページをご確認ください。

ZAKKA STORE 更新履歴
https://goristyle.com/zakka-store/changelog/

お問い合わせ

ZAKKA STOREテーマについてのご質問・不具合等については、GORI Styleまでお問い合わせください。

お問い合わせの際は、以下の情報をお知らせいただくと確認がスムーズです。

• ショップURL
• ご利用の端末
• ご利用のブラウザ
• 該当ページのURL
• 発生している現象
• 可能であれば画面キャプチャ

BASE標準機能や決済、ショップ管理画面そのものについては、BASE公式サポートへお問い合わせください。

---

ZAKKA STOREについて
https://goristyle.com/zakka-store/

ZAKKA STORE デモショップ
https://goristyle.thebase.in/

BASE Design Market
https://design.thebase.com/detail/28

更新履歴
https://goristyle.com/zakka-store/changelog/