Solstar original theme "CREAM"
Cream by Solstar Operations Manual
本書は Shopify テーマ「Cream by Solstar」の現行実装をもとに、機能概要と編集ポイントを整理した運用マニュアルです。
- 確認基準: `config/settings_schema.json` / `templates/` / `sections/` / `blocks/`
- 対象バージョン: `3.4.9`
- 補足: Shopify テーマエディタで調整する内容を中心にまとめています。`_` で始まる内部ブロックやレンダリング用セクションは、通常運用では直接編集しません。
基本操作
Shopify 管理画面のテーマエディタでページごとの構成を編集します。
- 操作: 「オンラインストア > テーマ > カスタマイズ」を開きます。
- 操作: 上部のテンプレート切替でホーム、商品、コレクション、検索、カート、ブログ、固定ページなどを選びます。
- 操作: 左サイドバーでセクション、グループ、ブロックの追加、並べ替え、非表示、削除を行います。
- 操作: 画像や動画は「設定 > ファイル」にアップロードしてから選択します。
- 補足: ヘッダーとフッターはページ本体とは別に「グループ」として管理されます。
テンプレート構成
- `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.liquid`: お気に入りリスト。
- `templates/404.json`: 404 + 特集コレクション。
- `templates/password.json`: パスワード。
テーマ設定
ロゴとファビコン
サイト全体で使うロゴとファビコンを設定します。詳細を見る
- 操作: テーマ設定 > ロゴとファビコン。
- 主な項目: デフォルトロゴ、反転ロゴ、ロゴ高さ（PC / モバイル）、ファビコン。
色
カラースキームを作成し、各セクションやドロワーに割り当てます。詳細を見る
- 操作: テーマ設定 > 色。
- 主な項目: 背景、見出し、本文、プライマリ色、ボーダー、シャドウ、ボタン色、入力欄色、バリエーション色。
タイポグラフィー
本文、見出し、サブ見出し、アクセント文字のフォントとサイズを管理します。詳細を見る
- 操作: テーマ設定 > タイポグラフィー。
- 主な項目: 本文、見出し `H1-H6`、行間、文字間隔、大文字 / 小文字、ボタン書体。
ページレイアウト
全体のページ幅とパンくずの表示を設定します。詳細を見る
- 操作: テーマ設定 > ページレイアウト。
- 主な項目: ページ幅、パンくず表示。
アニメーション
ページ遷移やカード挙動を制御します。詳細を見る
- 操作: テーマ設定 > アニメーション。
- 主な項目: ページ遷移、商品メイン画像への遷移、カート追加演出、カードホバー演出。
バッジ
Sale、Sold out、New、Bestseller の表示ルールを設定します。詳細を見る
- 操作: テーマ設定 > バッジ。
- 主な項目: 表示位置、各バッジの色、ラベル、角丸、割引表示形式、バッジ書体。
ボタン
プライマリ、セカンダリ、ピル型ボタンの見た目を管理します。詳細を見る
- 操作: テーマ設定 > ボタン。
- 主な項目: 枠線の太さ、角丸、フォント、文字ケース。
カート
カート全体の表示方式とサムネイルまわりの見た目を設定します。詳細を見る
- 操作: テーマ設定 > カート。
- 主な項目: カート形式（ページ / ドロワー）、カートアイコン、商品名の文字ケース、価格フォント、ドロワー自動オープン、サムネイルの枠線と角丸。
- 補足: カートアイコンは `Default` / `The Sleek Basket` から選択できます。選択したアイコンはヘッダー、カートドロワー、追従メニュー、商品カードのQuick add、Add to cartボタンに反映されます。
- 補足: 送料無料進捗、税メモ、ディスカウント入力、カートメモなどは、この画面ではなくカート要約ブロック側で設定します。
ドロワー
カートドロワーや検索ポップオーバーなどの共通見た目を設定します。詳細を見る
- 操作: テーマ設定 > ドロワー。
- 主な項目: 配色、罫線、太さ、不透明度、ドロップシャドウ。
アイコン
テーマ内アイコンの線幅を設定します。詳細を見る
- 操作: テーマ設定 > アイコン。
- 主な項目: ストロークの太さ。
- 補足: ホーム、Wishlist、カート、Quick add、Add to cartなどの主要な線アイコンは、このストローク設定に追従します。
入力フィールド
フォーム入力欄の共通スタイルを設定します。詳細を見る
- 操作: テーマ設定 > 入力フィールド。
- 主な項目: 罫線の太さ、角丸、文字プリセット。
ポップオーバーとモーダル
モーダルやポップオーバーの見た目を管理します。詳細を見る
- 操作: テーマ設定 > ポップオーバーとモーダル。
- 主な項目: 配色、角丸、罫線、シャドウ。
価格
価格表記の共通ルールを設定します。詳細を見る
- 操作: テーマ設定 > 価格。
- 主な項目: 通貨コード表示（商品ページ、商品カード、カート明細、カート合計）、税込ラベルの表示。
- 補足: 個々の価格ブロックでは「セール価格を先に表示」「税メモを表示」も別途設定できます。
商品カード
一覧カードの購入導線とホバー挙動を設定します。詳細を見る
- 操作: テーマ設定 > 商品カード。
- 主な項目: クイック追加、モバイルのクイック追加、クイック追加の配色、クイック追加背景の角丸、2枚目画像ホバー、カード内カルーセル。
- 補足: PCではQuick addアイコンにカーソルを重ねると、プライマリボタン配色に合わせた反転アニメーションが入ります。
お気に入りリスト
お気に入りアイコンの表示と色を設定します。詳細を見る
- 操作: テーマ設定 > お気に入りリスト。
- 主な項目: 有効化、枠線色、塗り色、背景色。
ビデオイントロ
初回訪問時などに表示するイントロ動画を設定します。詳細を見る
- 操作: テーマ設定 > ビデオイントロ。
- 主な項目: 有効化、ホームのみ表示、自動再生、PC / モバイルの動画ソース、音声ファイル、音量、スキップ表示、音声有効化ボタン、ボタンスタイル。
検索
検索ポップオーバーや空状態カードの見た目を設定します。詳細を見る
- 操作: テーマ設定 > 検索。
- 主な項目: 空状態コレクション、商品画像の角丸、カード角丸、カードタイトルの文字ケース。
見本（スウォッチ）
色見本やバリエーションチップの見た目を管理します。詳細を見る
- 操作: テーマ設定 > 見本。
- 主な項目: 画像見本の使用、幅、高さ、角丸、ボーダースタイル。
バリエーションピッカー
商品ページなどのバリエーション選択ボタンを設定します。詳細を見る
- 操作: テーマ設定 > バリエーションピッカー。
- 主な項目: 枠線の太さ、角丸、ボタン幅。
スプラッシュスクリーン
読み込み時のスプラッシュ表示を設定します。詳細を見る
- 操作: テーマ設定 > スプラッシュスクリーン。
- 主な項目: 有効化、ロゴ、ロゴ最大幅（PC / モバイル）、背景色。
セクション一覧
ヘッダー・検索・フッター
お知らせバー
画面上部の告知メッセージを流すセクションです。詳細を見る
- 操作: ヘッダーグループ内で編集します。
- 主な設定: 次の発表までの時間、表示幅、配色、区切り線、上下余白。
- ブロック: お知らせ、送料無料メッセージ。
- 補足: お知らせブロックを複数追加すると自動で切り替わります。切り替え間隔は「次の発表までの時間」で調整します。
- 補足: 送料無料メッセージはカート合計をもとに残り金額または達成メッセージを表示します。Ajaxで商品をカート追加した場合も、ページを再読み込みせずに表示が更新されます。
- 補足: 送料無料メッセージのしきい値はショップ通貨の金額で設定します。通貨記号や文字は入れず、数字のみを入力してください。
ヘッダー
ロゴ、メニュー、検索、国 / 言語切替を表示します。詳細を見る
- 操作: ヘッダーグループ内で編集します。
- 主な設定: ロゴ位置、メニュー位置、検索表示、国 / 言語セレクター、ヘッダー高さ、追従ヘッダー、透明ヘッダー、ページ別の透明時配色。
- ブロック: デスクトップメニュー、モバイルメニュー、Mega menu。
- 補足: デスクトップメニューはPC表示のメニュー設定専用です。モバイルドロワーやメニューバーの設定は含みません。
- 補足: モバイルメニューでは、モバイルドロワー表示、ドロワーロゴ、ロゴ幅、ドロワーのアコーディオン / 区切り線、1階層目メディア、SNSリンク表示、メニューバー表示、メニューバーのメニュー、メニューバー配色を設定できます。
- 補足: ドロワーロゴは Mobile menu ブロック内で個別にアップロードできます。テーマ設定のメインロゴとは別管理です。
- 補足: `Logo width` を大きくしても、ドロワーヘッダー内でロゴ高さが自動的に制御され、閉じるボタンやメニューリンクと重ならないように表示されます。
- 補足: 1階層目メディアは、モバイルドロワーの第1階層画面に表示されます。メディアタイプは「表示しない / 画像 / 動画」から選択でき、見出し、テキスト、リンクを設定できます。動画はミュート、ループ、インライン再生で表示されます。
- 補足: 1階層目メディアはメニューリンクの下に独立して表示されます。画像や動画はメニューリンクと重ならないようにレイアウトされています。
- 補足: モバイルメニューのSNSリンクは、フッターグループ内のユーティリティにあるSNSブロックから同期されます。リンクやアイコンを変更したい場合は、ユーティリティ側のSNSブロックを編集してください。
- 補足: メニューバーのメニューは、モバイルドロワーのメニューとは別に選択できます。
- 補足: 透明ヘッダーはホーム、商品、コレクションごとに個別設定できます。
Mega menu
ヘッダーの第1階層メニューに、ナビゲーションリンクと最大2つのメディアエリアを含む大型ドロップダウンを表示します。詳細を見る
- 操作: ヘッダーグループ > ヘッダー > ブロック追加 > Mega menu。
- 設定: 「メガメニューを適用するメニュー項目」に、第1階層メニュー名を入力します。ヘッダーのメニュー項目名と一致した項目に Mega menu が適用されます。
- 設定: 「メディアの表示位置」で、メディアエリアをリンク一覧の左側または右側に配置できます。
- 設定: メディアエリア1 / 2 では、タイプを「画像」または「動画」から選択します。選択したタイプに応じて画像または動画を設定できます。
- 設定: 各メディアエリアには、見出し、説明文、リンク先を設定できます。リンク先を設定すると、メディアエリア全体がクリック可能になります。
- 補足: メディアエリアは、画像 / 動画 / 見出し / 説明文のいずれかが設定されている場合に表示されます。
- 補足: 動画はミュート、ループ、インライン再生で表示されます。メニューやドロワーを開いたときに再生され、閉じると停止します。
- 補足: PCでは第1階層と第2階層の間に区切り線を表示しません。
追従メニュー
モバイル下部に固定表示されるメニューです。詳細を見る
- 操作: フッターグループ内で編集します。
- 主な設定: 背景色、アイコン色、文字色、Glass効果、コンパクト表示、罫線を非表示、角の半径、カートバブル色、Wishlistカウンター色。
- 補足: Glass効果を有効にすると、半透明背景、ぼかし、薄い罫線、シャドウ、輝きアニメーションを使ったガラス風の表示になります。角の半径は追従メニュー全体の角丸に反映されます。
- 補足: コンパクト表示を有効にすると、追従メニューの上下左右に同じ余白が入り、メニューが画面下部から浮いて見える表示になります。
- 補足: ホーム、カート、Wishlistなどの主要アイコンはテーマ設定のアイコンストロークに追従します。カートアイコンはテーマ設定 > カートの選択内容が反映されます。
- ブロック: カスタム、ホーム、カート、お気に入りリスト、SNSリンク、アカウント、検索、カテゴリー、もっと見る。
検索
検索ページ上部の検索欄セクションです。詳細を見る
- 操作: `検索` テンプレートで編集します。
- 主な設定: 配置、配色、上下余白。
検索ポップオーバー
ヘッダー検索アイコンから開く予測検索用の内部セクションです。詳細を見る
- 操作: 通常は直接追加せず、ヘッダー設定とテーマ設定 > 検索で調整します。
- 補足: `predictive-search` と `predictive-search-empty` は内部表示用です。
フッター
サイト下部の主要フッターです。詳細を見る
- 操作: フッターグループ内でブロックを追加して編集します。
- 主な設定: 表示幅、ブロック間隔、配色、上下余白。
- ブロック: メニュー、SNS、メール登録、ロゴ、テキスト、ボタン、アイコン、画像、決済アイコン、Follow on Shop、グループ、ジャンボテキストなど。
ユーティリティ
フッター最下段の補助領域です。詳細を見る
- 操作: フッターグループ内で編集します。
- 主な設定: 表示幅、間隔、区切り線の太さ、配色、上下余白。
- ブロック: コピーライト、ポリシー一覧、SNS。
- 補足: ユーティリティのSNSブロックは、ヘッダーのモバイルメニューに表示するSNSリンクの同期元としても使われます。SNSリンクをモバイルメニューに表示する場合は、ここでプロフィールURLを設定します。
ロゴ
単独ロゴをセクションとして配置したいときに使います。詳細を見る
- 操作: セクション追加 > ロゴ。
- 主な設定: 反転ロゴの使用、サイズ単位（`px` / `%`）、PC / モバイルサイズ、配置、配色。
パスワードフッター
パスワードページ専用のフッターです。詳細を見る
- 操作: パスワードページの編集画面で調整します。
- 主な設定: 配色。
ビジュアル・販促
ヒーロー画像
画像や動画を背景に使う大型キービジュアルです。詳細を見る
- 操作: セクション追加 > ヒーロー画像。
- 主な設定: メディア1 / 2、メディア1モバイル画像、メディア2モバイル画像、リンク、レイアウト方向、配置、ギャップ、高さ、配色、オーバーレイ、反射表現。
- 補足: メディア1 / 2 を画像にした場合は、それぞれにモバイル専用画像を設定できます。未設定時はデスクトップ画像がモバイルにも使用されます。
- ブロック: テキスト、ボタン、ロゴ、ジャンボテキスト、スペーサー、グループ、スクロールテキスト。
ヒーロービデオ
動画主体のキービジュアルです。詳細を見る
- 操作: セクション追加 > ヒーロービデオ。
- 主な設定: タイトル、サブ見出し、テキスト配置、リンク、ボタンスタイル、PC / モバイル動画、高さ、オーバーレイ、余白。
スライドショー
スライドを切り替えて表示するセクションです。詳細を見る
- 操作: セクション追加 > スライドショー。
- 主な設定: アイコンスタイル、コントロール形式、自動再生、切替速度、表示幅、高さ、余白。
- ブロック: スライド。
スクロールテキスト
横方向に流れるテキストやアイコンの帯です。詳細を見る
- 操作: セクション追加 > スクロールテキスト。
- 主な設定: 繰り返し方式、方向、速度、配色、余白。
テキストプロモ
背景画像または動画の上に、最大3つのテキスト系ブロックを配置する販促セクションです。詳細を見る
- 操作: セクション追加 > テキストプロモ。
- 主な設定: 背景メディアタイプ（画像 / 動画）、枠線、枠線アニメーション、表示幅、配色、オーバーレイ、PC / モバイルのテキスト配置、PCのブロック配置、高さ、上下余白。
- 枠線アニメーション: 回転グラデーション、シマー、レインボーグロー、パルスアウトライン、SVGトレースから選択できます。色はアニメーション種類に応じて個別設定できます。
- 補足: 配色は枠線内のコンテンツに適用され、枠線外はデフォルトの配色が使われます。モバイル専用画像設定はありません。
- ブロック: 見出し、テキスト、ボタン。
テキスト付きメディア
画像 / 動画とテキストを左右に並べるセクションです。詳細を見る
- 操作: セクション追加 > テキスト付きメディア。
- 主な設定: メディア位置、幅、高さ、表示幅、端まで拡張するか、配色、余白。
- 補足: `編集` と `編集：ジャンボ文字` の preset があります。
区切り線
セクション間の境界線を表示します。詳細を見る
- 操作: セクション追加 > 区切り線。
- 主な設定: 配色、表示幅、太さ、角丸、長さ、左右配置、余白。
カウントダウンタイマー
キャンペーン期限を表示するセクションです。詳細を見る
- 操作: セクション追加 > カウントダウンタイマー。
- 主な設定: レイアウト、完了時に隠すか、テキスト配置、PC / モバイル高さ、表示幅、配色、余白。
- ブロック: タイマー、サブ見出し、見出し、テキスト、ボタン。
ビフォー／アフター
2枚の画像をスライダーで比較するセクションです。詳細を見る
- 操作: セクション追加 > ビフォー／アフター。
- 主な設定: Before / After 画像、ラベル、比率、角丸、表示幅、配色、テキスト配置、余白。
- ブロック: サブ見出し、見出し、テキスト、ボタン。
地図
店舗地図やアクセス情報を表示します。詳細を見る
- 操作: セクション追加 > 地図。
- 主な設定: API キー、住所、緯度経度、ズーム、スタイル、見出し、住所本文、ボタン、補助画像、高さ、表示幅、配色。
ニュースレターポップアップ
メール登録用のモーダルポップアップです。詳細を見る
- 操作: セクション追加 > ニュースレターポップアップ。
- 主な設定: 有効化、ホームのみ表示、表示遅延、再表示日数、オーバーレイ、不透明度、ぼかし、画像、見出し、説明、入力ラベル、送信ボタン文言、登録後メッセージ、クーポン表示。
- 補足: 複数配置しても、実際に描画されるのは最初に条件を満たした 1 セクションのみです。
お客様の声
レビューや体験談をカードで見せるセクションです。詳細を見る
- 操作: セクション追加 > お客様の声。
- 主な設定: 見出し、見出しプリセット、配色、画像表示、カード枠線、カード角丸、画像角丸、上下余白。
- ブロック: お客様の声。
カスタムLiquid
独自の Liquid / HTML を挿入します。詳細を見る
- 操作: セクション追加 > カスタムLiquid。
- 主な設定: Liquid コード、配色、表示幅、余白。
汎用セクション（`section.liquid` 系）
セクション
1つの基盤セクションから複数の preset を提供する汎用セクションです。詳細を見る
- 共通設定: 方向、配置、ギャップ、幅、高さ、背景メディア、背景画像、枠線、オーバーレイ、配色、余白。
- 代表的なブロック: テキスト、画像、ボタン、動画、アイコン、グループ、スペーサー、区切り線、フォーム系ブロック。
- 補足: セクション直下のブロック順は、モバイル時のみ `Reverse block order on mobile` で反転できます。ネストした `グループ` ブロック内でも同じ考え方で利用できます。
利用できる preset
詳細を見る
- カスタムセクション: 自由配置用の基本形です。
- リッチテキスト: 見出し、本文、ボタン中心の構成です。
- よくある質問: アコーディオン形式の FAQ 用です。
- ビデオ: 動画と補助テキストの表示用です。
- お問い合わせフォーム: フォームと送信ボタンを配置します。
- メール登録者: メール登録フォーム用です。
- テキスト付きアイコン: アイコンと説明文を並べます。
- Split showcase: 2 カラム訴求向けのレイアウトです。
- テキスト付き画像: 画像と文章の組み合わせ用です。
- マルチカラム: 複数列の特徴紹介に向きます。
- 大きなロゴ: ブランドロゴを大きく見せる用途です。
- 補足: `テキスト付き画像` では、画像ブロック側で Desktop / Mobile それぞれのアスペクト比を個別に設定できます。モバイルだけ画像を先頭にしたい場合は、セクションまたはグループ側の `Reverse block order on mobile` を使います。
商品・コレクション
特集コレクション
指定コレクションの商品一覧を表示します。詳細を見る
- 操作: セクション追加 > 特集コレクション。
- 主な設定: 対象コレクション、レイアウト、モバイルカルーセル、表示件数、列数、カードサイズ、行 / 列間隔、タイトル行数制限、表示幅、配色、余白。
- 補足: `グリッド`、`カルーセル`、`エディトリアル` の preset があります。
商品のハイライト
特定商品の詳細を大きく見せるセクションです。詳細を見る
- 操作: セクション追加 > 商品のハイライト。
- 主な設定: 対象商品、レイアウト、配色、余白。
おすすめ商品
関連商品または補完商品を表示します。詳細を見る
- 操作: 商品テンプレートや任意ページで追加します。
- 主な設定: 対象商品、表示種別（関連 / 補完）、レイアウト、モバイルカルーセル、表示件数、列数、間隔、タイトル行数制限、表示幅、配色、余白。
- 補足: 商品データ側の関連付けには Shopify Search & Discovery の設定が必要です。
コレクション
コレクションページ本体の商品一覧です。詳細を見る
- 操作: コレクションテンプレートで編集します。
- 主な設定: レイアウト、カードサイズ、無限スクロール、1ページ件数、グリッド幅、モバイル全幅、行 / 列間隔、タイトル行数制限、配色、余白。
- 補足: 既定テンプレートではフィルター、並び替え、グリッド密度切替のブロックが含まれます。
コレクションリスト
複数コレクションをカードで一覧表示します。詳細を見る
- 操作: セクション追加 > コレクションリスト。
- 主な設定: 対象コレクション群、レイアウト、モバイルカルーセル、列数、カードサイズ、表示数、間隔、アイコンスタイル、表示幅、配色、余白。
- 補足: `Bento`、`グリッド`、`カルーセル`、`エディトリアル` の preset があります。
コレクションリスト（一覧ページ）
`list-collections` テンプレート用のメインセクションです。詳細を見る
- 操作: コレクション一覧ページで編集します。
- 主な設定: レイアウト、列数、モバイル表示、間隔、アイコンスタイル、表示幅、配色、余白。
コレクションリンク
コレクションへのリンクを強調表示するセクションです。詳細を見る
- 操作: セクション追加 > コレクションリンク。
- 主な設定: 対象コレクション群、レイアウト、表示幅、テキスト配置、画像位置、配色、余白。
- 補足: `Spotlight` と `テキスト` の preset があります。
タブコレクション
タブ切替で複数コレクションを見せるセクションです。詳細を見る
- 操作: セクション追加 > タブコレクション。
- 主な設定: 見出し、サブ見出し、ヘッダー配置、レイアウト、列数、列間隔、アイコンスタイル、表示幅、配色、余白。
- ブロック: タブ。
- タブブロックで設定できる内容: 対象コレクション、表示件数、カード配色、枠線、特集画像、画像比率、画像上 CTA ボタン、商品タイトル体裁、価格体裁、`Show sale price first`、スウォッチ配置と余白。
商品情報
商品ページのメインセクションです。詳細を見る
- 操作: 商品テンプレートで編集します。
- 主な設定: コンテンツ幅、PC でのメディア位置、均等カラム、詳細幅制限、ギャップ、配色、余白。
- 既定構成: 商品メディアギャラリー、商品詳細グループ、バリエーションピッカー、ポップアップリンク、購入ボタン、タブリッチテキスト、アコーディオン。
- 補足: 価格ブロックではセール価格の表示順や税メモ表示、購入ボタンでは数量、即時購入、ギフトカード入力などを設定できます。
追従カート
商品ページで追従表示される購入バーです。詳細を見る
- 操作: フッターグループ内または該当セクション設定から有効化します。
- 主な設定: 有効化、モバイルのみ表示、配色、Glass効果、数量表示、バリエーションピッカー表示、商品画像表示。
- 補足: Glass効果を有効にすると、追従カート本体とバリエーションピッカーが半透明背景、ぼかし、薄い罫線、シャドウ、輝きアニメーションを使ったガラス風の表示になります。
- 補足: 現在は上下余白設定ではなく、必要要素の表示有無を中心に調整する構成です。
お気に入りリスト
`page.wishlist` テンプレートで表示するお気に入り一覧ページです。詳細を見る
- 操作: お気に入りページテンプレートで編集します。
- 主な設定: 見出しプリセット、見出しサイズ、説明表示、カードサイズ、商品名の行数制限、バリエーションピッカー、画像比率、グリッド幅、列間隔、配色、下余白。
- 補足: このセクションは `wishlist` サフィックスのページでのみ描画されます。
商品カードのレンダリング
セクションレンダリング API 用の内部セクションです。詳細を見る
- 操作: 通常のテーマ編集では使用しません。
ブログ・ページ
ブログ記事一覧
ブログ一覧ページのメインセクションです。詳細を見る
- 操作: ブログテンプレートで編集します。
- 主な設定: 配色、上下余白。
ブログ記事
記事ページ本体です。詳細を見る
- 操作: 記事テンプレートで編集します。
- 主な設定: 方向、ギャップ、配色、上下余白。
ブログ記事（特集表示）
指定ブログの記事カードを任意ページに表示します。詳細を見る
- 操作: セクション追加 > ブログ記事。
- 主な設定: 対象ブログ、レイアウト、モバイルカルーセル、表示件数、列数、カードサイズ、間隔、アイコンスタイル、表示幅、配色、余白。
- 補足: `カルーセル`、`グリッド`、`編集` の preset があります。
ページ
固定ページ本文を表示するメインセクションです。詳細を見る
- 操作: ページテンプレートで編集します。
- 主な設定: 方向、ギャップ、配色、表示幅、上下余白。
- 補足: `page.contact` では、このセクションの下に `セクション > お問い合わせフォーム` が追加されています。
検索・カート・システム
検索結果
検索結果一覧のメインセクションです。詳細を見る
- 操作: 検索テンプレートで編集します。
- 主な設定: レイアウト、カードサイズ、無限スクロール、1ページ件数、グリッド幅、モバイル全幅、行 / 列間隔、配色、余白。
- 補足: 既定テンプレートではフィルター、並び替え、グリッド密度切替に対応します。
カート
カートページ本体です。詳細を見る
- 操作: カートテンプレートで編集します。
- 主な設定: 表示幅、配色、上下余白。
- 既定構成: カートタイトル、カート商品一覧、カート要約。
- カート要約ブロックで設定できる内容: 送料無料進捗メッセージ、送料無料条件金額、進捗文言、達成文言、税 / 配送料テキスト、カートメモ、ディスカウントコード入力、分割払い表示、高速チェックアウト、空カート時リンク。
- 補足: 送料無料進捗はカートページとカートドロワーの共通要約描画に反映されます。残額表示には `||amount||` プレースホルダーを使います。
404
404 ページのメインセクションです。詳細を見る
- 操作: 404 テンプレートで編集します。
- 主な設定: 方向、表示幅、高さ、配置、ギャップ、配色、余白。
パスワード
ストアパスワードページ用のメインセクションです。詳細を見る
- 操作: パスワードページで編集します。
- 主な設定: 方向、配置、ギャップ、表示幅、背景メディア、背景画像、枠線、配色、余白。
運用メモ・連携事項
- フィルター、関連商品、補完商品の管理には Shopify Search & Discovery アプリを使います。
- レビュー表示はレビューアプリや app block の導入が必要です。
- 税込ラベルは「テーマ設定 > 価格」のグローバル設定と、各価格ブロックの表示設定の両方で影響を受けます。
- 商品カードの価格順やセール価格表示を調整する場合は、対象セクションの価格ブロック設定も確認してください。
- ニュースレターポップアップは複数追加しても 1 件だけ描画されます。
- お気に入りページは `page.wishlist` テンプレートを使う前提です。