Solstarオリジナルテーマ「CREAM」
Cream の設定方法や、各セクションの使い方を確認できます。
対象バージョン：4.1.0
このマニュアルでは、Shopify テーマ「Cream by Solstar」の設定方法と、各セクションの使い方を確認できます。
本マニュアルの対象バージョンは 4.1.0 です。テーマエディタで調整する内容を中心にまとめています。テーマの内部構造については「上級者向け・内部仕様」を参照してください。
Shopify 管理画面のテーマエディタで、ページごとの構成を編集します。ここで説明する手順は、このマニュアルのすべての項目で共通です。
テーマの設定変更は、すべてテーマエディタから行います。
設定手順
ヒント：画像や動画は、あらかじめ「設定 > ファイル」にアップロードしてから選択します。
ヘッダーとフッターはページ本体とは別に「グループ」として管理されます。ヘッダーまわりの編集はヘッダーグループ、フッターまわりの編集はフッターグループで行います。
サイト全体の見た目に影響する設定です。テーマエディタ左下の「テーマ設定」から変更します。
サイト全体で使うロゴとファビコンを設定します。
設定場所テーマ設定 > ロゴとファビコン
主な設定
カラースキーム（配色セット）を作成し、各セクションやドロワーに割り当てます。
設定場所テーマ設定 > 色
主な設定
ヒント：プライマリーボタンには通常時とホバー時のグラデーションカラーを設定できます。未設定の場合は各ボタン背景色が使われます。
本文、見出し、サブ見出し、アクセント文字のフォントとサイズを管理します。
設定場所テーマ設定 > タイポグラフィー
主な設定
H1-H6
全体のページ幅とパンくずリストの表示を設定します。
設定場所テーマ設定 > ページレイアウト
主な設定
スクロール時のセクション表示、ホバー演出、ページ遷移を制御します。設定は「スクロール表示」「ホバー演出」「遷移エフェクト」の3グループに分かれています。
設定場所テーマ設定 > アニメーション
セクション表示アニメーション、アニメーション速度（ゆったり / 標準 / きびきび）、グリッド項目の時間差表示を設定します。速度は表示時間・移動距離・時間差の間隔が連動して変わります。セクション表示アニメーションは なし / フェード / フェードアップ / フェード + 拡大 から選択でき、スクロールに合わせて対象要素がふわっと表示されます。
カードホバー演出とボタンホバー演出を設定します。ボタンホバー演出は なし / リフト（浮き上がり + シャドウ）/ シャインスイープ（光の帯が横切る）から選択します。押下時は軽い縮小フィードバックが入ります。マウス操作時のみ適用され、タッチ端末では無効です。
ページ遷移、商品メイン画像への遷移、カート追加演出を設定します。
主要セクション（ヒーロー、コレクションリスト、特集コレクション、ブログ記事、テキストプロモ、お客様の声、リッチテキストカラム、タイムライン）は、各セクション設定で全体設定と異なる表示アニメーションを個別に指定できます（デフォルト = 全体設定に従う）。
OS で「視差効果を減らす」を有効にしている訪問者、低性能端末、JavaScript 無効環境では自動的に無効になり、コンテンツは常に表示されます。ページ最初のセクション（ファーストビュー）には適用されません。
セール（Sale）、売り切れ（Sold out）、新着（New）、ベストセラー（Bestseller）の各バッジの表示ルールを設定します。
設定場所テーマ設定 > バッジ
主な設定
プライマリ、セカンダリ、ピル型ボタンの見た目を管理します。
設定場所テーマ設定 > ボタン
主な設定
カート全体の表示方式と、サムネイルまわりの見た目を設定します。
設定場所テーマ設定 > カート
主な設定
カートアイコンは Default / The Sleek Basket から選択できます。選択したアイコンはヘッダー、カートドロワー、追従メニュー、商品カードのクイック追加（Quick add）、カートに追加（Add to cart）ボタン、お気に入りリスト（Wishlist）のカートに追加ボタンに反映されます。
送料無料メッセージはこのテーマ設定で一元管理され、カートページとカートドロワーの両方に反映されます。残額表示には ||amount|| プレースホルダーを使います。
ヒント：税メモ、ディスカウント入力、カートメモなどは、カートテンプレートのカート要約ブロック側で設定します。詳しくは「カート・検索 > カートページ」を参照してください。
カートドロワーや検索ポップオーバーなどの、共通の見た目を設定します。
設定場所テーマ設定 > ドロワー
主な設定
ドロワー配色は背景グラデーションにも対応します。グラデーション未設定時は背景色が使われます。カートドロワー表示中は、クイック追加やフィルタードロワーと同じ仕様で、ドロワー外側に背景ぼかしが入ります。
テーマ内アイコンの線幅を設定します。
設定場所テーマ設定 > アイコン
主な設定
ホーム、お気に入りリスト、カート、クイック追加、カートに追加などの主要な線アイコンは、このストローク設定に追従します。
フォーム入力欄の共通スタイルを設定します。
設定場所テーマ設定 > 入力フィールド
主な設定
モーダルやポップオーバーの見た目を管理します。
設定場所テーマ設定 > ポップオーバーとモーダル
主な設定
価格表記の共通ルールを設定します。
設定場所テーマ設定 > 価格
主な設定
税込ラベルは、このグローバル設定と各価格ブロックの表示設定の両方で影響を受けます。個々の価格ブロックでは「セール価格を先に表示」「税メモを表示」も別途設定できます。
商品一覧カードの購入導線とホバー挙動を設定します。
設定場所テーマ設定 > 商品カード
主な設定
PCではクイック追加（Quick add）アイコンにカーソルを重ねると、プライマリボタン配色に合わせた反転アニメーションが入ります。
ヒント：商品カードの価格順やセール価格表示を調整する場合は、対象セクションの価格ブロック設定も確認してください。
お気に入りアイコンの表示と色を設定します。
設定場所テーマ設定 > お気に入りリスト
主な設定
初回訪問時などに表示するイントロ動画を設定します。
設定場所テーマ設定 > ビデオイントロ
主な設定
検索ポップオーバーや、検索結果が空のときのカードの見た目を設定します。
設定場所テーマ設定 > 検索
主な設定
色見本やバリエーションチップの見た目を管理します。
設定場所テーマ設定 > 見本
主な設定
商品ページなどのバリエーション選択ボタンを設定します。
設定場所テーマ設定 > バリエーションピッカー
主な設定
ページ読み込み時のスプラッシュ表示を設定します。
設定場所テーマ設定 > スプラッシュスクリーン
主な設定
トップページや固定ページで使う、ビジュアル・販促・コンテンツ系のセクションです。いずれもテーマエディタの「セクションを追加」から配置できます。
画像や動画を背景に使う大型キービジュアルです。
設定場所セクション追加 > ヒーロー画像
主な設定
ブロックテキスト、ボタン、ロゴ、ジャンボテキスト、スペーサー、グループ、スクロールテキスト。
注意：メディア1 / 2 を画像にした場合は、それぞれにモバイル専用画像を設定できます。モバイル用画像を設定していない場合、PC用画像がモバイルにも表示されます。
動画主体のキービジュアルです。
設定場所セクション追加 > ヒーロービデオ
主な設定
複数のスライドを切り替えて表示するセクションです。
設定場所セクション追加 > スライドショー
主な設定
ブロックスライド。
横方向に流れるテキストやアイコンの帯です。
設定場所セクション追加 > スクロールテキスト
主な設定
背景画像または動画の上に、最大3つのテキスト系ブロックを配置する販促セクションです。
設定場所セクション追加 > テキストプロモ
主な設定
ブロック見出し、テキスト、ボタン。
回転グラデーション、シマー、レインボーグロー、パルスアウトライン、SVGトレースから選択できます。色はアニメーション種類に応じて個別設定できます。
配色は枠線内のコンテンツに適用され、枠線外はデフォルトの配色が使われます。モバイル専用画像の設定はありません。
ブランドストーリー、沿革、制作工程などを最大3つの項目で見せる、スクロール連動セクションです。
設定場所セクション追加 > タイムライン
主な設定
ブロックタイムライン項目（画像、小見出し、見出し、見出しプリセット、本文、本文サイズ、ボタン、リンク、新しいタブで開く、見出しタグ）。
PCではスクロールに合わせて項目と画像が切り替わり、モバイルでは横スクロールのカードとタイムライン線で表示されます。ブロックは最大3つまで追加できます。画像表示をオフにすると、画像だけのブロックは表示対象になりません。モバイル画像高さは auto / 250px / 350px / 450px / 50svh / 66svh から選べ、auto の場合は 5:4 比率、それ以外は選択した高さ内で画像をトリミングして表示します。
FAQ、サポート情報、商品説明、補足コンテンツなどを折りたたみ表示する独立セクションです。
設定場所セクション追加 > アコーディオン
主な設定
ブロックテキスト、画像、アイコン、カスタムLiquid、お問い合わせフォーム、アプリブロック。各ブロックでは見出し、見出しプリセット、本文、本文サイズ、テキスト配置を設定でき、画像ブロックでは画像と比率、アイコンブロックではアイコン、アイコン画像、サイズ、色、配置も設定できます。
「モバイルでスライダー表示（Show blocks as slider on mobile）」を有効にすると、モバイル画面のみブロックが横スクロールのスライダー表示になります。PCでは設定した列数のグリッド表示を維持します。新規追加時は、4つのテキストブロック、2カラム、Plusアイコン、モバイルスライダー有効の構成で開始します。
画像 / 動画とテキストを左右に並べるセクションです。
設定場所セクション追加 > テキスト付きメディア
主な設定
編集 と 編集：ジャンボ文字 のプリセット（preset）があります。
セクション間の境界線を表示します。
設定場所セクション追加 > 区切り線
主な設定
キャンペーンの期限を表示するセクションです。
設定場所セクション追加 > カウントダウンタイマー
主な設定
ブロックタイマー、サブ見出し、見出し、テキスト、ボタン。
2枚の画像をスライダーで比較するセクションです。
設定場所セクション追加 > ビフォー／アフター
主な設定
ブロックサブ見出し、見出し、テキスト、ボタン。
店舗地図やアクセス情報を表示します。
設定場所セクション追加 > 地図
主な設定
外部設定が必要：Google マップの表示には Google Maps API キーの取得と設定が必要です。
メール登録用のモーダルポップアップです。
設定場所セクション追加 > ニュースレターポップアップ
主な設定
複数配置しても、実際に描画されるのは最初に条件を満たした 1 セクションのみです。
外部設定が必要：登録されたメールアドレスは、Shopify 管理画面の顧客・マーケティング設定で管理します。
レビューや体験談をカードで見せるセクションです。
設定場所セクション追加 > お客様の声
主な設定
ブロックお客様の声。
独自の Liquid / HTML コードを挿入します。
設定場所セクション追加 > カスタムLiquid
主な設定
1つの基盤セクションから複数のプリセット（preset）を提供する、自由度の高い汎用セクションです。
設定場所セクション追加から各プリセットを選択
主な設定
ブロックテキスト、画像、ボタン、動画、アイコン、グループ、スペーサー、区切り線、フォーム系ブロック。
ヒント：
テキスト付き画像 では、画像ブロック側で Desktop / Mobile それぞれのアスペクト比を個別に設定できます。モバイルだけ画像を先頭にしたい場合は、セクションまたはグループ側の「モバイルでブロック順を反転（Reverse block order on mobile）」を使います。この設定はセクション直下のブロック順に適用され、ネストしたグループブロック内でも同じ考え方で利用できます。
単独のロゴをセクションとして配置したいときに使います。
設定場所セクション追加 > ロゴ
主な設定
px / %）ブログ一覧ページのメインセクションです。
設定場所ブログテンプレートで編集
主な設定
記事ページ本体のセクションです。
設定場所記事テンプレートで編集
主な設定
指定ブログの記事カードを任意のページに表示します。
設定場所セクション追加 > ブログ記事
主な設定
カルーセル、グリッド、編集 のプリセットがあります。
1記事ずつを全幅のヒーロースライドショーで表示します。各スライドは画像とテキストを左右半々に配置し、複数記事をスライドで切り替えます（Cream 設計のブログ特集ヒーロー）。
設定場所セクション追加 > ブログ記事（ヒーロー）
主な設定
デスクトップでは画像とコンテンツを 50% ずつの横並び、モバイルでは縦積みになります。タイトルとカード見出しは静的な既定文言のため、編集して使用します。
固定ページ本文を表示するメインセクションです。
設定場所ページテンプレートで編集
主な設定
お問い合わせページ用テンプレート（page.contact）では、このセクションの下にお問い合わせフォームが追加されています。
お問い合わせページで使用する、編集可能な問い合わせフォームです。名前、メール、電話番号、テキスト、問い合わせ内容、プルダウン、チェックボックス、小見出し、スペーサー、送信ボタンを組み合わせられます。
設定場所ページテンプレート page.contact > お問い合わせフォーム
主な設定
名のラベル、名のプレースホルダー、姓のラベル、姓のプレースホルダー、表示を逆にする、必須を設定できます。「表示を逆にする」を有効にすると、名前ブロックの表示順と入力順が 姓 > 名 になります。無効時は 名 > 姓 です。
ページが見つからないときに表示される 404 ページのメインセクションです。
設定場所404 テンプレートで編集
主な設定
ストア公開前などに表示されるパスワードページ用のメインセクションです。
設定場所パスワードページで編集
主な設定
商品ページ、コレクションページ、商品一覧まわりのセクションとブロックです。
商品ページのメインセクションです。メディアギャラリーと商品詳細を左右に並べて表示します。
設定場所商品テンプレートで編集
主な設定
ブロック商品メディアギャラリー、商品詳細グループ、バリエーションピッカー、フィットガイド、ポップアップリンク、購入ボタン、タブリッチテキスト、アコーディオン、アップセル（既定構成）。
「均等カラム」と「商品の詳細の幅を制限する」を有効にすると、PCでは「詳細の幅」で商品詳細エリアの最大幅を50〜100%の範囲で調整できます。100%未満では商品詳細の中身が詳細カラム内で中央配置され、メディアとの余白はギャップ設定値そのものになります。100%では従来どおり、ギャップ設定値に固定の40px余白が加わります。「最大コンテンツ幅」は、横並びのメディア / 商品詳細エリアがワイド画面で広がりすぎるのを防ぐ上限幅です。
ヒント：価格ブロックではセール価格の表示順や税メモ表示、購入ボタンでは数量、即時購入、ギフトカード入力などを設定できます。
外部設定が必要：商品レビューを表示するには、対応するレビューアプリの導入とアプリブロックの設定が必要です。
商品詳細エリア内に、5分割のフィット感インジケーターを表示する商品ページ用ブロックです。サイズ感、着用感、ゆとり感などを、左から右への段階表示で伝える用途に使います。
設定場所商品テンプレート > 商品情報 > 商品詳細グループ > ブロック追加 > フィットガイド
主な設定
インジケーターは常に5セグメントで表示され、アクティブな1セグメントだけが強調表示されます。1 は左端、3 は中央、5 は右端です。既定の商品テンプレートでは、バリエーションピッカーと購入ボタンの間に配置されています。位置を変えたい場合は、商品詳細グループ内でブロックをドラッグして並べ替えます。
商品メタフィールド theme.fit_guide_segment に値がある場合は、その値をアクティブセグメントとして使用します。メタフィールドが空の場合は、ブロック側の「フォールバックアクティブセグメント」を使用します。商品メタフィールドを入力しなければ、すべての商品でブロック設定の値が使われるため、全商品で同じフィット表示にしたい場合はブロック側だけの運用で問題ありません。
Fit guide segment、namespace は theme、key は fit_guide_segment、型は Number の Integer を選択します。1、最大値 5 を設定します。Fit guide segment に 1 から 5 の整数を入力して保存します。
ヒント：左ラベル、中央ラベル、右ラベルは任意です。例として 小さめ / 標準 / 大きめ、タイト / ジャスト / ゆったり、Short / Regular / Long など、商品カテゴリに合う表現を設定します。商品ごとに表示有無を分けたい場合は、フィットガイドを含む商品テンプレートと含まないテンプレートを分け、商品ごとにテンプレートを割り当てます。
注意：メタフィールド値が 1 から 5 の範囲外の場合、ブロックは表示されません。Shopify側のメタフィールド検証で 1-5 に制限しておくと安全です。
商品詳細エリア内に、関連商品や一緒に購入してほしい商品をコンパクトに表示する商品ページ用ブロックです。
設定場所商品テンプレート > 商品情報 > 商品詳細グループ > ブロック追加 > アップセル
主な設定
商品リストを設定した場合は、単一商品より商品リストが優先されます。表示できる商品は最大3件です。バリエーションが1つの商品はPlusボタンで直接カートに追加され、追加後はチェックマークが表示されます。複数バリエーションの商品はPlusボタンからクイック追加ドロワーを開きます。在庫切れ商品はPlusボタンの位置に売り切れ（Sold out）文言を表示し、この文言はテーマ設定の売り切れバッジラベルを参照します。税込ラベルはテーマ設定 > 価格の設定に追従し、有効時は価格の横に表示されます。
ヒント：商品メタフィールド theme.upsell または theme.upsell_list を動的ソースとして接続すると、商品ごとにアップセル商品を出し分けできます。
商品ページで追従表示される購入バーです。
設定場所フッターグループ内または該当セクション設定から有効化
主な設定
Glass効果を有効にすると、追従カート本体とバリエーションピッカーが半透明背景、15pxのぼかし、薄い罫線、上端と左端のハイライト、内側の光を使ったガラス風の表示になります。「影を表示」をオフにすると、追従カート本体とバリエーションピッカーのシャドウを非表示にできます。
現在は上下余白の設定ではなく、必要要素の表示有無を中心に調整する構成です。
訪問者が最近閲覧した商品（最大10件）を自動表示するセクションです。
設定場所セクション追加 > 最近見た商品
主な設定
おすすめ商品と同一のレイアウト設定（グリッド / カルーセル、モバイルカルーセル、表示件数、列数、カードサイズ、行 / 列間隔、タイトル行数制限、カルーセル矢印、表示幅、配色、余白）を使用します。
ブロック見出しなどのテキスト系ブロックに加え、商品カード（静的ブロック）の画像比率、タイトル、価格、スウォッチをおすすめ商品と同じ方法で調整できます。
閲覧履歴は各訪問者のブラウザ（localStorage）に保存されます。閲覧履歴がない訪問者にはセクション自体が表示されません。商品ページでは表示中の商品を除外します。テーマエディタではプレースホルダーカードでプレビューされます。
指定したコレクションの商品一覧を表示します。
設定場所セクション追加 > 特集コレクション
主な設定
グリッド、カルーセル、エディトリアル のプリセットがあります。
特定商品の詳細を大きく見せるセクションです。
設定場所セクション追加 > 商品のハイライト
主な設定
関連商品または補完商品を表示します。
設定場所商品テンプレートや任意のページで追加
主な設定
外部設定が必要：関連商品・補完商品の内容は、Shopify Search & Discovery アプリで管理します。商品データ側の関連付けには同アプリの設定が必要です。
コレクションページ本体の商品一覧セクションです。
設定場所コレクションテンプレートで編集
主な設定
既定テンプレートではフィルター、並び替え、グリッド密度切替のブロックが含まれます。
外部設定が必要：フィルターの項目は Shopify Search & Discovery アプリで管理します。
複数のコレクションをカードで一覧表示します。
設定場所セクション追加 > コレクションリスト
主な設定
Bento、グリッド、カルーセル、エディトリアル のプリセットがあります。
コレクション一覧ページ（list-collections テンプレート）用のメインセクションです。
設定場所コレクション一覧ページで編集
主な設定
コレクションへのリンクを強調表示するセクションです。
設定場所セクション追加 > コレクションリンク
主な設定
Spotlight と テキスト のプリセットがあります。
タブ切替で複数のコレクションを見せるセクションです。
設定場所セクション追加 > タブコレクション
主な設定
ブロックタブ。タブごとに対象コレクション、表示件数、カード配色、枠線、特集画像、画像比率、画像上 CTA ボタン、商品タイトル体裁、価格体裁、セール価格を先に表示（Show sale price first）、スウォッチ配置と余白を設定できます。
お気に入りに追加した商品の一覧ページです。page.wishlist JSONテンプレート、または固定ページテンプレートに追加したお気に入りリスト（Wishlist）セクションで表示します。
設定場所お気に入りページテンプレート、または固定ページテンプレート内のWishlistセクションで編集
主な設定
プリセット、フォント、カスタムサイズ、行間、文字間隔、大文字 / 小文字、折り返し、色を設定できます。
既定構成はタイトルブロック、ページコンテンツブロック、Wishlistセクション固定のお気に入りリストです。お気に入りリスト本体は重複描画を避けるためブロックではなく、セクション側の固定コンテンツとして管理します。カートに追加ボタンのカートアイコンは、テーマ設定 > カートのカートアイコン設定に追従します。
外部設定が必要：お気に入りページを利用する場合は、page.wishlist テンプレートを対象ページに割り当てます。テーマエディタに表示されない場合は、固定ページテンプレートにWishlistセクションを追加して同じ表示を管理できます。
カートページ、検索ページまわりのセクションです。カートドロワーや送料無料表示の共通設定は「テーマ全体の設定 > カート」を参照してください。
カートページ本体のセクションです。
設定場所カートテンプレートで編集
主な設定
ブロックカートタイトル、カート商品一覧、カート要約（既定構成）。
税 / 配送料テキスト、カートメモ、ディスカウントコード入力、分割払い表示、高速チェックアウト、空カート時リンクを設定できます。
送料無料進捗は「テーマ設定 > カート」で一元管理します。有効にするとカートページとカートドロワーの共通要約描画に反映されます。
検索ページ上部の検索欄セクションです。
設定場所検索テンプレートで編集
主な設定
ヒント：ヘッダーの検索アイコンから開く検索ポップオーバーの見た目は「テーマ設定 > 検索」で調整します。
検索結果一覧のメインセクションです。
設定場所検索テンプレートで編集
主な設定
既定テンプレートではフィルター、並び替え、グリッド密度切替に対応します。
テーマエディタの外で設定が必要な機能の一覧と、運用時の注意点です。各機能の詳細は該当項目を参照してください。
| やりたいこと | 必要な設定・アプリ | 関連項目 |
|---|---|---|
| 関連商品・補完商品を管理する | Shopify Search & Discovery アプリ | おすすめ商品 |
| コレクションのフィルターを管理する | Shopify Search & Discovery アプリ | コレクション |
| 商品レビューを表示する | 対応レビューアプリ + アプリブロック | 商品情報 |
| お気に入りページを作成する |
page.wishlist テンプレートの割り当て |
お気に入りリストページ |
| メルマガ登録を管理する | Shopify の顧客・マーケティング設定 | ニュースレターポップアップ |
| 店舗地図を表示する | Google Maps API キー | 地図 |
テーマの内部構造に関する情報です。通常の運用では編集する必要はありません。カスタマイズを行う開発者向けの参考情報として掲載しています。
本マニュアルは、テーマ（バージョン 4.1.0）の config/settings_schema.json / templates/ / sections/ / blocks/ の現行実装をもとに作成しています。_ で始まる内部ブロックやレンダリング用セクションは、通常運用では直接編集しません。
各テンプレート JSON ファイルの既定構成です。
| テンプレート | 既定構成 |
|---|---|
header-group.json
|
お知らせバー + ヘッダー |
footer-group.json
|
追従メニュー + 追従カート + フッター + ユーティリティ |
templates/index.json
|
ヒーロー画像、コレクションリスト、ヒーロービデオ、テキストプロモ、タブコレクション、特集コレクション、地図、カウントダウンタイマー、ビフォー／アフター、お客様の声 |
templates/product.json
|
商品情報、おすすめ商品、セクション |
templates/collection.json
|
セクション（コレクション見出し）、コレクション |
templates/search.json
|
検索、検索結果 |
templates/cart.json
|
カート、任意の特集コレクション（初期状態では無効） |
templates/blog.json
|
ブログ記事一覧 |
templates/article.json
|
ブログ記事 |
templates/list-collections.json
|
コレクションリスト（一覧ページ） |
templates/page.json
|
ページ |
templates/page.contact.json
|
ページ + お問い合わせフォーム |
templates/page.wishlist.json
|
お気に入りリスト |
templates/404.json
|
404 + 特集コレクション |
templates/password.json
|
パスワード |
ヘッダーの検索アイコンから開く、予測検索用の内部セクションです。通常は直接追加せず、ヘッダー設定と「テーマ設定 > 検索」で調整します。
predictive-search と predictive-search-empty は内部表示用のセクションです。
セクションレンダリング API 用の内部セクションです。通常のテーマ編集では使用しません。