Shopify の商品購入画面で、数量の下に備考欄を追加します。

image2

デフォルトでは、設定がないので、Liquid に備考欄のコードを追加します。

Shopify のテーマは、Dawn を使用しています。

まずは、Shopify UI Elements Generator(https://ui-elements-generator.myshopify.com/)にアクセスします。

『Line Item Property』をクリックします。

image3

Set your form field の Type of form field で『Text - long』を指定します。

image4

Your form field label にタイトルである『備考欄』と入力します。

image5

必須にしたい場合は、Your form field label の下にある Required にチェックを入れます。

Grab your code にコードが出来上がっているので、COPY TO CLIPBOARD ボタンをクリップし、コピーします。

image6

Shopify の管理画面に戻り、左メニューの『オンラインストア』をクリックします。

image7

テーマの『アクション』をクリックし、『コードを編集』を選択します。

image8

Sections の main-product.liquid をクリックします。

image9

検索画面で『submit』を入力します。

image10

buttun タグの 3 つ上にある、{%- form 'product', product, idの行の下に、先程コピーしたコードを貼り付けます。

image11

『保存する』をクリックします。

image12

一通り完成したので、商品詳細画面にアクセスしてみます。

image13

備考欄が追加されていました。 ※デザインは、CSS で調整してください。

早速、テストで購入してみます。

image14

カート画面にも反映されています。

image15

テストで購入して、注文管理画面を確認すると、

image16

注文管理画面も反映されていました。

ブログ一覧