ページ一覧14

Miyabi · Docs

商品ページ / Product page

日本語

「商品情報」セクションのブロックを並べ替えて作ります。同じブロックは「商品を大きく見せる」セクションでも使えます。

  • セクションの設定: パソコンでの画像の並べ方(縦に並べる・2列・サムネイル付きのカルーセル)、1枚目を大きく出す(2列のとき)、画像の幅(大きめ・半分)、画像の位置(左・右)、画像を大きく見られるようにする、画像に着用モデルの身長とサイズを出す、選んだ色の画像だけを出す、スクロールしても商品情報を出したままにする、スクロールしたらカートに入れるバーを出す、パンくずリスト
  • スマホでは、画像を横にスワイプして見ます。動画と3Dモデルも出せます
  • ブロック: 商品名・価格・評価・バリエーションの選択・サイズ感・着用モデル・購入ボタン・入荷のお知らせ・在庫の状況・店舗受け取り・商品の説明・開閉できる行・アップセル・一緒に買う商品・シェア・ギフトの設定・お届け日の目安・まとめ買い割引・割引コード・カウントダウン・入力欄・スペック表・対応機種・保証と取扱説明書。見出し・文章・画像などのブロックとアプリのブロックも置けます

商品名・価格・評価

  • 商品名: 大きさ、見出しのレベル、ブランド名を出す、品番を出す
  • 価格: セールのときは元の価格を横線で、単価を設定した商品は単価も出します。テーマ設定の「日本向け」で「価格の横に『税込』を出す」がオンなら、「(税込)」か「(税別)」が付きます。Shop Pay の分割払いの案内と、補足(送料の案内など)を出せます
  • 評価: レビューアプリが入れた評価から星と件数を出します(「10. アプリとの連携」)。星を押したときの移動先は「リンク」で決めます(既定は #reviews)

バリエーションの選択

  • ボタンかプルダウン。色のオプション(テーマ設定の「色のオプション名」)は、プルダウンにしてもボタンで出し、Shopify で色見本(スウォッチ)を設定した色は色の丸で出します
  • 選ぶと、価格・在庫・画像・ページの URL が切り替わります。「選んだ色の画像だけを出す」をオンにすると、選んだ色の画像だけが並びます(色ごとのバリエーション画像から、次の色のバリエーション画像の手前までをその色の画像として扱い、最初のバリエーション画像より前の画像はどの色でも出します)
  • 色違いの商品: 色ごとに別の商品にしているときは、商品のメタフィールド(既定は custom.siblings)でつなぐと、それぞれの商品の画像が並び、押すとその商品に移ります
  • サイズガイド: 「サイズガイドのページ」を選ぶと、サイズのオプション(テーマ設定の「サイズのオプション名」)の横に「サイズガイド」が出て、ページの内容が画面の横から開きます。cm の実寸の表は、そのページの本文に作ります。商品ごとに変えるときは商品のメタフィールド custom.size_guide

着用モデルとサイズ感

  • 写真ごとの身長とサイズ: 写真ごとにモデルの身長と着用サイズを入れると、その写真の左下に「モデル身長 168cm / Sサイズ着用」のように出ます。セクションの「画像に着用モデルの身長とサイズを出す」でオン・オフします
  • 着用モデル: 商品のメタフィールド(既定は custom.model_info)に1行に1人ずつ書いた内容(例: 身長 168cm・S サイズ着用)を、商品情報の中に出します
  • サイズ感: 商品のメタフィールド(既定は custom.fit)に1(小さめ)〜5(大きめ)の数を入れると、5段階の目盛りで出します。見出しと1・3・5の文言は変えられます
  • メタフィールドの作り方は「09. 商品の情報を足す」

購入ボタン

  • 数量と、すぐに購入手続きに進むボタン(Shop Pay など)を出せます
  • 売り切れのバリエーションでは「売り切れ」になり、押せません
  • ギフトカードの商品には、「ギフトとして贈る」と、贈る相手のメールアドレス・お名前・メッセージ・送る日の欄が出ます
  • 「スクロールしたらカートに入れるバーを出す」をオンにすると、ボタンが見えなくなったときに画面の下にバーが出ます

在庫の状況・入荷のお知らせ

  • 在庫の状況: 在庫あり/残りわずか(「残りわずかとする数」以下)/予約受付中/在庫切れ。「残りの数を出す」をオンにすると「残り3点」のように実際の在庫数を出します。在庫を管理していない商品にも「在庫あり」を出せます
  • 入荷のお知らせ: 選んだバリエーションが売り切れのときに、メールアドレスの欄を出します。お申し込みは、お問い合わせフォームのメールとしてお店に届きます(件名「入荷のお知らせ」。商品・バリエーション・品番・URL 付き)。入荷したら、お店からお客様に連絡してください。見出し・文章・ボタンの文字・送信後のメッセージを変えられ、プライバシーポリシーへの同意も求められます

ギフトの設定

  • この商品に、ギフトラッピング・のし(種類と名入れ)・メッセージカードの希望を付けられます。のしの種類はテーマ設定の「カート」で決めます(空なら 御祝・御礼・内祝・御中元・御歳暮・粗品)
  • 選んだ内容は、カートと注文の商品の欄に「ギフトラッピング」「のし」「のしの名入れ」「メッセージカード」として入ります。管理画面の注文の詳細で確かめられます
  • メッセージの文字数の上限、補足(ラッピングの料金など)、開閉できる行にする
  • テーマは料金を足しません。有料にするときは、ラッピング用の商品を用意するなどしてください
  • 注文全体のギフトの設定は、カートにも出せます(「07. カート」)

お届け日の目安

  • 発送日とお届け日の目安を、営業日だけを数えて出します。休業日はテーマ設定の「日本向け」の設定を使います。売り切れ・予約受付中・配送の無い商品では出ません
  • 受付の締め時間(この時刻より後のご注文は翌営業日の扱い。ストアのタイムゾーンで判定)、発送までの営業日数、お届けまでの最短と最長の日数
  • 表示する内容(発送日とお届け日・発送日だけ・お届け日だけ)と文言を変えられます。文言の [date] は日付、[latest] は最も遅いお届け日、[time] は締め時間に置き換わります
  • 補足(お届けに日数がかかる地域など)

まとめ買い割引・割引コード・カウントダウン

  • まとめ買い割引: 「数量 | 割引」(例: 2 | 5%OFF)を1行ずつ入れると、表で案内します。割引そのものは管理画面の「ディスカウント」で自動割引として作ってください
  • 割引コード: コードと文章を出し、お客様がコピーできます。コードは管理画面の「ディスカウント」で作ります
  • カウントダウン: 終了日時(日本時間で「2026-12-31 23:59」の形)か、商品のメタフィールド(既定は custom.sale_end)の日時までの残り時間を出し、終わると消えます

入力欄

  • 商品のフォームに入力欄を足します。名入れや刻印の文字などに使えます
  • 欄の種類: 1行のテキスト・複数行のテキスト・プルダウン・チェックボックス・ファイルのアップロード(画像・画像とPDF・すべてのファイル)
  • 見出しが注文の項目名になり、お客様の入力内容と一緒にカートと注文の商品の欄に入ります
  • 必須にする、最大の文字数、入力例、補足の説明

開閉できる行・商品の説明

  • 開閉できる行: 見出し・アイコン・文章・ページの中身。文章に商品のメタフィールドをつなぐと商品ごとに違う文章を、ページを選ぶとすべての商品で同じ文を出せます。素材やお手入れ、配送と返品の案内などに
  • 商品の説明: 開閉できる行にもできます

アップセル・一緒に買う商品

  • アップセル: この商品と一緒に買ってほしい商品を1つ出し、その場でカートに入れられます。商品ごとに変えるときは商品のメタフィールド(既定は custom.upsell)。その商品自身のページと、売り切れのときは出ません
  • 一緒に買う商品: Shopify の Search & Discovery アプリで「補完商品」を設定した商品に出ます

店舗受け取り・シェア

  • 店舗受け取り: 選んだバリエーションを受け取れる店舗を出します。「設定 > 配送と配達」で店舗受け取りをオンにしてください
  • シェア: 端末の共有メニューを開きます。使えない端末ではリンクをコピーします

ガジェット向けのブロック

  • スペック表: 商品のメタフィールド(既定は custom.specs)に「項目: 内容」を1行ずつ書くと、表で出します。コロンの無い行はグループの見出しになります。値が無い商品は、ブロックの「行」に書いた内容を出します。開閉できる行にもできます
  • 対応機種: 商品のメタフィールド(既定は custom.compatibility)か、ブロックの「機種」に1行に1つ。「最初に出す機種の数」を超えた分は、ボタンで開きます
  • 保証と取扱説明書: 保証の文章(商品のメタフィールド custom.warranty があればそちら)と、取扱説明書のリンク(「コンテンツ > ファイル」に上げた PDF など。商品のメタフィールド custom.manual があればそちら)

予約販売

  • 在庫を管理しているバリエーションで、在庫切れでも販売を続ける設定にすると、在庫が0以下になったときにボタンが「予約する」、在庫の状況が「予約受付中」になります
  • 商品のメタフィールド custom.preorder_note に入れた文(例: 11月中旬より順次お届けします)を、ボタンの下に出します
  • テンプレート「preorder」には、予約の締め切りまでのカウントダウン(商品のメタフィールド custom.preorder_end)と、予約の案内の欄があります

商品のテンプレート

商品の編集画面で、テンプレートを選びます。

テンプレート 中身
(標準) プリセットに合わせた商品ページ
gadget ガジェット向け。まとめ買い割引・対応機種・スペック表・保証と取扱説明書のブロックと、スペックの数値・比較表・クラウドファンディングの実績・よくある質問
landing 1つの商品を長く紹介するページ。リッチテキスト・画像と文章・複数の列・お客様の声・よくある質問・メルマガ登録
preorder 予約販売。締め切りまでのカウントダウン・予約の案内・よくある質問

English

Build the page by arranging the blocks in the Product information section. The same blocks also work in the Featured product section.

  • Section settings: desktop media layout (stacked, two columns, or carousel with thumbnails), show the first image large (two columns), media width (large or half), media position (left or right), open images full screen, show model height and size on images, show only the selected color's media, keep product information in view while scrolling, show the add-to-cart bar after scrolling, and breadcrumbs
  • On phones, shoppers swipe through the media. Videos and 3D models are supported
  • Blocks: product title, price, rating, variant picker, fit scale, model information, buy buttons, back in stock request, inventory status, pickup availability, description, collapsible row, upsell product, complementary products, share, gift options, delivery estimate, quantity discounts, discount code, countdown, custom field, specifications, compatible models, and warranty and manual. You can also add blocks such as headings, text, and images, and app blocks

Product title, price, and rating

  • Product title: size, heading level, show vendor, and show SKU
  • Price: sale prices show the original price struck through, and unit prices appear for products that have them. With Show tax included note next to prices on (Japan in theme settings), (tax incl.) or (tax excl.) follows the price. The block can show Shop Pay Installments and a note (for example, about shipping)
  • Rating: stars and the review count from the rating that your review app fills in (see 10. Working with apps). Link sets where clicking the stars goes (default: #reviews)

Variant picker

  • Buttons or dropdowns. Color options (Color option names in theme settings) always show as buttons, and colors that have a swatch set in Shopify show as color swatches
  • Choosing a variant updates the price, stock, media, and page URL. With Show only the selected color's media on, only that color's media appear. Each color's variant image and the media after it, up to the next color's variant image, belong to that color, and media before the first variant image show for every color
  • Other colors: if you sell each color as a separate product, link them with a product metafield (default: custom.siblings). Their images appear in a row, and each one opens that product
  • Size guide: choose a size guide page, and a Size guide link appears next to the size option (Size option names in theme settings). The page content opens in a panel from the side. Write the table of measurements in centimeters in that page. To use a different guide for a product, use the product metafield custom.size_guide

Model information and fit

  • Height and size on each photo: enter the model's height and the size worn for each photo, and they appear at the lower left of that photo, like Model 168 cm / wearing size S. Turn this on or off with Show model height and size on images in the section
  • Model information: shows the lines in a product metafield (default: custom.model_info), one model per line (for example, 168 cm, wearing size S), in the product information
  • Fit scale: enter a number from 1 (runs small) to 5 (runs large) in a product metafield (default: custom.fit) to show a five-step scale. You can change the heading and the labels for 1, 3, and 5
  • To set up these metafields, see 09. Adding product details

Buy buttons

  • A quantity selector and a button that goes straight to checkout (such as Shop Pay)
  • For sold-out variants, the button reads Sold out and can't be pressed
  • Gift card products show Send as a gift to someone, with fields for the recipient's email, name, message, and send date
  • With Show the add-to-cart bar after scrolling on, a bar appears at the bottom of the screen when the button is out of view

Inventory status and back in stock requests

  • Inventory status: in stock, low stock (at or below Low stock below), pre-order, or out of stock. Turn on Show the number left to show your actual inventory, such as Only 3 left. You can also show In stock for products whose inventory isn't tracked
  • Back in stock request: when the selected variant is sold out, an email field appears. Requests arrive as contact form emails (subject: Back in stock request, with the product, variant, SKU, and URL). When the item is back, contact the customer yourself. You can change the heading, text, button label, and message after sending, and ask for agreement to the privacy policy

Gift options

  • Shoppers can ask for gift wrapping, noshi (a type and a name to print), and a message card for this item. Set the noshi types under Cart in theme settings. If the list is empty, common types are used (on Japanese pages: 御祝, 御礼, 内祝, 御中元, 御歳暮, and 粗品)
  • Their choices are added to the cart and order line items (on Japanese pages as ギフトラッピング, のし, のしの名入れ, and メッセージカード). You can see them in the order details in your Shopify admin
  • Message length limit, a note (for example, the wrapping fee), and showing the options in a collapsible row
  • The theme doesn't add a fee. If you charge for wrapping, offer it as a separate product, for example
  • Gift options for the whole order can also be shown in the cart (see 07. Cart)

Delivery estimate

  • Shows when the item ships and when it arrives, counting business days only. Closed days come from Japan in theme settings. It doesn't appear for sold-out or pre-order variants, or for products that don't need shipping
  • Order cut-off time (orders after this time count as the next business day, in your store's time zone), business days to ship, and the shortest and longest time in transit
  • You can choose what to show (shipping and delivery, shipping only, or delivery only) and change the texts. In the texts, [date] is the date, [latest] is the latest delivery date, and [time] is the cut-off time
  • A note, for example about areas that take longer

Quantity discounts, discount code, and countdown

  • Quantity discounts: enter one tier per line as quantity | discount (for example, 2 | 5% off) to show them in a table. Create the discounts themselves as automatic discounts in Discounts in your Shopify admin
  • Discount code: shows a code with text, and shoppers can copy the code. Create the code in Discounts
  • Countdown: shows the time left until an end date and time (Japan time, as 2026-12-31 23:59) or the date in a product metafield (default: custom.sale_end), and disappears when it ends

Custom field

  • Adds a field to the product form, for example for a name or text to engrave
  • Field types: text, paragraph, dropdown, checkbox, and file upload (images, images and PDF, or any file)
  • The label becomes the field name on the order, and the shopper's entry is added to the cart and order line items
  • Required, maximum characters, placeholder, and help text

Collapsible row and description

  • Collapsible row: heading, icon, text, and page content. Connect a product metafield to the text to show different text for each product, or choose a page to show the same text on every product. Use it for materials and care, shipping and returns, and similar notes
  • Description: can also be shown in a collapsible row

Upsell product and complementary products

  • Upsell product: shows one product to add with this one, and shoppers can add it to the cart right there. To choose a different product for each product, use a product metafield (default: custom.upsell). It's hidden on that product's own page and when it's sold out
  • Complementary products: shown for products that have complementary products set up in Shopify's Search & Discovery app

Pickup availability and share

  • Pickup availability: shows the stores where the selected variant can be picked up. Turn on local pickup in Settings > Shipping and delivery
  • Share: opens the device's share menu. On devices without one, it copies the link

Blocks for gadgets

  • Specifications: write one Name: Value line per row in a product metafield (default: custom.specs) to show a table. A line without a colon starts a group. For products without a value, the block's Rows are shown. It can be shown in a collapsible row
  • Compatible models: one model per line in a product metafield (default: custom.compatibility) or in the block's Models. Models beyond Models shown at first open with a button
  • Warranty and manual: warranty text (the product metafield custom.warranty is used when it has a value) and a link to the instruction manual (for example, a PDF uploaded in Content > Files; the product metafield custom.manual is used when it has a value)

Pre-orders

  • For a variant whose inventory is tracked and that continues selling when out of stock, the button reads Pre-order and the inventory status shows Pre-order once stock is at or below zero
  • Text in the product metafield custom.preorder_note (for example, Ships from mid-November) appears below the button
  • The preorder template includes a countdown to the end of pre-orders (the product metafield custom.preorder_end) and room for your pre-order terms

Product templates

Choose a template on the product's page in your Shopify admin.

Template What it includes
(Default) The product page for your preset
gadget For gadgets. Quantity discounts, compatible models, specifications, and warranty and manual blocks, plus spec highlights, a comparison table, crowdfunding results, and an FAQ
landing A long page about one product, with rich text, image with text, multicolumn, testimonials, an FAQ, and an email signup
preorder For pre-orders, with a countdown to the end of pre-orders, pre-order terms, and an FAQ