テーマ設定操作マニュアル｜Cream by Solstar（Shopifyテーマ）

基本操作

管理画面: 「オンラインストア > テーマ > カスタマイズ」から編集します。
テーマ設定タブ: 左サイドバー上部の「テーマ設定」を開きます。
反映確認: 保存後にプレビュー/公開で確認します。
使い回し: 配色や書体は先に整えると、各セクションで統一しやすくなります。
表示条件: 一部の項目は他設定の選択に応じて表示されます（例: ドロワー設定）。

ロゴとファビコン

ヘッダーやフッターに表示されるロゴと、ブラウザタブのアイコン（ファビコン）をまとめて設定します。ブランドの見え方に直結するため、最初に整えるのがおすすめです。

設定	種別	説明
デフォルトロゴ	Image picker	通常時に表示されるロゴ画像です。
逆さロゴ	Image picker	暗い背景に切り替わる場合のロゴ画像です。
ロゴ高さ（PC）	Range(px)	PC表示時のロゴの高さです。
ロゴ高さ（モバイル）	Range(px)	スマホ表示時のロゴの高さです。
ファビコン	Image picker	ブラウザタブやブックマークに表示されるアイコンです。

色

サイト全体の雰囲気を決める配色セットを作成します。セクションごとに切り替えられるので、落ち着いた面と強調したい面を使い分けられます。

設定	種別	説明
配色セット	Color scheme group	配色セットを作成・管理します。セクションごとに選べます。
配色セット内の項目	Color	背景や文字、ボタン、入力欄、バリエーションの色をまとめて設定します。

タイポグラフィー

本文・見出し・アクセントに使うフォントと文字のサイズ感を整えます。読みやすさとブランドらしさのバランスを意識して調整してください。

設定	種別	説明
本文フォント	Font picker	本文に使うフォントです。
サブ見出しフォント	Font picker	サブ見出しに使うフォントです。
見出しフォント	Font picker	見出しに使うフォントです。
アクセントフォント	Font picker	強調や装飾に使うフォントです。
本文サイズ	Select(px)	本文の文字サイズです。
本文行間	Select	本文の行間です。
見出し1-6のフォント	Select	各見出しに使うフォント系統です。
見出し1-6のサイズ	Select(px)	各見出しの文字サイズです。
見出し1-6の行間	Select	各見出しの行間です。
見出し1-6の字間	Select	各見出しの文字間隔です。
見出し1-6の大文字化	Select	各見出しを大文字にするか設定します。

ページレイアウト

ページ全体の横幅と、パンくず（現在地の表示）の有無を決めます。情報量や導線の見せ方に影響します。

設定	種別	説明
ページ幅	Select	ページの横幅を選びます。
パンくず表示	Checkbox	現在地を示すパンくずを表示します。

アニメーション

ページの切り替えやカードのホバーなど、動きの演出をまとめて設定します。動きを控えめにしたい場合はここで無効化できます。

設定	種別	説明
ページ遷移アニメーション	Checkbox	ページ切り替え時の動きを有効にします。
商品ページ遷移アニメーション	Checkbox	一覧から詳細へ移動する演出を付けます。
カート追加アニメーション	Checkbox	カート追加時の動きを有効にします。
カードホバー効果	Select	商品カードにカーソルを置いた時の動きです。

バッジ

商品カードに表示されるバッジの見た目を調整します。セールや在庫切れなど、重要な情報をひと目で伝えるための設定です。

設定	種別	説明
表示位置	Select	バッジを表示する位置です。
Sale配色	Color scheme	Saleバッジに使う配色です。
Saleラベル	Text	Saleバッジの表示文言です。
Sale割引表示	Checkbox	割引値を表示するか設定します。
Sale割引形式	Select	割引の見せ方（％/金額）です。
Sale角丸	Range(px)	Saleバッジの丸みです。
Sold out配色	Color scheme	Sold outバッジに使う配色です。
Sold outラベル	Text	Sold outバッジの表示文言です。
Sold out角丸	Range(px)	Sold outバッジの丸みです。
New配色	Color scheme	Newバッジに使う配色です。
Newラベル	Text	Newバッジの表示文言です。
New角丸	Range(px)	Newバッジの丸みです。
Bestseller配色	Color scheme	Bestsellerバッジに使う配色です。
Bestsellerラベル	Text	Bestsellerバッジの表示文言です。
Bestseller角丸	Range(px)	Bestsellerバッジの丸みです。
バッジフォント	Select	バッジの文字に使うフォントです。
テキストケース	Select	文字を大文字にするか設定します。

ボタン

主要ボタンと補助ボタン、ピル型ボタンの形や文字スタイルを整えます。押しやすさやブランド感を左右するポイントです。

設定	種別	説明
プライマリ枠線太さ	Range(px)	主要ボタンの枠線の太さです。
プライマリ角丸	Range(px)	主要ボタンの丸みです。
プライマリフォント	Select	主要ボタンの文字に使うフォントです。
プライマリ文字ケース	Select	主要ボタンの文字の大文字化です。
セカンダリ枠線太さ	Range(px)	補助ボタンの枠線の太さです。
セカンダリ角丸	Range(px)	補助ボタンの丸みです。
セカンダリフォント	Select	補助ボタンの文字に使うフォントです。
セカンダリ文字ケース	Select	補助ボタンの文字の大文字化です。
ピル角丸	Range(px)	ピル型ボタンの丸みです。

カート

カートの表示方法や補助機能（メモ欄、クーポン入力など）を調整します。購入体験のわかりやすさに直結します。

設定	種別	説明
カート形式	Select	ページ表示かドロワー表示かを選びます。
商品名ケース	Select	カート内の商品名の文字ケースです。
価格フォント	Select	価格表示に使うフォントです。
ドロワー自動表示	Checkbox	追加時にドロワーを自動で開きます。
メモ欄表示	Checkbox	購入メモ欄を表示します。
メモ欄の既定開閉	Checkbox	メモ欄の初期状態を設定します。
割引欄表示	Checkbox	クーポン入力欄を表示します。
分割払い表示	Checkbox	分割払いの案内を表示します。
クイックチェックアウト	Checkbox	簡易決済ボタンを表示します。
空カートボタンリンク	URL	空カート時のボタンのリンク先です。
サムネ枠線	Select	サムネイル枠線の有無を選びます。
サムネ枠線太さ	Range(px)	枠線の太さです。
サムネ枠線不透明度	Range(%)	枠線の濃さです。
サムネ角丸	Range(px)	サムネイルの丸みです。

ドロワー

カートや検索がスライド表示されるドロワーの見た目を整えます。配色や罫線の有無で印象が変わります。

設定	種別	説明
配色	Color scheme	ドロワー全体に使う配色です。
罫線	Select	境界線を表示するか選びます。
罫線太さ	Range(px)	境界線の太さです。
罫線不透明度	Range(%)	境界線の濃さです。
影	Checkbox	ドロワーに影を付けます。

アイコン

サイト内のアイコンの線の太さを一括で調整します。全体のトーンを軽く見せたい/しっかり見せたい場合に有効です。

設定	種別	説明
線幅	Select	アイコン線の太さを選びます。

入力フィールド

フォーム入力欄の見た目を整えます。境界線の太さや角丸で、やわらかさ・信頼感などの印象が変わります。

設定	種別	説明
枠線太さ	Range(px)	入力欄の枠線の太さです。
角丸	Range(px)	入力欄の丸みです。
文字スタイル	Select	入力欄の文字プリセットを選びます。

ポップオーバーとモーダル

ポップオーバーやモーダルの見た目（配色や影、角丸）を調整します。通知や確認画面の印象に影響します。

設定	種別	説明
配色	Color scheme	ポップオーバー/モーダルの配色です。
角丸	Range(px)	角の丸みです。
罫線	Select	境界線の有無を選びます。
罫線太さ	Range(px)	境界線の太さです。
罫線不透明度	Range(%)	境界線の濃さです。
影	Checkbox	影を表示します。

価格

価格の見せ方を設定します。通貨コードを表示するかどうかで、海外向けの分かりやすさが変わります。

設定	種別	説明
商品ページの通貨コード	Checkbox	商品詳細の価格に通貨コードを表示します。
商品カードの通貨コード	Checkbox	一覧カードの価格に通貨コードを表示します。
カート商品の通貨コード	Checkbox	カート内商品の価格に通貨コードを表示します。
カート合計の通貨コード	Checkbox	合計金額に通貨コードを表示します。

商品カード

商品カードの操作感や表示方法を設定します。商品一覧の使いやすさに関わる項目です。

設定	種別	説明
クイック追加	Checkbox	一覧カードから直接追加するボタンを表示します。
モバイルのクイック追加	Checkbox	モバイルでもクイック追加を表示します。
クイック追加の配色	Color scheme	クイック追加ボタンの配色です。
2枚目画像ホバー	Checkbox	ホバー時に2枚目の画像へ切り替えます。
カルーセル表示	Checkbox	カード内で画像をスライド表示します。

お気に入りリスト

お気に入り機能有効化及びお気に入りアイコンの表示や色を設定します。ブランドに合わせた見た目に整えられます。

設定	種別	説明
お気に入りアイコンを有効化	Checkbox	お気に入りアイコンをコレクション・商品詳細ページに表示させます。
ハート枠線色	Color	ハートの枠線の色です。
ハート塗り色	Color	ハートの塗りの色です。
ハート背景色	Color	アイコン背景の色です。

ビデオイントロ

初回訪問時に表示するイントロ動画を設定します。ブランドの世界観を伝える演出として使えます。

設定	種別	説明
有効化	Checkbox	イントロ動画を表示するか設定します。
ホームのみ表示	Checkbox	ホームページのみ表示します。
自動再生	Checkbox	自動再生の有無を選びます。
デスクトップ動画ソース	Select	PC用動画の指定方法です。
デスクトップ動画（アップロード）	Video	アップロード済みの動画を選択します。
デスクトップ動画（外部）	URL	外部動画のURLを入力します。
モバイル動画ソース	Select	スマホ用動画の指定方法です。
モバイル動画（アップロード）	Video	アップロード済みの動画を選択します。
モバイル動画（外部）	URL	外部動画のURLを入力します。
音声URL	URL	音声ファイルのURLを指定します。
音量	Range(%)	初期の音量です。
スキップ文言	Text	スキップボタンの表示文言です。
スキップ色	Color	スキップ文言の色です。
サウンド案内文言	Text	音声案内の表示文言です。
ボタン文言	Text	イントロ画面のボタン文言です。
ボタンスタイル	Select	ボタンの見た目タイプです。
ボタン配色	Color scheme	ボタンに使う配色です。
ボタン角丸	Range(px)	ボタンの丸みです。

検索

検索の見え方を整えます。検索結果がない場合の表示や、予測検索カードの角丸などを調整できます。

設定	種別	説明
空状態コレクション	Collection	検索結果がない場合に表示するコレクションです。
商品角丸	Range(px)	予測検索の商品カードの丸みです。
カード角丸	Range(px)	予測検索の枠の丸みです。
タイトルケース	Select	タイトルの文字ケースを選びます。

見本（スウォッチ）

色や柄を選ぶスウォッチのサイズや枠線を調整します。見やすさとデザインのバランスを取ってください。

設定	種別	説明
バリエーション画像表示	Checkbox	スウォッチに画像を使うか設定します。
幅	Range(px)	スウォッチの幅です。
高さ	Range(px)	スウォッチの高さです。
角丸	Range(px)	角の丸みです。
罫線	Select	枠線を表示するか選びます。
罫線太さ	Range(px)	枠線の太さです。
罫線不透明度	Range(%)	枠線の濃さです。

バリエーションピッカー

バリエーション選択ボタンの形と横幅の扱いを整えます。選択肢が多い場合の見やすさに影響します。

設定	種別	説明
枠線太さ	Range(px)	選択ボタンの枠線の太さです。
角丸	Range(px)	選択ボタンの丸みです。
幅	Select	ボタン幅を内容に合わせるか全幅にするか選びます。

スプラッシュスクリーン

ページ読み込み時に表示されるロゴ画面（スプラッシュ）の見た目を調整します。読み込み中の印象を整えたい場合に使用します。

設定	種別	説明
有効化	Checkbox	スプラッシュ画面を表示するか設定します。
ロゴ画像	Image picker	スプラッシュに表示するロゴ画像です。
ロゴ最大幅（モバイル）	Range(px)	スマホでのロゴの最大幅です。
ロゴ最大幅（デスクトップ）	Range(px)	PCでのロゴの最大幅です。
背景色	Color	スプラッシュ背景の色です。

テーマ設定 操作マニュアル