はじめに

ShopifyでECサイトを制作していると、「商品に関する問い合わせフォームを作りたい」「該当の商品が不明な問い合わせが多くて困る」といったマーチャントさんのお声・要望を受けることがあります。
この手の悩みは意外と多く、これを放置すると購入のチャンスを逃してしまうだけでなく、問い合わせ対応の負担も増えてしまいます。

本記事では、以下の2点を実現することで、ユーザー体験の向上と問い合わせ対応の効率化を図る方法をご紹介します。

• 商品ページに問い合わせボタンを設置する
• 該当の商品名とSKUを問い合わせフォームに自動入力させる

上記により、「問い合わせの導線を明確にしてユーザーの迷いをなくす」「問い合わせ対応の際に迅速に該当商品を把握できる」というメリットが生まれます。
LiquidやJavaScriptに詳しくない方でも実装できるよう、Shopifyの標準テーマ「Dawn」をベースに分かりやすく解説していますのでぜひ最後までご覧ください！

実装方法

1. 商品ページに問い合わせボタンを設置

「main-product.liquid」で、{% case %}{% endcase %}内の任意の箇所に下記コードを追加します。
今回は購入ボタン用の記述の直後に追加しました。（画像はクリックで拡大します）

<!-- 問い合わせボタン -->
{%- when 'inquiry' -%}
  <div class="inquiry_btn">
    <a href="{{ routes.root_url }}pages/contact?product_title={{ product.title | url_encode }}&product_sku={{- product.selected_or_first_available_variant.sku | url_encode -}}" class="button button--full-width" style="background: {{ block.settings.color_btnBk }}; color: {{ block.settings.color_btnTxt }};" target="_blank">{{ block.settings.btn_txt }}</a>
  </div>
<!-- ここまで -->

またカスタマイズ画面で各種設定をできるようにするため、同ファイルの{% schema %}{% endschema %}内に下記コードを追加します。

{
      "type": "inquiry",
      "name": "お問合せボタン",
      "limit": 1,
      "settings": [
        {
          "type": "header",
          "content": "ボタンの外観設定"
        },
        {
          "type": "text",
          "id": "btn_txt",
          "label": "テキスト",
          "default": "この商品について問い合わせる"
        },
        {
          "type": "color",
          "id": "color_btnTxt",
          "label": "ボタン文字カラー",
          "default": "#fff"
        },
        {
          "type": "color",
          "id": "color_btnBk",
          "label": "ボタン背景カラー",
          "default": "#000"
        }
      ]
}

2. 「contact-form.liquid」にJavaScriptの記述を追加

「contact-form.liquid」の{% schema %}の上あたりに、自動入力用の下記コードを追加します。

<!-- 商品名＆SKU自動入力用 -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<script>
$(function() {
  function getUrlParams(url) {
    let params = {};
    (url + '&').split('?')[1].split('&').forEach(param => {
      let [key, value] = param.split('=');
      try {
        if (key) {
          let decodedKey = decodeURIComponent(key);
          let decodedValue = decodeURIComponent((value || '').replace(/\+/g, ' '));
          params[decodedKey] = decodedValue;
        }
      } catch (e) {
        console.warn("Error decoding URL parameter:", param);
      }
    });
    return params;
  }

  const params = getUrlParams(location.href);
  const productTitle = params['product_title'];
  const productSku = params['product_sku'];

  if (productTitle || productSku) {
    let defaultMessage = "";
    if (productTitle) {
      defaultMessage += "お問い合わせの商品：" + productTitle + "\n";
    }
    if (productSku) {
      defaultMessage += "商品コード：" + productSku + "\n";
    }
    $('#ContactForm-body').val(defaultMessage);
  }
});
</script>
<!-- ここまで -->

これにより、商品ページ経由で問い合わせフォームへ遷移した際に、問い合わせ本文のテキストエリアに商品名と商品コード（SKU）が自動入力されるようになります。

この後に続いて本文のテキストを入力していくとやや見づらくなってしまうため、ユーザー側でテキストエリアを任意のサイズに拡大できるようにするなど、工夫を加えるとユーザーにとってより使いやすい仕様になります。

また、本文のテキストエリアに入れ込むのではなく、専用のフィールドを作成して自動入力させる方法も有効です。
その場合は「contact-form.liquid」をさらにカスタマイズする必要がありますので、ご希望の方はぜひお問い合わせください。

まとめ

いかがでしたか？
本記事でご紹介したカスタマイズを行うことにより、エンドユーザーは問い合わせのハードルが下がり、またマーチャントは問い合わせ内容をスムーズに把握できるため対応スピード・正確性が向上します。

このように、ほんの少しのブラッシュアップでユーザー満足度と業務効率を同時に高められるようになります。
Shopifyでサイト制作・運用をされている方はぜひ積極的に活用してみてくださいね。

弊社では、ECサイト制作だけでなくその後の運用までを、成果にコミットした万全のバックアップ体制でご支援しています。
売上最大化のために必要な運用すべてをサポートさせていただきますので、マーチャント様からの運用フェーズのご相談などでお困りの制作者様もお気軽にご連絡ください！