メインコンテンツまでスキップ

Vertex テーマ設定リファレンス

Shopify テーマエディターの Theme Settings に含まれるすべてのオプションを解説します。アクセス方法: テーマエディターを開き、左下のギアアイコン (Theme settings ラベル) をクリックします。

Vertex の設定は 7 つのパネルにグループ化されています:

  1. タイポグラフィ
  2. カラー
  3. レイアウト
  4. B2B
  5. ローカライズ
  6. SEO & 共有
  7. ビジネス情報

タイポグラフィ​

設定内容デフォルト
見出しフォント全ページの <h1>–<h6> とマーケティングセクションの見出しに使用されるフォント。Poppins Bold
本文フォント本文コピー、ナビゲーション、ボタン、フォームフィールド、価格に使用されるフォント。Poppins Regular
ベストプラクティス

Vertex は両方のフォントをプリロードするため、初回ペイント前に準備が整います。最速の LCP が必要な場合は、両方に同じフォント (異なるウェイト) を使用してください。

カラー​

スタートカラーパレット​

ワンクリックでストアフロント全体を再カラーリングする単一のドロップダウン。

オプション業種アクセントカラー
Custom(デフォルト)工業 / MRO — または任意のブランド標準でコバルトブルー (#1d4ed8)。下のカラーピッカーで編集
Signal red自動車部品#ec5f24
Office blueオフィス & IT サプライ#3b82f6
Inkline teal印刷 & 複製#0d9488

カスタムパレット (スタートパレット = Custom のときのみ使用)​

設定用途デフォルト (コバルトブルー)
Background本文背景、ドロワー背景#ffffff
Surfaceカード背景、設定パネル背景#f5f5f4
Surface alternate微妙なセカンダリサーフェス#fafaf9
Text主要テキストカラー#0c0a09
Muted textアイブロウ、ラベル、キャプション#57534e
Bordersカードボーダー、区切り線#e7e5e4
Accent主要ブランドカラー (CTA、バッジ)#1d4ed8
Accent darkアクセント CTA のホバー / アクティブ状態#1a44bd
Accent softアクセントカラー背景のソフトティント#e7eefd
Text on accentアクセントで塗りつぶされたボタンやバッジに配置されるテキストとアイコンのカラー。Accent dark に対して高コントラストを保ってください (デフォルトは白)。#ffffff
Success成功バッジ (在庫あり、NET-30 承認済)#15803d

レイアウト​

設定オプションデフォルト
ページ幅Narrow (75rem) / Standard (90rem) / Wide (110rem)Narrow
ページサイドパディング16〜60 px (スライダー)28 px

ヘッダーの挙動​

設定内容デフォルト
スクロール時の固定ヘッダーメインヘッダーをビューポートに固定します。On

カートの挙動​

設定内容デフォルト
カートレイアウトスライドアウトドロワー (B2B クイック追加に推奨) または 専用カートページ。Drawer

ユーティリティ​

設定内容デフォルト
「トップへ戻る」ボタンを表示1 ビューポート分スクロール後に表示されるフローティングボタン。On
商品ページに「最近見た商品」を表示localStorage でバイヤーごとに最大 12 商品を追跡します。On

B2B​

Storefront mode​

オプション内容最適
Hybrid (auto) (デフォルト)自動検出: ゲストには B2C 向けデフォルト、サインインした B2B バイヤーには B2B 要素を表示。ほとんどのマーチャント — 両方のオーディエンスを受け入れます。
B2B-onlyB2C 向けデフォルトを非表示にします。卸売専門マーチャント。
B2C-onlyサインインした B2B バイヤーであっても、UI のあらゆる B2B 要素を抑制します。同じテーマを姉妹 B2C ストアで動作させる場合。

→ 詳細: Storefront modes ガイド

価格表示​

設定内容デフォルト
顧客がログインするまで価格を非表示ゲストの価格を 「ログインして価格を確認」 に置き換えます。Off

商品ページのセクション​

設定内容バッキングメタフィールド
PDP に価格履歴を表示商品に vertex.price_history がある場合に「Price history」ディスクロージャーを描画します。vertex.price_history
PDP に「Ships from」を表示vertex.ships_from を読み取り、下のデフォルトにフォールバックします。vertex.ships_from
デフォルトの「Ships from」拠点商品に vertex.ships_from がない場合に使用します。スキップするには空欄のままにします。—
PDP に「Documents & downloads」を表示データシート / MSDS / ブロシュア / 設置ガイドのリンクをラップします。ドキュメントが添付されていない商品については自動非表示。vertex.datasheet ほか
バリアントスウォッチを表示カラー / 画像オプションの値を、商品ページ上でクリック可能なスウォッチチップに変換します。オフの場合、オプションはどこでもプレーンなドロップダウンとして描画されます。—
スウォッチの取得元

Shopify 管理画面でオプションの値にカラーまたは画像を割り当てると、Vertex が自動的にクリック可能なチップとして表示します — テーマ側の設定は不要です。キーボードやスクリーンリーダーのユーザー向けに、アクセシブルなドロップダウンがその下にそのまま残ります。

ローカライズ​

設定オプションデフォルト
テキスト方向Auto (ロケール駆動) / Left to right / Right to leftAuto
自動 RTL

Vertex は、アラビア語、ヘブライ語、ペルシア語、ウルドゥー語、イディッシュ語、クルド語、ディベヒ語、パシュトー語では <html dir> を自動で反転します。強制する必要がある場合にのみ Left to right / Right to left を設定してください。

SEO & 共有​

ブランドアセット​

設定推奨サイズ
Favicon32×32 PNG。同梱の Vertex ブランドマークを使用する場合は空欄のままにします。

ソーシャルカード​

設定推奨サイズ
デフォルト共有画像 (OG / Twitter)1200 × 630 px。
Twitter / X ハンドル@ なし。

ソーシャルプロファイル URL (Organization JSON-LD の sameAs)​

  • LinkedIn URL、Twitter / X URL、Facebook URL、Instagram URL、YouTube URL

Google Merchant / Shopping​

設定メモ
デフォルト発送元国 (ISO コード)2 文字 (US、GB、DE など)
デフォルト送料 (数値)送料無料の場合は 0 を使用
取扱時間 — 最小 / 最大 (日数)0〜14 日
輸送時間 — 最小 / 最大 (日数)0〜30 日
返品期間 (日数)0〜180 日
返品方法郵送 / 店舗 / 商品を保管
返品送料返品送料無料 / 顧客負担

ビジネス情報​

これらの値は、サイトワイドの Organization JSON-LD (Knowledge Panel データ) に送られます。

設定形式例
電話 (E.164 推奨)国コード付き国際形式+1-216-555-0182
電話受付時間自由テキストMon-Fri 7am-6pm CST
住所—1500 W Industrial Pkwy
市 / 地区—Cleveland
州 / 地域コード2 文字の地域コードOH
郵便番号 / ZIP コード—44113
国 (ISO コード)2 文字の国コードUS
創業年4 桁の年2014
5 分で得られる最もインパクトの大きい SEO 改善

これらを記入することで、全ページに Organization + LocalBusiness JSON-LD が投入されます — Google が Knowledge Panel と Maps リスティングを構築するために使用するデータです。

各設定の適用範囲​

パネル影響範囲
タイポグラフィすべてのページ — 本文 + 見出し
カラーすべてのページ — 背景、テキスト、アクセント
レイアウトすべてのページ — 最大幅、パディング、固定ヘッダー
B2BB2B 要素 (コバルトブルーのバー、RFQ、一括注文) + 価格表示
ローカライズすべてのページの <html dir> 属性
SEO & 共有すべてのページの <meta> タグ + JSON-LD
ビジネス情報すべてのページの Organization + LocalBusiness JSON-LD

次のステップ​