サイズチャートをアプリに表示する

商品ページに表示するHTML形式のサイズチャートには、以下のテンプレートをコピーして設定してください。テンプレートはHTMLの形式に沿っていればカスタマイズも可能です。<style>以下は編集せず、そのままご利用ください。

<table>
  <tbody>
    <tr>
      <td></td>
      <td>着丈</td>
      <td>肩幅</td>
      <td>身幅</td>
      <td>袖丈</td>
    </tr>
    <tr>
      <td>S</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
    </tr>
    <tr>
      <td>M</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
    </tr>
    <tr>
      <td>L</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
      <td>xxx</td>
    </tr>
  </tbody>
</table>
<style>
  table {
    width: 100%;
    text-indent: initial;
    border-collapse: collapse;
    text-align: center;
    line-height: 40px;
    font-size: 14px;
    border-spacing: 0;
  }
  tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
  }
  tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
  }
  td {
    display: table-cell;
    vertical-align: inherit;
    border: 1px solid rgba(31, 31, 31, 24%);
  }
</style>

オンラインストア用のサイズチャートを別のメタフィールドに保存している場合

Shopify Flowを使ってオンラインストア用に保存しているサイズチャートをアプリ表示用のメタフィールドにコピーすることができます(※1)。 下記のShopify Flowのワークフローをダウンロードし、インポートしてご利用ください。

2KB

サイズチャートをモバイルアプリ表示用のメタフィールドにコピーする.flow

ワークフローを有効にする前に、アクションの設定項目から、Valueフォームの2行目と3行目の Namespace と Key をオンラインストア用のサイズチャートが保存されているメタフィールドの値に変更してください。このワークフローは、オンラインストア用に保存されているHTMLにCSSのスタイルを追加した値をモバイル表示用のメタフィールドに保存します。

※1. このワークフローは、商品作成のタイミングで実行されます。商品作成後に管理画面からメタフィールドを追加する場合はワークフローが実行されないので、手動で両方のメタフィールドに値を設定してください。