商品情報の詳細に、トグル形式でサイズガイドを表示できます。
サイズガイド以外の内容を商品詳細に追加したい場合は、こちらのガイドをご確認ください。（→詳細情報の設定方法はこちら）
Shopify管理画面＞設定＞メタフィールドとメタオブジェクト＞商品＞定義を追加するから設定を行います。
次に、各項目に下記の内容を入力してください。
項目名 | 内容 |
名前 | サイズガイド[HTML] |
ネームスペースとキー | appify-mobile.sizechart_html |
説明 | メタフィールドにHTMLでサイズ表を登録することができます |
データ型 | 複数行のテキスト |
Shopify管理画面＞商品管理＞サイズ表を表示したい商品＞メタフィールド＞商品メタフィールド＞サイズ表にて表示したい情報を入力します。
必ず、HTML形式で入力してください。サンプルをご用意していますが、HTMLの形式に沿っていればカスタマイズも可能です。
<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>ShopifyFlowを使ってオンラインストア用に保存しているサイズチャートをアプリ表示用のメタフィールドにコピーできます。
以下の内容で、Shopify Flowを作成してください。
このFlowは、オンラインストア用に保存されているHTMLにCSSのスタイルを追加した値をモバイル表示用のメタフィールドに保存します。
トリガー：「Product created」
アクション：Update product metafield
Metafield namespace：オンラインストア用のサイズチャートが保存されているメタフィールドの値
Key：オンラインストア用のサイズチャートが保存されているメタフィールドの値
Value：以下コードブロックに記載されている内容を入力
※フォームの2行目の"your namespace"と3行目"your key"は、オンラインストア用のサイズチャートが保存されているメタフィールドの値に変更してください
Type：Multiline text
{% for metafields_item in product.metafields %}
{% if metafields_item.namespace == "your namespace" %}
{% if metafields_item.key == "your key" %}
{% if metafields_item.value != blank %}
<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>
{{ metafields_item.value}}
{% endif %}
{% endif %}
{% endif %}
{% endfor %}
このFlowは、商品作成のタイミングで実行されます。
商品作成後に管理画面からメタフィールドを追加する場合はワークフローが実行されないので、手動で両方のメタフィールドに値を設定してください。