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

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

はじめに

Kyoto を追加してから、ストアを公開できる状態に仕上げるまでの流れを説明します。

1. テーマを試す・追加する

  1. Shopify 管理画面で オンラインストア > テーマ を開きます。
  2. Shopify テーマストアの Kyoto のページで テーマを試す を選びます。Kyoto が未公開のテーマとしてテーマライブラリに追加されます。公開中のテーマはそのまま表示されます。
  3. Kyoto の横の … メニューから カスタマイズ を選ぶと、テーマエディターが開きます。
  4. テーマを購入すると、ライブラリにある Kyoto が製品版になります。準備ができたら公開してください。

購入前でも、自分のストアで Kyoto を無料で試せます。テーマの購入手続きは Shopify が行います。返金については、よくある質問の返金をご覧ください。

2. プリセット

Kyoto のプリセットは Kyoto の 1 種類です。プリセットは、配色・書体・レイアウトをひとまとめにしたものです。テーマを追加すると、ストアのレイアウト、配色、書体が Kyoto のデモストアと同じになります。

  • 書体：日本語は、見出しが明朝体の Shippori Mincho（しっぽり明朝）、本文がゴシック体の Zen Kaku Gothic New（Zen 角ゴシック New）です。英数字は、見出しが Lora、本文・価格・ボタンが Figtree です。どれも Shopify のフォントライブラリの書体です。
  • 色：白い背景に、商品の後ろに敷く淡い工芸の色、墨色の角ばったボタン、カートの数量などの小さな印に使う朱色を組み合わせています。
  • 動き：大きめの設定です。セクション、見出し、画像が画面に入るときに動きます。弱めたり止めたりするには テーマ設定 > 動き を使います（動き）。

3. デモストアの内容と、自分のストアの内容

デモストアは、実際の商品・写真・文章を入れた状態の Kyoto です。テーマを追加すると、同じセクションが同じ順番で入りますが、デモストアの写真、商品、コレクション、ブログ記事はコピーされません。Shopify には、デモストアの内容を移す機能がないためです。自分の画像・商品・コレクションを選ぶまでは、各セクションに線画のプレースホルダーが表示されます。

Kyoto のデモストアの最初の画面。「組み合う見出しの最初の画面」に、淡い桜色の面に立つ赤いだるま

追加した直後のホームページには、次のセクションがこの順番で入っています。

  1. 組み合う見出しの最初の画面
  2. マーキー
  3. コレクションのリスト（色の面）
  4. 商品の棚
  5. おすすめ商品 1つ
  6. 数字
  7. 重なるカード
  8. タイムライン
  9. ギフトの案内
  10. お客様の声
  11. ブログ記事
  12. 締めの帯

上から順に中身を入れ、使わないセクションは削除してください。どのセクションも非表示・移動・削除ができます。Kyoto の 100 種類のセクションから、ほかのセクションを追加することもできます（セクションとブロック）。

4. テーマエディターで最初に行う設定

次の順番で進めるとスムーズです。それぞれ詳しい説明のページにリンクしています。

  1. ロゴとファビコン：テーマ設定 > ロゴとファビコン で、ロゴ、暗い背景用の反転ロゴ、ファビコンを設定し、ロゴの高さ（PC） と ロゴの高さ（スマホ） を決めます。詳しくはテーマ設定へ。
  2. 配色：テーマ設定 > 配色 でカラーパレットをお店の色に変えると、12 種類の配色がそれに合わせて自動で変わります。詳しくは配色へ。
  3. 書体：テーマ設定 > 書体 で選びます。詳しくはテーマ設定へ。
  4. メニュー：オンラインストア > メニュー でメニューを作り、ヘッダーとフッターのセクションで選びます。詳しくはヘッダーとフッターへ。
  5. 送料無料：一定額以上で送料無料にしている場合は、テーマ設定 > カート の 送料無料になる金額（ストアの通貨。空で出さない） に、配送設定と同じ金額を入れます。詳しくはカートへ。
  6. ホームページ：各セクションに自分の画像、コレクション、商品を設定します。
  7. 商品ページ：エディター上部のページ選択から 商品 > デフォルトの商品 を開きます。詳しくは商品ページへ。
  8. メタフィールド（任意）：商品ごとに別名、作り手、素材、切り抜き画像、色の面を表示したい場合は、メタフィールドに載っているメタフィールドを作成します。
  9. 言語：複数の言語で販売する場合は言語をご覧ください。
  10. スマホでの表示を確認する：エディター上部のスマホのアイコンで表示を切り替えたうえで、実機でもプレビューを開いて確認します。

5. 推奨する画像サイズ

用途推奨
ヒーロー・スライドショー横 2400 px 以上の横長の画像。縦長のスマホ画面向けには、スマホ用の画像を別に設定します。
商品写真2000 × 2000 px 以上。すべての商品で縦横比をそろえます。色の面には、白背景で撮った写真が最もよくなじみます。
切り抜き画像背景が透明な .png で、長辺 1600 px 前後。詳しくは切り抜き画像へ。
コレクション画像1200 × 1200 px 以上。
ロゴ背景が透明な .png または .svg。高さは ロゴの高さ（PC） で決めた値の 2 倍以上。

Shopify はアップロードした画像から、スマホ・タブレット用の小さい画像を自動で作ります。大きな画像をアップロードしても、スマホでの表示が遅くなることはありません。

6. 公開する前に

  • ページの種類ごとにプレビューで確認します。ホーム、コレクション、バリアントのある商品、画像のない商品、カート、検索、ブログ記事、固定ページです。
  • アプリを多く使っている場合は、表示を速くするにはにも目を通してください。
  • サポートの範囲で、困ったときの問い合わせ先を確認しておきます。