Shopify の商品オプションを、 Line Item Property を使って実装する方法を徹底解説

はじめに

今回は、Shopify の商品オプションを、Line Item Property を使って実装する方法解説していきます。

Shopify の商品オプションを使用すると、商品ページにアプリ無しで独自オプションを追加することができます。
そして、Line Item Property を使用することで、商品オプションを実装することが可能です。

この方法を利用すれば、商品に「名入れ」オプションや任意の備考を追加することも可能です。

それでは、解説していきます。

商品オプションを Line Item Property を使用して実装するとどうなるのか

最初に、商品オプションを Line Item Property を使用して実装するとどうなるのかについて解説していきます。

商品オプションとは、以下の画像のように商品ページに追加で設定する入力欄のことです。

上記の入力欄にを使用すると、カート・注文のプロパティに入力した値が反映されます。
例として、上記の「お名前」の部分に、「山田太郎」と入力して購入してみましょう。

この状態で、商品をカートに追加してみます。
そうすると、以下のようにカートのプロパティとして、先ほど入力した値が追加されています。

この状態で、商品を購入してみましょう。チェックアウトページに移動すると、以下のように入力した値が反映されています。

この状態で購入を行うと、注文オブジェクトに入力した値が反映されます。

つまり、商品オプションを Line Item Property を使って実装すると、顧客が自由に入力した値を注文オブジェクトに反映することができます。こちらの機能を利用すれば、「名入れ」や「のし」の機能を実現することができます。

ちなみに、弊社のアプリである 「シンプルのし（熨斗）アプリ」 や 「シンプルギフトラッピング｜お手軽ギフト包装アプリ」 は、上記の Line Item Property を使って実装しています。

「シンプルのし（熨斗）アプリ」 は、Line Item Property と、カート追加 API・商品作成の API を利用することで、実装しています。

こちらのアプリは、コーディングのみで実装するのが難しいので、アプリを利用した実装になるかと思います。

シンプルのしアプリ こちら からインストールすることができます。

公式のご利用ガイドもあるので、興味があるからはこちらから確認頂けます。

同様に、「シンプルギフトラッピング｜お手軽ギフト包装アプリ」 も Line Item Property と、カート追加 API を利用することで実装しています。

「シンプルギフトラッピング｜お手軽ギフト包装アプリ」 は こちら からインストールすることができます。

公式のご利用ガイドもあるので、興味があるからはこちらから確認頂けます。

ここまでで、商品オプションを Line Item Property を使用して実装するとどうなるのかについて解説しました。
次に、Line Item Property を利用して商品オプションを追加する具体的な実装方法について解説していきます。

商品オプションの実装方法

それでは次に、商品オプションの実装方法について解説していきます。

結論

結論から書くと、商品のフォームの中に input を作成し、input の name 要素に properties[お名前]と入力することで Line Item Property を利用することができます。

ちなみに、input の form 属性に form='product-form-{{ section.id }}' と入力することで、商品フォームの中にインプット要素を入れなくても、商品オプションを実装することが可能です。

それでは、具体的な実装手順を見ていきましょう。

具体的な実装方法

オンラインストア>コード編集 より、テーマのコードの編集画面に移動しましょう。

こちらで、main-product.liquid に移動します。

form 'product' と書かれている部分を探しましょう。Ctrl + F で探せば、割と簡単に見つけることができます。

{%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
  {{ form | payment_terms }}
{%- endform -%}

上記の部分が、Shopify の商品フォームの実体です。Line Item Property は、この中に name='properties[お名前]' の要素を格納することで実装することができます。

{%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
  <input
    type='text'
    name='properties[お名前]'
    placeholder='名前を入力してください'
  >
  {{ form | payment_terms }}
{%- endform -%}

これで、下記の画像のようなフォームを追加することができました。properties[xxx]の xxx には任意の文字を入力することができます。この任意の文字が、プロパティのキーになります。

具体的には、今回はお名前と入力したので、商品オプションとしてお名前が追加されることになります。

ここまでで、基本的な Line Item Property の使い方の解説は終了です。

ちなみに、 form='product-form-{{ section.id }}' の要素を追加することで、上記の form の部分の中にインプット要素を書かなくても、Line Item Property を利用することが可能です。

{%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
  <input type='hidden' name='id' value='{{ product.selected_or_first_available_variant.id }}'>
  {{ form | payment_terms }}
{%- endform -%}
<input
  type='text'
  name='properties[お名前]'
  placeholder='名前を入力してください'
  form='product-form-{{ section.id }}'
>

基本的には、form='product-form-{{ section.id }}' を書くことになるかと思います。このコードの意味としては、

{%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
  <input type='hidden' name='id' value='{{ product.selected_or_first_available_variant.id }}'>
  {{ form | payment_terms }}
{%- endform -%}

上記の部分で生成される以下のコードの、form の id を指定している形になります。

具体的には、以下の要素が生成されることになります。

<form method="post" action="/cart/add" id="product-form-template--15555335028815__main" accept-charset="UTF-8" class="form" enctype="multipart/form-data" novalidate="novalidate" data-type="add-to-cart-form"><input type="hidden" name="form_type" value="product"><input type="hidden" name="utf8" value="✓"><input type="hidden" name="id" value="41271482122319" class="product-variant-id"><div class="product-form__buttons"><button id="ProductSubmitButton-template--15555335028815__main" type="submit" name="add" class="product-form__submit button button--full-width button--secondary">
            <span>カートに追加する
</span>

<link href="//dev-sa-025-ur-name-option-app-2.myshopify.com/cdn/shop/t/1/assets/component-loading-spinner.css?v=116724955567955766481709893180" rel="stylesheet" type="text/css" media="all">

<div class="loading__spinner hidden">
  <svg aria-hidden="true" focusable="false" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
    <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
  </svg>
</div>
</button><div data-shopify="payment-button" class="shopify-payment-button"> <dynamic-checkout wallet-configs="[]" access-token="eccfec89d9db6941381248569759a8c5" buyer-country="JP" buyer-locale="ja" buyer-currency="JPY" variant-params="[{&quot;id&quot;:41271482122319,&quot;requiresShipping&quot;:true}]" shop-id="58629521487"><style>dynamic-checkout .wallet-button-fade-in,cart-wallet-buttons .wallet-button-fade-in{animation:animation-fade-in .3s cubic-bezier(.1,.79,1,1)}dynamic-checkout .shopify-payment-button__button,cart-wallet-buttons .shopify-payment-button__button{cursor:pointer}@keyframes animation-fade-in{0%{opacity:0}to{opacity:1}}button[aria-disabled=true]{opacity:.5;cursor:not-allowed}
</style><div class="wallet-button-fade-in"><shopify-buy-it-now-button access-token="eccfec89d9db6941381248569759a8c5" buyer-country="JP" buyer-currency="JPY" disabled="false" wallet-params="{}"><button type="button" class="shopify-payment-button__button shopify-payment-button__button--unbranded">今すぐ購入</button></shopify-buy-it-now-button></div></dynamic-checkout> </div>
</div><input type="hidden" name="product-id" value="7276839403599"><input type="hidden" name="section-id" value="template--15555335028815__main"></form>

これで、Line Item Property を用いて商品オプションを実装する方法についての解説は終了です。