Plug Software
Plug : Size Chart に戻る
ドキュメントメニュー

アプリの使い方

サイズ表エディター

サイズ表に入れられるものと、そのすべてのオプションです。サイズ表でサイズ表を作成するか、既存のサイズ表をクリックするとエディターが開きます。

エディターの構成

  • サイズ表の名前:管理用です。お客様には表示されません。
  • コンテンツ:サイズ表を構成する要素を上から順に並べたものです。ハンドルをドラッグするか上下の矢印で並べ替え、ゴミ箱アイコンで要素を削除します。
  • デザイン:ストアのデザインを使用はデフォルトでオンです。1 つのサイズ表だけデザインを変えるをご覧ください。
  • ステータスと適用対象:セットアップガイドで説明しています。
  • ライブプレビュー:入力に合わせて更新されます。デスクトップとモバイルを切り替えたり、全幅プレビューを開いたりできます。

変更は、上部のバーにある保存をクリックするまで公開されません。未保存の変更があるままページを離れようとすると、先に保存するか破棄するかを確認されます。

要素

要素を追加をクリックすると、8 種類の要素から 1 つを追加できます。空の要素(テキストのない見出し、ファイルのない画像など)はストアでは表示されないため、作りかけの要素が空白として表示されることはありません。

表

寸法を行と列で表示します。1 行目が見出し行で、1 列目には通常サイズ名が入ります。下記の表の操作と単位の換算もご覧ください。スタイルのオプション:

設定内容
セルの配置左、中央、右。
セルの余白狭め、標準、広め。
罫線行の間、全罫線、なし。
色ヘッダーの背景、見出し行の文字、セルの文字、交互の行、罫線。空欄にするとサイズ表の色を使います。
見出し行を太字デフォルトでオン。オフにすると通常の太さの見出しになります。
最初の列を太字デフォルトでオン。オフにするとサイズ名が通常の太さになります。
最初の列を強調サイズ列に色を付け、ラベルとして読みやすくします。
スクロール時も最初の列を表示したままにする幅の広い表で、お客様が横にスクロールしてもサイズ列が固定されます。スマートフォンで特に便利です。
見出し行とサイズ列を大文字にする大文字で表示します。

見出し

「測り方」のように、サイズ表をセクションに分ける短いタイトルです。

設定内容
配置左、中央、右。
サイズ小、標準、大。
色空欄にするとサイズ表の見出しの色を使います。

テキスト

フィット感、測り方、返品についてのメモです。ツールバーには太字、斜体、下線、箇条書き・番号付きリスト、リンクがあります。文字サイズは小、標準、大から選べます。

文字を選択し、文字色またはハイライトで色を付けられます。ツールバーの最後にあるHTMLを編集では、マークアップを直接編集できます。段落、h3・h4 見出し、太字、斜体、下線、リスト、リンク、色付きの文字は保持されます。それ以外のタグは保存時に削除されますが、中の文字は残ります。「画像とテキスト」の文字も同じエディタで編集します。

画像

測り方のイラストなど、1 枚の図や写真です。

設定内容
画像新しい画像をアップロードするか、Shopify のファイルにある画像を選ぶか、画像のリンク(https のみ)を貼り付けます。JPG、PNG、WebP、GIF、最大 20 MB。
代替テキストスクリーンリーダーを使うお客様に画像の内容を伝えます。必ず入力することをおすすめします。
幅元のサイズ、全幅、大、標準、小。
配置左、中央、右。

画像とテキスト

測り方の手順を添えた図など、説明文の横に画像を置きます。

設定内容
画像の位置テキストの左、テキストの右。
画像の幅要素の半分、3分の1。
縦の配置中央、上。

スマートフォンでは、画像はテキストの上に表示されます。

生地のアップ、着用写真、測り方の手順など、複数の画像を並べて表示します。

設定内容
レイアウトグリッド、カルーセル(スワイプ可能)。
列グリッドのみ:自動調整、2、3、4。
画像の高さカルーセルのみ:低い、標準、高い。

動画

測り方を説明する短い動画です。

設定内容
ソース動画を Shopify のファイルにアップロードする(MP4、MOV、WebM、最大 1 GB)か、YouTube または Vimeo のリンクを貼り付けます。
再生アップロードした動画のみ:コントロール付きプレーヤー、または GIF のように無音で自動ループ再生。
タイトルスクリーンリーダーで読み上げられます。
幅全幅、大、標準、小。
注意: アップロードした動画は、再生できるようになるまで Shopify での処理に少し時間がかかります。YouTube 動画はプライバシー強化モード(youtube-nocookie.com)で埋め込まれます。

区切り線

セクションの間に入れる横線です。中央にラベルを付けることもできます。

設定内容
線実線、破線、点線。
間隔線の周りの余白を小・中・大から選択。
太さ1、2、4 px。
色空欄にするとサイズ表の罫線の色を使います。
ラベル最大 60 文字(例:「測り方」)。線の切れ目に表示されます。空欄にすると通常の線になります。
ラベルの位置左、中央、右。

すべての要素には、スタイルのオプションに上の余白と下の余白(なし、小、デフォルト、大)もあります。

表の操作

表エディターは小さなスプレッドシートのように動作します。1 つの表は最大 200 行・30 列まで作れます。

キーボードとマウス

設定内容
矢印キーセル間を移動します。
Shift + 矢印キーセルの範囲を選択します。クリックしてドラッグすることもできます。
Enter1 行下へ移動します(Shift + Enter で上へ)。
Delete / Backspace選択範囲のすべてのセルを空にします。
Ctrl / ⌘ + C、X、V範囲をコピー、切り取り、貼り付けします。
Ctrl / ⌘ + Z直前の表の変更(貼り付け、挿入、削除)を元に戻します。
右クリック、Shift + F10、またはメニューキー表のアクションメニューを開きます。
Esc選択を 1 つのセルに戻します。

Excel や Google スプレッドシートから貼り付ける

スプレッドシートでセルをコピーし、左上の値を入れたいセルをクリックして貼り付けます。表は必要に応じて広がります。選択範囲に 1 つの値を貼り付けると、選択したすべてのセルにその値が入ります。

表のアクションメニュー

セルを右クリックすると、次の操作ができます。

  • 元に戻す
  • 上 / 下に行を挿入、行を複製、行を上 / 下へ移動、行を削除
  • 左 / 右に列を挿入、列を左 / 右へ移動、列を削除
  • 行と列を入れ替え:上に並んだサイズを縦に並べ替えます(逆も可能)。
  • CSVをインポート…:表を CSV ファイルの内容に置き換えます。1 行目が見出し行になります。
  • 寸法を消去:見出し行とサイズ列を残してすべてのセルを空にし、レイアウトを再利用できるようにします。

複数の行を選択している場合、行を削除で選択したすべての行が削除されます。表の下にある行を追加と列を追加ボタンは末尾に追加します。

単位の換算

寸法を一度入力すれば、お客様が単位を切り替えられます。換算をオンにすると、表の上に小さなスイッチ(例:cm | in)が表示されます。サイズ名やメモは入力したとおりのまま変わりません。

設定内容
単位の換算換算しない、または入力した単位 → 表示する単位:センチ → インチ、インチ → センチ、ミリ → インチ、インチ → ミリ、キログラム → ポンド、ポンド → キログラム。
最初に表示サイズ表を開いたときに表示される単位です。入力した単位か、換算後の単位(例:米国のお客様向けにインチ)を選べます。
換算値の丸め整数、小数第 1 位(デフォルト)、小数第 2 位。
スイッチの位置表の上の左、中央、右。
換算する列寸法が入っている列にチェックを入れます。デフォルトでは最初の列以外のすべての列が換算されます。

換算される値

  • 単一の値(86)と範囲(86-90、86 – 90、86/90、86 to 90)。
  • 小数点のカンマ(86,5):換算後もカンマのままです。
  • 単位付きの値(86 cm → 33.9 in)。
  • 見出しの括弧内の単位も切り替わります:Chest (cm) は Chest (in) になります。

数値以外(M や XLなどのサイズ名、メモ、空のセル)はそのまま残ります。

ヒント: ウエスト (cm)のように各見出しに単位を括弧で入れておくと、お客様はどの単位を見ているのか常にわかります。

1 つのサイズ表だけデザインを変える

デフォルトでは、すべてのサイズ表がストア全体のデザインに従います。ストリートウェアのラインだけ暗めの見た目にするなど、1 つのサイズ表だけスタイルを変えたい場合は、エディターでストアのデザインを使用をオフにします。そのサイズ表は、現在のストアの値をもとに、サイズ表ウィンドウ、ヘッダー、商品写真、背景、表、テキストの設定を独自に持つようになります。

ストアのデザインを使用を再びオンにすると、ストアのデザインに戻ります。カスタム CSS と、背景クリックで閉じる設定は、常にストア全体のデザインページの設定が使われます。

お探しの情報が見つからない、または不具合がありましたか?サポートに問い合わせるまたはメール:help.zainabfatima@gmail.com