【アプリ不要】上限なしでShopifyのオプション項目を追加する方法

Shopifyの商品ページに、上限なしでオプション項目を追加できる機能をお探しですか？

この記事では、有料アプリは使用せずにメタフィールドを活用して商品オプションを追加する方法を紹介します。

オプション項目機能は有料アプリ(約2,000円/月ほど)を使用して追加することも可能ですが、この記事を参考にすれば無料で実現可能ですので、この機会にランニングコストを削減しましょう！

完成形はこちら

まず結論として、オプション項目を追加できる機能のスクショをご覧ください。

この記事の内容を真似することで、商品管理ページのメタフィールドからオプション項目の入力を設定可能となります。
メタフィールドなので、商品それぞれ固有のオプション項目をプログラムを書かずに設定可能となります。

上記メタフィールドで入力した内容が商品ページに反映されています。
このようにして、オプションアプリを使用せず無料で追加のオプション項目を表示可能となります。

カスタマイズの大まかな手順

カスタマイズ内容の大枠を３つに分けて示します。

カスタマイズの詳細な手順

ここからは、カスタマイズの詳細を説明します。

オプション項目の入力欄を作成

後に紹介するコードをそのまま使用するためには、メタフィールドのネームスペース・キーは下記画像と同様に設定してください。
また、メタフィールドの形式（単一行のテキストなど）も同様に指定してください。

商品にオプション項目を追加する機能を作成

Shopifyのテーマ拡張方法であるLine Item Propertyを活用して、カート画面に独自の入力項目を追加するための機能を追加できます。

Line Item Propertyについては、こちらのShopify公式のページで紹介されています。

プログラムを書く必要があるので、少しハードルが高く感じましたか？
安心してください！Shopify公式のツールである、Shopify UI Elements Generatorによって簡単にコードを生成することが可能です。

こちらのように、左側でオプション項目の設定をすると右側で外観を確認することができます。

納得できる形に整ったら、下の方に自動でコードが生成されます！
このコードをそのまま使用することで、上の画像右側にあるオプション項目をストアに導入することができます。

この記事では、このコードはそのまま使用せずに商品メタフィールドと組み合わせるために次項に説明する編集を加えます。

商品メタフィールドとLine Item Propertyの連携

繰り返しになりますが、こちらがオプション項目を入力するための商品管理ページのメタフィールドです。
ここの入力内容を、Line Item Propertyの内容として連携させます。

ここから、商品メタフィールドとLine Item Propertyを連携させるためのコードを「プルダウン」と「備考欄」に分けて説明します。

プルダウンを生成するためのコード

こちらに、商品メタフィールドによる入力内容をプルダウン形式のオプション項目としてLine Item Propertyにセットするコードを記載しています。

{% assign optionone = false %}
{% for data in product.metafields.optionone.msg.value %}
  {% if data != blank and product.metafields.optionone.title != blank %}
    {% assign optionone = true %}
  {% endif %}
{% endfor %}

{% unless optionone == false %}
  <div class="line-item-property__field add-options add-options-01">
    <p class="custom-form__label">
      <label>{{ product.metafields.optionone.title }}</label>
    </p>
    <div class="add-options-01-wrapper">
      <select id="add-options-01" name="properties[{{ product.metafields.optionone.title }}]">
        {% for data in product.metafields.optionone.msg.value %}
          <option value="{{ data }}">{{ data }}</option>
        {% endfor %}
      </select>
    </div>
  </div>
{% endunless %}

ここから、上記コードの詳細を解説します。

{% assign optionone = false %}
{% for data in product.metafields.optionone.msg.value %}
  {% if data != blank and product.metafields.optionone.title != blank %}
    {% assign optionone = true %}
  {% endif %}
{% endfor %}

ここでは、プルダウンのタイトルと選択肢の両方が空欄でない場合にoptionone　という変数をtrueに設定しています。
「単一行のテキスト（リスト）」形式のメタフィールドから複数の値を取り出すためには、product.metafields.optionone.msg.value　のように、メタフィールドのnamespace.keyにvalueをつけてfor文で値を取り出す必要があります。

{% unless optionone == false %}

ここ以降は、上記で設定したoptionone　がtrueの場合、つまりプルダウンのタイトルと選択肢が存在する場合に実行されます。

<div class="line-item-property__field add-options add-options-01">
    <p class="custom-form__label">
      <label>{{ product.metafields.optionone.title }}</label>
    </p>
    <div class="add-options-01-wrapper">
      <select id="add-options-01" name="properties[{{ 　　product.metafields.optionone.title }}]">
        {% for data in product.metafields.optionone.msg.value %}
          <option value="{{ data }}">{{ data }}</option>
        {% endfor %}
      </select>
    </div>
  </div>

Shopify UI Elements Generatorによって生成されたコードに対して、オレンジ色の部分を編集しています。
<label>　タグの中身はプルダウンの項目名としてページに表示されるので{{ product.metafields.optionone.title }} に置き換えています。

name="properties[{{ product.metafields.optionone.title }}]"　の部分も同じく項目名でして、こちらはカート画面・注文管理画面に反映される項目名となります。

そして、{% for data in product.metafields.optionone.msg.value %} の部分で、メタフィールドに設定したプルダウンの選択肢を出力しています。

備考欄（自由記述欄）を生成するためのコード

こちらに、商品メタフィールドによる入力内容を自由形式のオプション項目としてLine Item Propertyにセットするコードを記載しています。

{% unless product.metafields.remarks.flag == false %}
  <div class="line-item-property__field add-options add-options-02">
    {% if product.metafields.remarks.title == blank %}
      <p class="custom-form__label">
        {% unless product.metafields.remarks.req == false %}
          <span class="custom-form__label-req">必須</span>
        {% endunless %}
        <label for="add-options-02">備考欄</label>
      </p>
    {% else %}
      <p class="custom-form__label">
        {% unless product.metafields.remarks.req == false %}
          <span class="custom-form__label-req">必須</span>
        {% endunless %}
        <label for="add-options-02">{{ product.metafields.remarks.title }}</label>
      </p>
    {% endif %}
    <textarea
      id="add-options-02"
      name="properties[備考欄]"
    ></textarea>
  </div>
{% endunless %}

ここから、上記コードの詳細を解説します。

{% unless product.metafields.remarks.flag == false %}

ここは必須ではありませんが、備考欄の表示/非表示切り替えを「trueまたはfalse」形式のメタフィールドで切り替えることで、備考欄自体の表示/非表示を簡単に切り替えています。

{% if product.metafields.remarks.title == blank %}
      <p class="custom-form__label">
        {% unless product.metafields.remarks.req == false %}
          <span class="custom-form__label-req">必須</span>
        {% endunless %}
        <label for="add-options-02">備考欄</label>
      </p>
    {% else %}
      <p class="custom-form__label">
        {% unless product.metafields.remarks.req == false %}
          <span class="custom-form__label-req">必須</span>
        {% endunless %}
        <label for="add-options-02">{{ product.metafields.remarks.title }}</label>
      </p>
    {% endif %}

ここも必須ではありませんが、自由記述欄のタイトルをデフォルトでは「備考欄」と表示させ、それ以外の表記にしたい場合はproduct.metafields.remarks.title　の値を代入しています。

 <textarea id="add-options-02" name="properties[備考欄]"></textarea>

そして、ここがテキストの入力欄としてページに表示される部分です。こちらは、Shopify UI Elements Generatorによって生成されたコードそのままです。

コードの解説は以上となります。

まとめ

この記事では、有料アプリは使用せずにメタフィールドを活用して商品オプションを追加する方法を紹介しました。

この記事の内容を参考にすれば、Line Item PropertyをShopify UI Elements Generatorによって簡単に生成し、Liquidの編集を加えることで、メタフィールドと連携させて動的にオプション項目を上限なく生成させることができます。

オプション項目機能は有料アプリ(約2,000円/月ほど)を使用して追加することも可能ですが、この記事の内容を最初に実現させておくだけでランニングコストを削減できるのでオススメです。

SOUKLについて

Shopify構築・カスタマイズ承ります。

SOUKLでは、Shopify専門のエンジニアが
お客様に直接対応させていただきます。
中間マージンが発生しない、コストを抑えた構築が強みです。

サービス詳細はこちら