ページ一覧14

Miyabi · Docs

はじめに / Getting started

日本語

Miyabi について

Miyabi(雅)は、日本で販売するファッションのブランドのために作った Shopify テーマです。見た目は雑誌のようなエディトリアル(欧文のセリフ体の大きな見出し、12列のグリッドに画像と文字を重ねる見開き)、ページの作りは国内のネットショップで見慣れた形(写真ごとの着用モデルの身長とサイズ、cm の実寸のサイズガイド、スタッフのコーディネート、お知らせ、お問い合わせの確認画面、配送日時の指定、ギフトラッピングとのし、税込の表示)に合わせています。

セクションの多くは、見出し・文章・ボタン・画像などのブロックを組み合わせて作ります(「04. セクション」)。

プリセット

プリセット 向いているお店 見た目
Miyabi 高級ファッション(1つのブランドのお店) 生成り・墨・砂色、セリフ体の見出し(Bodoni Moda)、トップの画像に重ねたヘッダー
Rin セレクトショップ(複数のブランドを扱うお店) 白と黒に赤の差し色、サンセリフ体(Inter)、商品カードにブランド名
Hagane ガジェットの D2C ブランド 黒の地に青の差し色、見出しは Space Grotesk、丸みのある角、正方形の商品画像

プリセットは、配色・書体と、トップページ・商品ページ・ヘッダー・フッターの初期の構成です。どれを選んでも、すべての機能とセクションを使えます。配色や書体は、あとから「テーマ設定」で変えられます。

プリセットごとの初期の構成

  • Miyabi: トップに画像のバナー(ヘッダーを重ねる)・見開き・ルックから買う・ランキング・スタッフのコーディネート・お知らせなど。商品ページにサイズ感・着用モデル・アップセル
  • Rin: トップにスライドショー・ブランド名の流れる文字・カテゴリーのリンク・ランキング・プロモーションのグリッド・コレクションのタブ・ブランドの一覧など。タブで切り替えるメガメニューと、スマホの下部メニュー
  • Hagane: トップに製品の画像のバナー・スペックの数値・商品を大きく見せる・クラウドファンディングの実績・比較表・セット購入など。商品ページにまとめ買い割引・お届け日の目安・対応機種・スペック表・保証と取扱説明書。商品カードに比較のチェックボックス

テーマを追加する

  1. テーマストアの Miyabi のページでプリセットを選び、テーマを試すか購入する
  2. 管理画面の「オンラインストア > テーマ」に Miyabi が追加される
  3. 「カスタマイズ」で中身を整え、確かめてから「公開」する

公開するまでは、今のテーマのままお店が表示されます。

最初に整えるもの

  • ロゴと配色(テーマ設定)。トップの画像にヘッダーを重ねる場合は、「画像の上のロゴ」に明るい色のロゴも入れます
  • メニュー(管理画面のメニューで作り、ヘッダーとフッターで選ぶ)。3階層目まで作ると、大きい画面でメガメニューになります
  • 告知バー(ヘッダーの上の帯)
  • トップの画像のバナー(画像・見出し・ボタン)
  • サイズガイドのページ(cm の実寸の表を書いたページを作り、商品ページの「バリエーションの選択」で選ぶ)
  • 着用モデルの身長とサイズ(「09. 商品の情報を足す」)
  • お知らせ用のブログ(「お知らせ」などの名前でブログを作り、トップの「お知らせ」セクションで選ぶ)
  • お問い合わせのページ(ページを作り、テンプレートに「contact」を選ぶ)
  • 休業日(テーマ設定の「日本向け」。お届け日の目安・配送日時の指定・営業日カレンダーに使います)
  • カート(テーマ設定の「カート」): 送料無料の金額(配送の設定と同じ額にする)と、ギフトラッピング・のし・配送日時の指定を使うかどうか

English

About Miyabi

Miyabi is a Shopify theme made for fashion brands that sell in Japan. Its look is editorial, like a magazine: large serif headings and spreads that place images and text on a 12-column grid and let them overlap. Its pages follow the patterns that Japanese shoppers expect: the model's height and size on each photo, a size guide with measurements in centimeters, staff styling, store news, a contact form with a review step, delivery date selection, gift wrapping and noshi, and tax-included prices.

Most sections are built from blocks such as headings, text, buttons, and images (see 04. Sections).

Presets

Preset Made for Look
Miyabi Luxury fashion (stores that sell one brand) Off-white, ink, and sand, serif headings (Bodoni Moda), and a header over the image at the top of the home page
Rin Select shops (stores that sell several brands) White and black with a red accent, sans-serif type (Inter), and brand names on product cards
Hagane Gadget brands that sell direct Black with a blue accent, Space Grotesk headings, rounded corners, and square product images

A preset sets the starting colors and typefaces, and the starting layout of the home page, product pages, header, and footer. Every preset includes all of the theme's features and sections, and you can change the colors and typefaces later in theme settings.

What each preset starts with

  • Miyabi: an image banner with the header over it, an editorial spread, shop the look, a ranking, staff styling, and store news on the home page. Product pages show the fit scale, model information, and an upsell product
  • Rin: a slideshow, scrolling brand names, category links, a ranking, a promotion grid, collection tabs, and a brand index on the home page. A tabbed mega menu and a bottom navigation bar on phones
  • Hagane: a product image banner, spec highlights, a featured product, crowdfunding results, a comparison table, and a bundle on the home page. Product pages show quantity discounts, a delivery estimate, compatible models, specifications, and the warranty and manual. Product cards have a compare checkbox

Add the theme

  1. On the Miyabi page in the Shopify Theme Store, choose a preset, then try or buy the theme.
  2. Miyabi is added to Online Store > Themes in your Shopify admin.
  3. Click Customize to set up your content, check it, and then publish.

Your store keeps showing your current theme until you publish Miyabi.

What to set up first

  • Logo and colors (theme settings). If the header sits over the image at the top of the home page, also add a light version of your logo in Logo for images
  • Menus (create them in your admin's menu settings, then select them in the header and footer). Menus with a third level open as mega menus on large screens
  • Announcement bar (the strip above the header)
  • Image banner on the home page (image, heading, and button)
  • A size guide page (create a page with a table of measurements in centimeters, then select it in the Variant picker block on product pages)
  • The model's height and size (see 09. Adding product details)
  • A blog for store news (for example, a blog named News, selected in the News section on the home page)
  • A contact page (create a page and assign the contact template)
  • Closed days (Japan in theme settings). They're used by the delivery estimate, the delivery date picker, and the business calendar
  • Cart (Cart in theme settings): the free shipping minimum (match your shipping settings), and whether to offer gift wrapping, noshi, and delivery dates