日本語
セクションはテーマエディターの「セクションを追加」から入れ、ドラッグで並べ替えます。トップだけでなく、ほかのページにも置けます。「セクションを追加」では、下の区分ごとに並んでいます。
ほとんどのセクションに、配色・上の余白・下の余白の設定があります。
ブロックで組み立てる
多くのセクションは、見出しや文章を設定の欄ではなくブロックで持ちます。セクションの「ブロックを追加」から、次のブロックを好きな順に置けます。
| ブロック |
できること |
| 見出し |
大きさ（特大〜極小・ラベル）、見出しのレベル、書体（見出し・本文）、斜体、色（文字・控えめ・差し色）、揃え、最大の幅。「小見出し」「斜体の小見出し」の形でも追加できる |
| 文章 |
リッチテキスト。大きさ・色・揃え・最大の幅 |
| ボタン |
塗り・線・下線のリンク、大きさ、幅いっぱい、矢印、新しいタブで開く。「文字のリンク」の形でも追加できる |
| 画像 |
パソコンとスマホで別の画像、比率、パソコンでの幅、リンク、キャプション、先に読み込む |
| 動画 |
Shopify に上げた動画か YouTube・Vimeo。表紙の画像、形（16:9・4:5・1:1・9:16）、音を消して自動で再生（Shopify の動画だけ） |
| グループ |
ブロックをまとめる入れ物。縦・横の並び、揃え、間隔、高さ、内側の余白、配色、背景の画像、グループ全体のリンク。「見出しとリンク」の形でも追加できる |
| 空き・罫線 |
空き（パソコンとスマホで別の高さ）と罫線（幅・太さ・色） |
| アイコン |
アイコン（配送・ギフト・返品など15種類か画像）と短い文 |
| カスタム Liquid |
コードを入れる |
バナー
| セクション |
できること |
| 画像のバナー |
画像か背景の動画（音なしで繰り返し）に、見出し・文章・ボタンなどのブロックを重ねる。スマホの画像、高さ（パソコン・スマホ別）、文字の位置（9か所）、画像の暗さ、文字を面の上に出す、バナー全体のリンク。追加するときは「画像のヒーロー」「画像の上に文字のバナー」「動画のヒーロー」から選ぶ |
| スライドショー |
8枚まで。スライドごとに画像か背景の動画、スマホの画像、文字の位置、画像の暗さ、文字の配色、スライド全体のリンク。自動の切り替えと間隔、矢印、位置の表示（番号・線・進み具合のバー）。自動で切り替えるときや動画があるときは、一時停止のボタンが付く |
| プロモーションのグリッド |
画像と文字のタイルを、大きさ（小・中・大・全幅）を組み合わせて並べる。タイルごとに小見出し・見出し・文章・ボタン・配色・文字の位置 |
| カウントダウン |
決めた日時（日本時間）までの残り時間。終わったらセクションを隠せる。背景の画像、縦か横の並び |
| 割引コードの帯 |
文章と割引コード（コピーのボタン付き）を出す帯。コードは管理画面の「ディスカウント」で作る |
商品
| セクション |
できること |
| 商品の一覧 |
コレクションの商品をグリッドかカルーセルで。表示する数、列の数（パソコン・スマホ）。順位の番号を出し、1位を大きく出せる（「ランキング」で追加すると最初からオン）。順位はコレクションの並び順 |
| 商品を大きく見せる |
1つの商品を、商品ページと同じブロック（商品名・価格・バリエーション・購入ボタンなど）で見せる。画像の幅と位置、選んだ色の画像だけを出す |
| コレクションのタブ |
6つまでのコレクションをタブで切り替えて商品を並べる。タブの文字、コレクションへのリンク |
| ルックから買う |
コーディネートの写真に番号か点（ホットスポット）を置き、横に着用した商品の一覧（カートに入れる・オプションを選ぶ）。ルックは8つまで。スマホの画像には別の位置を指定できる |
| 動画から買う |
動画を並べ、動画ごとに1つの商品とキャプション。動画は画面に入っている間だけ音なしで再生し、動きを減らす設定の端末では自動で再生しない |
| セット購入 |
選んだ商品の合計を出し、まとめてカートに入れる。種類のある商品はそれぞれ選べる。割引は管理画面の「ディスカウント」で自動割引として作る |
| 関連する商品 |
商品ページで、Shopify が販売の記録と商品の情報から選んだ商品を並べる |
| 最近見た商品 |
お客様が以前に開いた商品（お客様のブラウザに保存） |
コレクション
| セクション |
できること |
| コレクションの一覧 |
コレクションをグリッド・カルーセル・コラージュで。コラージュではコレクションごとに大きさ（標準・横長・縦長・大）。名前を画像の下か画像の上に |
| コレクションのリンク |
コレクション名を大きな文字で並べ、カーソルを合わせたリンクの画像を横に出す。商品の数 |
| ブランドの一覧 |
商品の販売元（ブランド）をA〜Z順に並べ、ブランドごとの商品の一覧にリンクする。頭文字のリンク、日本語の名前を五十音の行で分ける、検索の欄 |
文章
| セクション |
できること |
| リッチテキスト |
見出し・文章・ボタンなどのブロックを自由に組む |
| 複数の列 |
画像かアイコンに見出しと文章を添えた列（列は12個まで）。スマホで横にスワイプ、列の間の罫線。「アイコンの列」の形でも追加できる |
| アイコンの帯 |
アイコンと短い文を横に並べる帯（送料無料・ギフト・返品など）。スマホでは2列・1列・横にスクロール |
| 流れる文字 |
文字（前に小さな画像も置ける）が横に流れる帯。速さ・向き・区切り・マウスを重ねたら止める |
| よくある質問 |
質問と答えを開閉で。答えにページの内容を使える。見出しを上か横に。よくある質問の構造化データ（1ページに1つ） |
| 掲載メディア |
雑誌などの記事からの引用を、媒体のロゴのタブで切り替える。自動で切り替え |
| 画像入りの見出し |
文字と小さな画像のブロックを順に並べて、1つの大きな見出しを作る |
| ページの内容 |
選んだページのタイトルと本文 |
画像と動画
| セクション |
できること |
| 動画 |
Shopify に上げた動画か YouTube・Vimeo の URL。表紙の画像、形（16:9・21:9・4:5・1:1） |
| ビフォーアフター |
2枚の画像を、境界を動かして見比べる。ラベル、境界の最初の位置 |
| 画像と動画のグリッド |
タイルごとに幅（12列のうちの列の数）と高さ（行の数）を決めて、画像や動画を並べる。キャプション |
| SNS の投稿 |
自分で選んだ画像を投稿へのリンク付きで並べる（SNS からは何も読み込まない）。アカウント名とフォローのボタン |
ブランドの紹介
| セクション |
できること |
| 見開き |
12列（スマホは6列）のグリッドに要素を置き、同じ行の要素を重ねる雑誌のような版面。要素ごとに始まりの列・幅・行（パソコンとスマホで別々）、上下のずれ、縦の位置、重なりの順、内側の余白、配色を決める。「段違いの3列」の形でも追加できる |
| 画像と文章 |
画像の横に見出し・文章・ボタン。画像の幅と位置、縦の位置、文章を画像に重ねる |
| お客様の声 |
声・お名前・補足・星・写真・商品へのリンク。カルーセルかグリッド。「大きく見せるお客様の声」の形でも追加できる |
| ロゴの一覧 |
ロゴをグリッドか流れる1列で。白黒で出せる |
| ルックブック |
1ページに1つのルック（写真1〜2枚・キャプション・着用した商品へのリンク）を、全面・2枚並び・ずらしで続ける。ルックの番号、価格 |
| スクロールで読むストーリー |
章ごとに画像と文章。パソコンでは読んでいる章の画像を文章の横に固定し、スマホでは章ごとに画像を上に出す |
| 沿革 |
年・見出し・文章・画像のできごとを並べる |
| ブログ記事の一覧 |
ブログの新しい記事をカードで。画像・日付・カテゴリー・抜粋・執筆者 |
| イベント |
ポップアップストアやイベントの一覧。日付・時間・会場・住所・ラベル（開催予定など）・地図のリンク |
| 店舗の一覧 |
店舗名・住所・営業時間・電話番号・地図のリンク |
| 地図 |
住所と「Google マップで開く」のボタン、画像。地図は埋め込まない |
フォーム
| セクション |
できること |
| メルマガ登録 |
メールアドレスの登録欄。登録した方は、メール配信に同意したお客様として顧客の一覧に入る。背景の画像 |
| お問い合わせフォーム |
入力・確認・完了の3段階のフォーム（「08. お問い合わせ・お知らせ・ブログ」） |
| ポップアップ |
メルマガ登録・割引コード・ボタンのリンクのどれか。出すページと端末、開くきっかけ（時間がたったら・ページを離れようとしたら・スクロールしたら）、もう一度出すまでの日数、閉じたあとの小さなタブ |
| 年齢確認 |
初めて来たお客様に年齢の確認をお願いする。断ったときの移動先かメッセージ、もう一度確認するまでの日数 |
ポップアップと年齢確認は、フッターか、各テンプレート（トップページや商品ページなど）に置きます。テーマエディターでは、そのセクションを選んでいる間だけ表示されます。
レイアウト
| セクション |
できること |
| スマホの下部メニュー |
スマホの画面の下に固定するメニュー（「03. ヘッダー・フッター」） |
| カスタム Liquid |
コードを入れる |
日本の店向け
| セクション |
できること |
| お知らせ |
ブログの記事を日付とカテゴリー付きのお知らせとして並べる（「08. お問い合わせ・お知らせ・ブログ」） |
| スタッフのコーディネート |
スタッフの写真・名前・身長・店舗・コメントと、着用アイテムとそのサイズ。カルーセルかグリッド |
| 営業日カレンダー |
今月から1〜3か月分のカレンダーに休業日を出す。休業日はテーマ設定の「日本向け」。週の始まり（日曜・月曜）、補足 |
| サイズ表 |
表を1行ずつカンマ区切りで入れる（表計算ソフトから貼り付けても使える）か、ページの内容を出す。商品ページでは商品のメタフィールド custom.size_table があればそれを使う。単位（cm・インチ・出さない）、採寸方法の画像 |
ガジェット
| セクション |
できること |
| スペックの数値 |
製品の特長を大きな数字で（数値・単位・項目名・キャプション・バー）。8つまで |
| 比較表 |
選んだ商品を、メタフィールドの項目で並べて比べる。違いを強調、価格、カートに入れるボタン |
| クラウドファンディングの実績 |
支援総額・サポーター数・達成率（バー）、サイトの名前とロゴ、プロジェクトのリンク、サポーターの声 |
English
Add sections with Add section in the theme editor and drag them to reorder. You can use these sections on other pages as well as the home page. In Add section, they're grouped into the categories below.
Most sections have color scheme, top spacing, and bottom spacing settings.
Building with blocks
Many sections keep their headings and text in blocks instead of settings. Use Add block in a section to place these blocks in any order.
| Block |
What it does |
| Heading |
Size (display to extra small, or label), heading level, font (heading or body), italic, color (text, secondary, or accent), alignment, and maximum width. Also available as Kicker and Italic subheading |
| Text |
Rich text with size, color, alignment, and maximum width |
| Button |
Solid, outline, or underlined link, with size, full width, an arrow, and opening in a new tab. Also available as Text link |
| Image |
Separate images for desktop and phones, ratio, width on desktop, link, caption, and load first |
| Video |
A video uploaded to Shopify, or a YouTube or Vimeo URL, with a cover image, a shape (16:9, 4:5, 1:1, or 9:16), and muted autoplay (Shopify videos only) |
| Group |
Holds other blocks, with vertical or horizontal layout, alignment, spacing, height, padding, color scheme, background image, and a link for the whole group. Also available as Heading with link |
| Spacer and divider |
Empty space (with separate heights for phones) and a line (width, thickness, and color) |
| Icon |
An icon (15 choices, such as delivery, gift, and returns, or your own image) with short text |
| Custom Liquid |
Add your own code |
Banners
| Section |
What it does |
| Image banner |
Headings, text, buttons, and other blocks over an image or a background video (muted and looping). Image on phones, height (separate for phones), content position (nine positions), overlay opacity, text on a panel, and a link for the whole banner. When you add it, choose Image hero, Image with text overlay, or Video hero |
| Slideshow |
Up to eight slides. Each slide has an image or background video, an image on phones, content position, overlay opacity, text colors, and a link for the whole slide. Autoplay with an interval, arrows, and position markers (numbers, lines, or a progress bar). A pause button appears when slides change automatically or a slide has a video |
| Promotion grid |
Image and text tiles in a mix of sizes (small, medium, large, and full width). Each tile has a subheading, heading, text, button, color scheme, and content position |
| Countdown |
The time left until a date and time you set (Japan time). It can hide when the countdown ends. Background image, stacked or side by side |
| Discount code bar |
A strip with text and a discount code that shoppers can copy. Create the code in Discounts in your Shopify admin |
Products
| Section |
What it does |
| Product list |
Products from a collection in a grid or carousel, with the number of products and columns (desktop and phones). It can show ranking numbers and show number one large (on from the start when you add it as Ranking). Ranks follow the collection's sort order |
| Featured product |
One product shown with the same blocks as the product page (title, price, variants, buy buttons, and more). Media width and position, and showing only the selected color's media |
| Collection tabs |
Up to six collections that shoppers switch with tabs. Tab labels and a link to each collection |
| Shop the look |
Numbers or dots (hotspots) on an outfit photo, with a list of the products worn beside it (add to cart or choose options). Up to eight looks. Hotspots can have separate positions for the phone image |
| Shoppable videos |
A row of videos, each with one product and a caption. Videos play muted only while on screen, and never play by themselves on devices set to reduce motion |
| Bundle |
Shows the total for the products you choose and adds them all to the cart. Shoppers choose options for each product that has them. Create the discount itself as an automatic discount in Discounts |
| Related products |
On product pages, products that Shopify picks from sales data and product details |
| Recently viewed |
Products the shopper opened before (kept in their browser) |
Collections
| Section |
What it does |
| Collection list |
Collections in a grid, carousel, or collage. In a collage, each collection has a size (normal, wide, tall, or large). Titles below or over the images |
| Collection links |
Collection names in large type, with the image of the link in focus shown beside the list. Product counts |
| Brand index |
Your product vendors (brands) from A to Z, each linked to its products. Letter links, Japanese names grouped by kana row, and a search field |
Text
| Section |
What it does |
| Rich text |
Combine headings, text, buttons, and other blocks |
| Multicolumn |
Columns of an image or icon with a heading and text (up to 12). Swiping on phones and lines between columns. Also available as Columns with icons |
| Icon bar |
A strip of icons with short text, such as free shipping, gifts, and returns. On phones: two columns, one column, or sideways scrolling |
| Scrolling text |
A strip of text (each item can have a small image) that moves sideways. Speed, direction, separator, and pause on hover |
| FAQ |
Questions and answers that open and close. Answers can use the content of a page. The heading can sit above or on the side. FAQ structured data (one per page) |
| Press |
Quotes from articles about your store, switched with tabs that show each publication's logo. Optional autoplay |
| Headline with images |
One large headline built from text and small image blocks in order |
| Page content |
The title and content of a page you choose |
Images and video
| Section |
What it does |
| Video |
A video uploaded to Shopify, or a YouTube or Vimeo URL, with a cover image and a shape (16:9, 21:9, 4:5, or 1:1) |
| Before and after |
Two images that shoppers compare by moving a divider. Labels and the divider's starting position |
| Media grid |
Images and videos placed by width (columns of a 12-column grid) and height (rows). Captions |
| Social feed |
Your own images linked to your posts, with nothing loaded from the social network. Account name and a follow button |
Storytelling
| Section |
What it does |
| Editorial spread |
A magazine-style layout. Items are placed on a 12-column grid (6 on phones), and items in the same row overlap. For each item, set the start column, width, and row (separately for desktop and phones), vertical shift, vertical alignment, layer, padding, and colors. Also available as Staggered columns |
| Image with text |
An image beside a heading, text, and button. Image width and position, vertical alignment, and text overlapping the image |
| Testimonials |
A quote, name, detail, star rating, photo, and product link. Carousel or grid. Also available as Featured testimonial |
| Logo list |
Logos in a grid or a scrolling row. They can show in grayscale |
| Lookbook |
One look per page (one or two photos, a caption, and links to the products worn), shown full width, two-up, or offset. Look numbers and prices |
| Scrolling story |
Chapters with an image and text. On desktops, the image of the chapter being read stays beside the text. On phones, each chapter shows its image above the text |
| Timeline |
Events with a year, heading, text, and image |
| Blog posts |
The latest posts from a blog as cards, with image, date, category, excerpt, and author |
| Events |
Pop-up stores and events, with date, time, venue, address, a label (such as Upcoming), and a map link |
| Stores |
Store name, address, opening hours, phone number, and a map link |
| Map |
An address with an Open in Google Maps button and an image. No map is embedded |
| Section |
What it does |
| Email signup |
A newsletter signup form. Subscribers are added to your customer list with email marketing accepted. Background image |
| Contact form |
A form with three steps: enter, review, and sent (see 08. Contact, news, and blog) |
| Popup |
An email signup, a discount code, or a button link. Pages and devices to show it on, a trigger (after a delay, when leaving the page, or after scrolling), days before it shows again, and a small tab after closing |
| Age verification |
Asks visitors to confirm their age on their first visit. A link or a message for visitors who decline, and the days before it asks again |
Add the popup and age verification to the footer or to a template (such as the home page or product pages). In the theme editor, they show only while the section is selected.
Layout
| Section |
What it does |
| Mobile bottom navigation |
A menu fixed to the bottom of the screen on phones (see 03. Header and footer) |
| Custom Liquid |
Add your own code |
For Japanese stores
| Section |
What it does |
| News |
Blog posts listed as store news, with dates and categories (see 08. Contact, news, and blog) |
| Staff styling |
Outfits from your staff: photo, name, height, store, comment, and the items worn with the size of each. Carousel or grid |
| Business calendar |
One to three months of calendar, starting with the current month, with your closed days marked. Closed days come from Japan in theme settings. First day of the week (Sunday or Monday) and a note |
| Size chart |
A table typed one row per line with cells separated by commas (rows pasted from a spreadsheet work too), or the content of a page. On product pages, the product metafield custom.size_table replaces the table when it has a value. Unit (centimeters, inches, or hidden) and a how-to-measure image |
Gadgets
| Section |
What it does |
| Spec highlights |
Key product features as large numbers (value, unit, label, caption, and bar). Up to eight |
| Comparison table |
Compares the products you choose, row by row, using their metafields. Highlight differences, prices, and add to cart buttons |
| Crowdfunding results |
Amount raised, number of backers, and percent funded (with a bar), the platform's name and logo, a project link, and comments from backers |