ShopippiShopify テーマKyoto
v1.0.0最新
v1.0.0最新

Kyoto テーマ · ドキュメント · v1.0.0

テーマ設定

テーマ設定では、ストア全体に関わる設定をまとめて変更します。テーマエディターを開き、左端の歯車のアイコン（テーマ設定）を選んでください。以下のグループはエディターと同じ順番で並べています。配色と動きは専用のページで説明しています（配色、動き）。

多くのグループでは、細かな設定を 細かく設定する や 字間とアクセント書体を細かく設定する などのチェックボックスの中にまとめています。オフのままなら Kyoto がバランスのよい初期値を使います。すべて自分で決めたい場合にオンにしてください。

ロゴとファビコン

設定範囲・選択肢内容
ロゴ画像ヘッダーのロゴです。ロゴがない場合は店名を文字で表示します（ヘッダーとフッターの 店名と添え書き ブロック）。
反転ロゴ（透明ヘッダー・暗い背景用）画像画像に重なる透明なヘッダーや、フッターの反転表示に使う明るい色のロゴです。空欄なら通常のロゴを使います。
ロゴの高さ（PC）16〜120 px（初期値 40）PC でのロゴの高さです。
ロゴの高さ（スマホ）16〜80 px（初期値 32）スマホでのロゴの高さです。
ファビコン画像ブラウザのタブに表示される小さなアイコンです。32 × 32 px 以上の正方形の画像を使ってください。

書体

Kyoto は書体を 3 つの役割に分けて使います。見出しの欧文書体、本文の欧文書体、ラベル・ボタン・小さな大文字に使う アクセント書体（ボタン・ラベル・ナビ） です。どれも Shopify のフォントライブラリから選べます。

書体の選択

設定選択肢内容
見出しの欧文書体、本文の欧文書体、アクセント書体（ボタン・ラベル・ナビ）Shopify のフォントライブラリ役割ごとの欧文書体です。
和文の書体の出どころ端末の書体、フォントライブラリフォントライブラリ は、下で選ぶ日本語の書体を Shopify から読み込みます。端末の書体 はお客様の端末に入っている書体を使うため、表示が速くなります。
和文の見出しの書体（ライブラリ）、和文の本文の書体（ライブラリ）Shopify のフォントライブラリフォントライブラリ を選んだときに表示されます。プリセット Kyoto では、見出しに Shippori Mincho（しっぽり明朝）、本文に Zen Kaku Gothic New（Zen 角ゴシック New）を使っています。
和文・中文の見出し（OS の書体。予備）ゴシック、明朝、丸ゴシック見出しに使う端末の書体です。中国語のページでは常にこの書体を使います。日本語のページでは、端末の書体 を選んでいる場合と、ライブラリの書体を読み込んでいる途中に使います。
和文・中文の本文（OS の書体）ゴシック、明朝本文用の端末の書体です。使われる条件は見出しと同じです。

サイズ

設定範囲・選択肢内容
本文の大きさ（PC）12〜20 px（初期値 17）PC での本文のサイズです。
本文の大きさ（スマホ）12〜18 px（初期値 16）スマホでの本文のサイズです。
見出しの大きさの差（比率）1.125、1.2、1.25、1.333、1.414見出しが 1 段上がるごとにどれだけ大きくするかの比率です。数値が大きいほど差がはっきりします。
見出しの大きさの差（スマホ）1.125、1.2、1.25スマホでの比率です。

行間と字間

設定範囲・選択肢内容
見出しの行間、本文の行間（欧文）狭い、標準、広い行と行の間隔です。
見出しの大文字化なし、大文字、小文字欧文の見出しを大文字・小文字に変換します。
字間とアクセント書体を細かく設定するオン・オフオンにすると、下の 4 つの設定が表示されます。
見出しの字間、本文の字間−5〜20 %文字と文字の間隔です。
アクセント書体の大文字化なし、大文字、小文字ラベルなど、アクセント書体で表示する文字の大文字・小文字です。
アクセント書体の字間−5〜20 %アクセント書体の文字間隔です。

和文・中文の組版

設定範囲・選択肢内容
和文・中文の本文の行間1.4〜2.2（初期値 1.8）日本語と中国語の行間です。欧文より広めにすると読みやすくなります。
和文・中文の字間（1/100em）0〜10（1/100 em 単位。初期値 4）文字と文字の間をわずかに空けます。
和文・中文の見出しの字間（1/100em）0〜20（1/100 em 単位）字間とアクセント書体を細かく設定する をオンにすると表示されます。
約物を詰める（palt）オン・オフ書体のプロポーショナル幅の約物を使い、かっこや句読点の幅を詰めます。
文節で改行するオン・オフ日本語の見出しを、単語の途中ではなく文節の区切りで折り返します。非対応のブラウザでは通常どおり折り返します。
和文と欧文・数字の間を少し空けるオン・オフ日本語と英単語・数字が隣り合う箇所に、わずかな空きを入れます（対応ブラウザのみ）。

見出しごとの設定（詳細）

H1〜H6 を個別に設定する をオンにすると、見出しのレベルごとにサイズを指定できます。H1〜H6 のそれぞれに、サイズ（自動、または 14、16、18、20、24、28、32、40、48、56、64、72、88、104、120 px）と書体（見出し、本文、アクセント）を選びます。オフの場合は 見出しの大きさの差（比率） に従います。プリセット Kyoto ではこの設定をオンにして、大きめの見出し（H1 88 px、H2 72 px）にしています。

見出しのサイズは画面幅に合わせて滑らかに変わります。指定したサイズになるのは大きな画面で、スマホではそれに比例して小さくなります。

レイアウトと余白

設定範囲・選択肢内容
ページの最大幅1000〜1920 px（20 刻み。初期値 1360）大きな画面でコンテンツが広がる最大の幅です。幅を 広い や フル にしたセクションは、これより広く表示されます。
左右の余白（PC）16〜80 px（4 刻み。初期値 48）PC でのページ左右の余白です。
左右の余白（スマホ）12〜32 px（2 刻み。初期値 20）スマホでのページ左右の余白です。
余白の密度（段階全体の倍率）詰めて並べる、ふつう、広めテーマ内のすべての余白を、まとめて大きく・小さくします。
セクション間の余白（PC）なし、極小、小、中、大、特大各セクションの上下の余白です。セクションごとに変えることもできます。
スマホでの余白（PC に対する割合）50、66、75、100スマホでは PC の余白の何 % にするかを指定します。
商品グリッドの間隔（PC）8〜48 px（4 刻み。初期値 24）PC での商品カード同士の間隔です。
商品グリッドの間隔（スマホ）4〜24 px（2 刻み。初期値 12）スマホでの商品カード同士の間隔です。

形（角丸・線・影）

設定範囲・選択肢内容
角丸（すべての部品）0〜32 px（2 刻み。初期値 4）カード、画像、入力欄、バッジ、ポップアップの角を丸めます。
部品ごとに角丸を変えるオン・オフパーツごとに角丸を指定します。カードの角丸（0〜40 px）、画像・動画の角丸（0〜40 px）、入力欄の角丸（0〜32 px）、バッジの角丸（0〜40 px）、ドロワー・ポップアップの角丸（0〜24 px）です。
線の太さ（罫線・枠）0〜4 px（初期値 1）テーマ全体の罫線と枠線の太さです。
影の種類なし、やわらか、くっきり影を付けます。種類を選んだら、影の強さ（0〜100 %）と、影を付ける場所（カードに影、ボタンに影、ドロワー・ポップアップに影）を指定します。

ボタン

設定範囲・選択肢内容
形四角、角丸、ピル角丸 の場合は 角丸（2〜24 px）も指定します。
主ボタンの型塗り、輪郭「カートに追加」など、主要な操作のボタンです。
副ボタンの型輪郭、塗り、文字それ以外の操作のボタンです。文字 は下線付きのリンクの見た目になります。
文字の書体本文、見出し、アクセントボタンに使う書体の役割です。
大文字化なし、大文字、小文字
大きさと線を細かく設定するオン・オフオンにすると、下のサイズの設定が表示されます。
高さ36〜64 px（2 刻み。初期値 48）
左右の余白12〜48 px（4 刻み。初期値 24）
線の太さ0〜4 px（初期値 1）
字間−5〜20 %
ボタンのアイコンなし、矢印、プラスボタンの文字の後ろに小さなアイコンを付けます。

入力欄とバリアント選択

設定範囲・選択肢内容
入力欄の型箱で囲む、下線フォームの入力欄の見た目です。
入力欄の高さ36〜64 px（2 刻み。初期値 48）
入力欄の線の太さ0〜3 px（初期値 1）
ラベルの位置上、浮かせる入力欄のラベルの位置です。
必須の見せ方＊印、「必須」の文字必須項目の示し方です。
バリアントのボタンの型輪郭、塗り商品ページのオプションのボタンの見た目です。
売り切れの見せ方取り消し線、フェード、隠す購入できないオプションの表示方法です。
スウォッチの形円、四角、角丸カラースウォッチの形です。
スウォッチの大きさ20〜48 px（2 刻み。初期値 28）
スウォッチにバリアントの画像を使うオン・オフカラースウォッチが設定されていないオプションでは、各バリアントの画像をスウォッチとして使います。

スウォッチの色と画像は、Shopify 管理画面の商品オプション（オプションの値ごとに設定した色や柄）から取得します。

商品カード

ストア内のすべての商品カードの体裁を決める設定です。商品カードを表示するセクションでは、画像の比率とホバーの動きをセクションごとに変えられます。

設定範囲・選択肢内容
カードの型枠なし、箱で囲む、枠なし＋商品名の縦の列、色の面＋品の横の札初期設定の 枠なし＋商品名の縦の列 は、画像の横の細い列に商品名を置きます（日本語と中国語のページでは縦書き）。商品名は省略せず、入りきらない場合は画像の下に回り込みます。色の面＋品の横の札 にすると、カード全体が淡い工芸の色の面になります。商品は面の下端に引いた細い床の線の上に立ち、その横に置いた白い小さな札に、商品名、作り手の行（販売元とメタフィールド custom.made_in）、価格を載せます。札はどの言語でも横書きのままで、幅の狭いカードでは商品の下に移ります。札の大きさは、コレクションの 商品の並びの見た目 ブロックと、検索ページの 検索の見た目 ブロックで調整します。
カードの配色配色箱で囲む を選んだときに表示されます。
画像の比率画像に合わせる、縦長、縦長（高め）、四角、横長、広いカード画像の縦横比です。
画像の収め方切り抜いて埋める、全体を表示切り抜いて埋める は枠いっぱいに表示するため、端が切れることがあります。全体を表示 は画像全体を表示します。
文字の揃え始まりの側、中央
ホバーの動きなし、2 枚目の画像、拡大、2 枚目の画像と拡大、ワイプ、持ち上げる、グレーからカラー、スライドショー、傾くマウスのカーソルがカードに乗ったときの動きです。
商品名の最大行数1、2、3、制限なし画像の下の商品名を、指定した行数で切ります。
ブランド名を表示、サブタイトルを表示、レビューの星を表示、スウォッチを表示、バッジを表示オン・オフサブタイトルを表示 は Shopify 標準の商品のサブタイトルのメタフィールドを、レビューの星を表示 はレビューアプリが保存した評価を読み込みます。
表示するスウォッチの数2〜10（初期値 5）
クイック追加なし、ボタン、アイコンカードにクイック追加の操作を付けます。
スマホでもクイック追加オン・オフ
クイックビューのボタンオン・オフクイックビューのリンクを付けます。JavaScript が動かない環境では商品ページが開きます。
クイックバイの出し方（PC）ドロワー、モーダルクイック追加とクイックビューの開き方です。

詳細 > カードを細かく設定する には、次の設定があります。

設定範囲・選択肢内容
在庫わずかを出す数（0で出さない）0〜20（初期値 0）在庫を管理している商品の在庫がこの数以下になると「残りわずか」と表示します。在庫数そのものは表示しません。0 にすると表示しません。
スマホで画像を横にスワイプオン・オフ各カードで、最大 5 枚の画像をスワイプして見られるようにします。
サイズの一覧を出すオプション名（カンマ区切り。空で出さない）文字例：Size, サイズ。最初に一致したオプションの値を、スウォッチの下に一覧表示します。
商品タイプを表示オン・オフ
比較のチェックオン・オフ各カードに比較のボタンを付けます。選んだ商品を並べて見せるには 商品比較 セクションを追加します。
商品名の大文字化なし、大文字
商品名の大きさ小、中、大
カウントダウンの日時のメタフィールド（空で出さない）文字終了日時を入れた商品のメタフィールド（namespace.key）を指定します。日時が未来の場合だけカウントダウンを表示します。
説明の抜粋の行数なし、1、2、3商品説明の冒頭を表示します。
情報の並び標準、価格を先に、詰めて並べる、誌面誌面 は、通し番号とコレクションのラベルを添えます。

コレクションと記事のカード

設定選択肢内容
コレクションカードの型下、重ねるコレクション名を画像の下に置くか、画像に重ねるかを選びます。
コレクションカードの画像比率画像に合わせる、縦長、縦長（高め）、四角、横長、広い
コレクションカードの配色配色
記事カードの画像比率画像に合わせる、縦長、縦長（高め）、四角、横長、広い
記事の日付を表示、記事の筆者を表示、記事の抜粋を表示オン・オフ記事カードに表示する項目です。

バッジと価格

設定範囲・選択肢内容
バッジの位置上・左、上・右、下・左、下・右
バッジの形四角、角丸、ピル
セールバッジの書き方セール、割合、金額
「新着」を出す日数（0で出さない）0〜60（初期値 0）公開からこの日数以内の商品に「新着」バッジを付けます。0 にすると表示しません。
タグで任意のバッジを出す接頭辞文字（初期値 badge:）商品に badge:限定 というタグを付けると「限定」バッジが表示されます。空欄にするとタグのバッジを表示しません。
1つの商品に出すバッジの数1〜4（初期値 2）
バッジの色を個別に設定するオン・オフセール、売り切れ、新着、タグのバッジの背景色と文字色を指定します。
元の価格の位置前、後
セール価格に色を付けるオン・オフ配色の セール価格の色 を使います。
価格が違うバリアントの見せ方¥1,000〜、¥1,000 – ¥2,400バリアントによって価格が異なる商品の、一覧での価格表示です（最低価格から、または価格帯）。

アイコン

設定選択肢
線の太さ細い、ふつう、大胆
大きさ小、中、大
線の端と角丸、四角
カートのアイコン手提げ袋、カート、かご

動き

動きをご覧ください。

カート

カートの種類、送料無料までの残り金額、ギフト包装などの設定は、カートをご覧ください。

検索をご覧ください。

SNS

各アカウントの URL を省略せずに入力します。対応しているのは Facebook、Instagram、X、TikTok、YouTube、Pinterest、Threads、LinkedIn、Snapchat、LINE、微博（Weibo）、小红书（Xiaohongshu）、bilibili、抖音（Douyin）です。WeChat はアカウントへのリンクがないため、代わりに WeChat の QR コード の画像と WeChat の ID を入力します。アイコンは、SNS のアイコンを出す をオンにしたセクションに表示されます。

SNS で共有したときの既定の画像 は、共有されたページに画像がなく、オンラインストア > 各種設定 でも画像を指定していない場合に使われます。

地域と言語

設定選択肢内容
通貨コードの表示表示しない、商品とカート、すべての場所価格の横に USD などの通貨コードを表示します。同じ記号を使う通貨で販売する場合に便利です。
国と言語の表示短く、フル切り替えメニューでの国名・言語名の表記です。
国の旗を出すオン・オフ
「税込」を価格の横に出すオン・オフ日本語のページで、価格の後ろに「税込」と表示します。価格が税込の場合のみ表示されます。
のし・掛け紙を選べるようにする（カート属性）オン・オフカートの のし（日本。注文全体） ブロックに、のしの選択肢を表示します。選択肢は のしの表書き（カンマ区切り） で設定します（カート）。
配送希望日時を選べるようにする（カート属性）オン・オフカートで配送希望日と時間帯を選べるようにします。最短のお届け（日後）（1〜14）、選べる期間（日）（7〜60）、時間帯（カンマ区切り） を設定します。
中文の字形の優先自動、簡体字、繁体字中国語のページで、簡体字と繁体字のどちらの端末書体を優先するかを選びます。
「券后价」を表示（メタフィールドの値）オン・オフ商品のメタフィールドから、クーポン適用後の価格を表示します。価格が 1 つだけの商品が対象です。
外部の動画を読み込まない軽量モードオン・オフYouTube・Vimeo の動画と地図の埋め込みを読み込まず、リンクとして表示します。これらのサービスが使えない地域向けです。

アクセシビリティとその他

設定範囲・選択肢内容
フォーカスの輪の太さ2〜4 px（初期値 2）キーボード操作中に、いまフォーカスしている場所を示す枠線の太さです。
フォーカスの輪の離れ0〜6 px（初期値 2）枠線と要素の間の空きです。
本文のリンクの下線いつも、ホバー色に頼らずリンクと分かるよう、いつも のままにしてください。
フッターに「動きを止める」ボタンオン・オフお客様がストアのアニメーションを止められるようにします。選んだ状態はブラウザに保存されます。
背景を暗くする強さ0〜80 %（5 刻み。初期値 40）ドロワーやポップアップの背後を暗くする度合いです。
ドロワーの幅（PC）320〜560 px（20 刻み。初期値 420）PC での、カートドロワーなど横から開くドロワーの幅です。
画像がないときの見せ方細い線、実線画像が未設定の場所に表示する線画の種類です。
画像がないときの代わりの画像画像画像が未設定の場所に、線画の代わりに表示する画像です。
リンクにマウスを乗せたら次のページを先読みオン・オフお客様がリンクにカーソルを合わせたり触れたりした時点で次のページの読み込みを始め、ページを速く開きます。カート、チェックアウト、アカウントへのリンクは先読みしません。
パンくずを出すオン・オフ商品、コレクション、ブログ、記事、固定ページ、検索ページの上部にパンくずリストを表示し、検索エンジン向けの構造化データも付けます。