アプリの使い方
テーマブロック
サイズ表ブロックは、お客様が商品ページでサイズ表にたどり着く方法を決めます。テキストリンク、ボタン、またはページ内への直接表示から選べます。テーマエディターで一度設定すれば、そのテンプレートを使うすべての商品に適用されます。
ブロックの場所：オンラインストア → テーマ → カスタマイズで商品テンプレートに切り替え、商品情報セクションのサイズ表をクリックします。まだ追加していない場合はインストールをご覧ください。
表示
| 設定 | 内容 |
|---|---|
| ラベル | お客様がクリックするテキストです。デフォルトは「サイズ表」（ストアの言語で表示）。「サイズガイド」や「サイズを探す」などもおすすめです。 |
| 表示形式 | テキストリンク（デフォルト）、ボタン、またはインライン（ページ内に表示）。インラインではクリック不要でサイズ表全体が商品ページに表示されます。 |
| 配置 | 左、中央、右。リンクとボタンのみ。 |
以下の設定のほとんどは、リンクとボタンのスタイルでのみ表示されます。インライン表示ではクリックするものがないためです。
配置場所
デフォルトでは、リンクはブロックを置いた場所に表示されます。配置場所の設定を使うと、ほかの要素と同じ行に並べることができます。定番は価格の横です。
| 設定 | 内容 |
|---|---|
| 表示位置 | このブロックを配置した場所、価格と同じ行、別の要素と同じ行。 |
| 要素のクラスまたはセレクター | 「別の要素」の場合：テーマの商品セクションにあるクラスまたは CSS セレクター（例：product__title、.product-form__quantity）。 |
| 行内の位置 | 要素の後、要素の前。 |
| 行内の縦の配置 | 中央、上、下、テキストのベースライン。 |
価格と同じ行は、Dawn とそれをベースにしたほとんどのテーマ、そして一般的な価格のクラス名を使うテーマで、価格を自動的に見つけます。お客様がバリエーションを切り替えても、リンクの位置は変わりません。
リンク
| 設定 | 内容 |
|---|---|
| リンクの色 | 空欄にするとテーマの文字色を使います。 |
| 下線 | デフォルトでオン。 |
アイコン
ラベルの横にアイコンを付けられます。アイコンはリンクやボタンの文字色に合わせて表示されるので、常に統一感が保たれます。
| 設定 | 内容 |
|---|---|
| アイコン | アイコンなし（デフォルト）、27 種類の内蔵アイコン、またはカスタム画像。 |
| カスタムアイコン | 独自の画像です。画像本来の色で表示されます。正方形のPNGかSVGが最適です。 |
| アイコンの位置 | ラベルの前、ラベルの後。 |
| アイコンのサイズ | 12〜40 px。デフォルト 18 px。 |
| アイコンと文字の間隔 | アイコンとラベルの間隔、0〜24 px。デフォルト 6 px。 |
モダン
サイズ表 · サイズタグ · ハンガーと定規 · メジャーケース · シャツの幅 · トルソー · パンツのウエスト · 靴の長さ · ボディフィット
クラシック
定規 · メジャー · 巻きメジャー · シャツとメジャー · 折りたたんだメジャー · 間取り図 · 靴のサイズ · ハンガー · シャツの寸法 · 文字サイズ表記 · ウエストの測定 · はかり · ワンピースと定規 · スニーカー · ヒップ · 体とメジャー · 三角定規 · 幅の矢印
ボタン
| 設定 | 内容 |
|---|---|
| 背景 / 文字 | 両方とも空欄にすると、テーマの文字色の枠線ボタンになります。 |
| サイズ | 小（高さ 36 px）、標準（44 px、多くのテーマのボタンと同じ高さ）、大（52 px）。「カスタム」を選ぶとボタンの高さのスライダーが表示されます。 |
| ボタンの高さ | 28〜64 px。デフォルト 44 px。サイズが「カスタム」のときのみ。 |
| 角の丸み | 0〜40 px。デフォルト 4 px。 |
| フローティングボタンを表示 | 画面の端にもタブを固定表示し、お客様がスクロール中にページのどこからでもサイズ表を開けるようにします。 |
| フローティングボタンの位置（左右） | 左、右。 |
| フローティングボタンの位置（上下） | 画面の上、中央、下。 |
| モバイルでフローティングボタンを表示 | デフォルトでオン。オフにするとスマートフォンではタブが非表示になり、通常のボタンが使われます。 |
サイズ表ウィンドウ
| 設定 | 内容 |
|---|---|
| 開き方 | ポップアップ（中央、デフォルト）、左からのドロワー、右からのドロワー。 |
ドロワーは横からスライドして開き、後ろの商品ページが見えたままになります。スマートフォンでは、ドロワーはどのみち画面いっぱいになるため、中央のポップアップとして開きます。大きな画面では、ドロワーは幅が狭いため商品写真はポップアップでのみ表示されます。スマートフォンではスマートフォンでも表示の設定に従います。
お客様の体験
- ポップアップやドロワーは、閉じるボタン、Escキー、または外側のクリック（デザインでオフにしない限り）で閉じます。
- 表で単位の換算を使っている場合、お客様の選択（インチなど）が記憶され、次の商品も同じ単位で開きます。同じサイズ表内のほかの表も一緒に切り替わります。
- 幅の広い表は、スマートフォンでは縮まずに横スクロールし、サイズ列を固定することもできます。
- サイズ表はキーボードやスクリーンリーダーの利用者にも配慮しています。開くとフォーカスがポップアップ内に移り、閉じるとリンクに戻ります。