テーマ設定ガイド
テーマ設定はどこにありますか
Section titled “テーマ設定はどこにありますか”- Shopify 管理画面で オンラインストア → テーマ を開きます
- カスタマイズしたいテーマで カスタマイズ をクリックします
- テーマエディタの左側で、一番下の テーマ設定 (歯車のアイコン)を開きます
テーマ設定で変更した内容は、ストア全体(すべてのページ)に適用されます。ページごとの内容は「セクション」で設定します → セクションリファレンス
Hellostore Theme の設定グループ
Section titled “Hellostore Theme の設定グループ”テーマ設定には、Shopify 標準の設定(ロゴ・色・タイポグラフィーなど)に加えて、Hellostore 独自のグループがあります。
| 設定グループ | 内容 | 詳細 |
|---|---|---|
| テーマライセンス | 利用するストアの登録(1購入1ストア) | 詳細 |
| 画像・動画の枠（画像の余白） | 商品写真のまわりの余白と文字の大きさの切り替え | 詳細 |
| 商品オプションの表示 | 選択肢が多い商品のドロップダウン切り替え | 詳細 |
| 商品カード | 商品カードの見た目・在庫バッジ・カラーチップとサイズ・カード内のカート追加・お気に入り・クイックビュー | 詳細 |
| アイコン | アイコンの種類（標準・線のアイコン）と太さ（ページ切り替えのフェードは「アニメーション」） | 詳細 |
| 購入時の案内 | 購入ボタン下の送料・決済・返品の案内 | 詳細 |
| 検索向け商品情報 | Google 等への返品・配送情報の提供 | 詳細 |
| ギフト・のし | 商品ページでのし・包装・名入れの入力 | 詳細 |
| 配送カレンダー | 締切時刻・休業日と、カートでのお届け希望日の指定（このグループが表示される構成のみ） | 詳細 |
Shopify 標準の設定
Section titled “Shopify 標準の設定”テーマ設定には、基盤テーマ Dawn 由来の標準グループもあります。名前と並び順はテーマエディタのテーマ設定と同じです。各設定の詳しい手順は Shopify ヘルプセンターの「テーマ設定をカスタマイズする」 を参照してください。
| 設定グループ | 主な内容 |
|---|---|
| ロゴ | ストアのロゴ画像と大きさ |
| 色 | 配色スキーム（色の組み合わせ）の定義。セクションごとに使い分けます |
| タイポグラフィー | 見出しと本文の書体・大きさ |
| レイアウト | ページの横幅とセクションまわりの余白 |
| アニメーション | スクロールで要素が現れる動きや、カーソルを合わせたときの動き |
| ボタン | ボタンの枠線・角丸・影、「カートに追加」などのボタンの見た目（塗り・枠線・下線の文字）と、「すべてを見る」の見た目（おすすめ商品・ブログ・コレクション一覧などの「すべてを見る」系が従います）。カラーチップの「角丸四角」もこの角丸を使います |
| バリエーション選択ボタン | 商品ページと商品カード（特集コレクション・コレクション一覧など）の選択肢ボタンの見た目（枠線・角丸の枠線・下線・なし）と、枠線の太さ・透明度・角丸・影。「角丸の枠線」は角を完全に丸くし、「下線」では枠線の太さと透明度の設定をその線に使います |
| 入力 | フォーム入力欄の角丸・影・枠線 |
| コレクションカード | コレクションカードの角丸・余白・枠線 |
| ブログカード | ブログ記事カードの角丸・余白・枠線 |
| テキストの囲み枠 | 文章を囲む枠の枠線・角丸・影 |
| 画像・動画の枠 | 画像・動画の枠線・角丸・影 |
| ドロップダウンとポップアップ | メニューのドロップダウンやポップアップの枠線・角丸・影 |
| ドロワーの枠 | モバイルメニュー・絞り込み・店舗受取（在庫確認）の、画面の横から開くパネルの枠線・影。カートドロワーは、この設定を参照しません |
| バッジ | セール・完売バッジの位置・角丸・配色 |
| ブランド情報 | フッターの「ブランド情報」ブロックに表示する見出し・説明・画像。Hellostore が足した「ブランド用スタイルシートのファイル名」は通常空欄のままにします。制作会社からファイル名（例: brand-custom.css）を指定されたときだけ入力します。テーマのファイル（assets）に同じ名前の CSS ファイルがあれば、ヘッダーのある通常のストアページで読み込みます。名前が違うと何も起きず、エラーも出ません。空欄の場合、追加の CSS は読み込みません |
| SNS | SNS アカウントへのリンク（Facebook・Instagram・X など） |
| 検索候補の表示 | 検索欄に文字を入れたときの検索候補の表示と、候補に販売元・価格を出すか |
| 通貨の表示 | 価格の通貨コード表示などの形式 |
| カート | カートのタイプ（ドロワー・ページ・ポップアップ通知）、カートメモ、送料無料バー、カート内のおすすめ商品 |
| お客様アカウント | アカウントメニューに使うメニューの指定 |
Hellostore の機能と連携する点: ボタン の角丸は、カラーチップの「角丸四角」の表示にも使われます → カラーチップのしくみ
タイポグラフィー グループには、Hellostore 独自の設定も入っています:
- 日本語の見出しを自然な文節で改行（既定 ON） — オンにすると、日本語の見出しを意味の切れ目で折り返します。オフにすると、ブラウザの通常の折り返しになります。英語など日本語以外のページには影響しません
- 見出しと段落の折り返しの整形（すべての言語で常に有効・設定はありません） — 複数行の見出しは行の長さを均等にそろえ、段落は最終行に1語だけ残るのを防ぎます。この動作に対応していないブラウザでは、通常の折り返しのまま表示されます
- 商品名と価格の文字サイズを調整する（既定 OFF） — オンにすると、画面の幅が750px未満（スマホなど）のとき、商品ページの商品名と価格に、下の2つの文字サイズを使います。オフの間は、表示は変わりません
- モバイルの商品名の文字サイズ（20〜30px・既定 22px）
- モバイルの価格の文字サイズ（18〜28px・既定 22px）