月商1億円超えを支えたShopifyカスタマイズ事例

弊社ではShopifyでの制作をはじめ、様々なECサイトの制作のご依頼をいただいています。
近年では、月商1億円を超えることを目指したECサイト制作、または月商規模が既に億単位を超えているサイトのShopifyリニューアルも増えて参りました。
当記事をスタートとして、弊社が実際に行ってきたカスタマイズ事例のTipsを定期的にご紹介します。

事例1：ノベルティ施策の改善カスタマイズ

カスタマイズの背景

ご依頼いただいた婦人服の販売サイトでは、新作販売の際の販売効果を高めるため、新作購入の方限定でノベルティをつける施策を打っていました。
更に購入金額によって、3段階のノベルティを選択式で用意しており、ユーザーが希望のノベルティを選べることもあり、新作の予約率と平均単価の向上に繋がっていました。
しかしながら、運営には効率面で課題を抱えており、改善と効果向上の為、カスタマイズのご依頼をいただきました。

カスタマイズ前の課題

• 希望するノベルティを備考欄で受け取っていたため、毎回注文に手動でノベルティをつけていた。
• 希望ノベルティの在庫がなくなった場合は、別ノベルティに振り替えてメールを送る必要があった。
• 新作完売前に用意した全てのノベルティの在庫自体がなくなる場合が発生した。
• ノベルティをもらえると想定していたユーザーからクレームに繋がるケースが発生した。
• アプリを試したが、販売開始時のアクセス集中の高負荷にアプリ側が耐えられず、期待した動きにならなかった。

上記の課題から、ノベルティ施策の効果は出ているものの、ノベルティ施策の継続自体の検討をする状態になっていました。

カスタマイズでの要件

上記課題から、カスタマイズでは下記が要件となりました。

• ノベルティは商品登録をして在庫管理を出来るように。
• ノベルティはユーザーが選択できるように。
• 在庫がなくなった場合にはノベルティが無いことを表示。
• 購入した商品の価格によって表示するノベルティの選択肢が増える。
• 新作販売の高負荷アクセスでも稼働する軽量さ。

カスタマイズでの解決案

上記要件を受けて、弊社では下記の解決案を用意し、カスタマイズ実装を行いました。

• 新作販売時に集中する高負荷アクセスに対応するため、アプリを使わずliquidのカスタマイズで軽量に実装
• カートに該当の商品が入っているときには、カート画面に自動で対応するノベルティを表示
• カート内の合計価格によって表示するノベルティを3パターンで制御
• ノベルティ画像をクリックすることで自動的にカートに追加
• ノベルティを複数個選択することが出来ないようにルール化
• 運用はコードを使わずにカスタマイズ画面で簡単に変更できるように実装

実装方法

具体的に行った実装方法は下記のようなliquidを利用しています。
※各コードは例であり、各パーツへの機構を組み込むサンプルのため、あくまで機構づくりの参考として記載しています。

カートの商品有無のチェック

カート内に特定の商品があるかどうかのチェック機構を用意します。

{% assign target_product_handle = "example-product-handle" %}
{% assign product_in_cart = false %}

{% for item in cart.items %}
  {% if item.product.handle == target_product_handle %}
	{% assign product_in_cart = true %}
	{% break %}
  {% endif %}
{% endfor %}

{% if product_in_cart %}
  {% comment %}特定の商品がカートに含まれている{% endcomment %}
{% else %}
  {% comment %}特定の商品がカートに含まれていない{% endcomment %}
{% endif %}

カート内の金額のチェック

合わせてカート内の金額のチェック機構を用意します。

{% assign threshold_price = 1000000 %}
{% comment %}10,000円を銭単位に変換
{% if cart.total_price > threshold_price %}
  {% comment %} カートの合計価格が10,000円を超えている場合の処理 {% endcomment %}
{% else %}
  {% comment %} カートの合計価格が10,000円以下の場合の処理 {% endcomment %}
{% endif %}

該当商品の購入ボタン

ノベルティをクリックで表示するため、商品の呼び出しとクリックでカートに入れる機構を作ります。

{% assign product_handle = "example-product-handle" %}
{% assign product = all_products[product_handle] %}
{% if product %}
<div class="product-item">
	<!-- 商品画像 -->
	<a href="{{ product.url }}" title="{{ product.title }}" target="_blank">
	  <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}" />
	</a>
	
	<!-- 商品タイトル -->
	<h2><a href="{{ product.url }}" target="_blank">{{ product.title }}</a></h2>

	<form action="/cart/add" method="post">
		<input type="hidden" name="id" value="{{ product.variants.first.id }}">
		<button type="submit">ノベルティをカートに追加</button>
	</form>
</div>
{% else %}
{% endif %}

ボタン表示を在庫で制御

{% assign product_handle = "example-product-handle" %}
{% assign product = all_products[product_handle] %}

{% if product %}
  <div class="product-item">
	<!-- 商品画像 -->
	<a href="{{ product.url }}" title="{{ product.title }}" target="_blank">
	  <img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}" />
	</a>

	<!-- 商品タイトル -->
	<h2><a href="{{ product.url }}" target="_blank">{{ product.title }}</a></h2>

	<!-- 在庫チェック -->
	{% if product.available %}
	  <!-- 購入リンク -->
	  <form action="/cart/add" method="post">
		<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
		<button type="submit">ノベルティをカートに追加</button>
	  </form>
	{% else %}
	  <!-- 在庫がない場合のメッセージ -->
	  <p>SOLD OUT</p>
	{% endif %}
  </div>
{% else %}
{% endif %}

ノベルティ商品の数量選択を非表示

ノベルティ商品がカートに入ったときに数量選択が出来ないように、数量による分岐を追加します。
また、ノベルティ商品が複数回選択されないように、選択済みの際はノベルティ商品を非表示にします。

{% assign novelty_product_handle = "example-novelty-product-handle" %}
{% assign novelty_in_cart = false %}

{% for item in cart.items %}
  {% if item.product.handle == novelty_product_handle %}
    {% assign novelty_in_cart = true %}
  {% endif %}
{% endfor %}

{% if novelty_in_cart %}
  <!-- ノベルティ商品がカートにある場合、数量選択を非表示にする処理を記載 -->
  <!-- ノベルティ商品が複数回選択されないように、ノベルティ商品選択エリアを非表示 -->
{% endif %}

ノベルティが複数入っている場合にチェックアウトボタンを非表示

ノベルティ商品が何らかの予期せぬ理由で複数個カートに入っている場合は、購入できないようにチェックアウトボタンを非表示にします。

{% assign novelty_product_handle = "example-novelty-product-handle" %}
{% assign multiple_novelties_in_cart = false %}

{% for item in cart.items %}
  {% if item.product.handle == novelty_product_handle %}
    {% if item.quantity >= 2 %}
      {% assign multiple_novelties_in_cart = true %}
    {% endif %}
  {% endif %}
{% endfor %}

{% if multiple_novelties_in_cart %}
  <!-- ノベルティ商品が2個以上カートに入っている場合、チェックアウトボタンを非表示 -->
  <p>ノベルティ商品は1個のみご購入いただけます。</p>
{% endif %}

対象商品・ノベルティ商品・表示条件をカスタマイズ画面から操作出来るように実装

sectionのschemaサンプルになります。
実際には、ノベルティ商品をblockにして価格レンジや表示期間制限も組み込み、より省力化・自動化を行った上で実装しています。

{
  "name": "ノベルティセクション",
  "settings": [],
  "blocks": [
    {
      "type": "novelty_item",
      "name": "ノベルティアイテム",
      "settings": [
        {
          "type": "product",
          "id": "novelty_target_product",
          "label": "ノベルティ対象新作商品"
        },
        {
          "type": "product",
          "id": "novelty_product",
          "label": "ノベルティ商品"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "ノベルティ設定",
      "category": "カスタムセクション",
      "blocks": [
        {
          "type": "novelty_item"
        }
      ]
    }
  ]
}

結果

これまで注文後に手動で運用していたノベルティが、ユーザーのカート内の商品によってユーザー側に自動的に選択肢が提示され、ユーザーが確認した上で注文商品として入ることになったため、クレームがほぼ無くなるとともに、管理側のノベルティ施策の手間と担当者の心理的負荷が大きく低減しました。

そのため新作販売時のノベルティ施策を積極的に打てるようになり、売上への効果が大きい施策を継続することが出来たこともあり、億単位の月商のECに成長しています。