【Shopify】注文完了画面に任意のコンテンツを表示する

こんにちは。大野です。

今回のメモはこれ↓

注文完了画面に何かしらの内容を出す方法の備忘録です。

任意のコンテンツって何？

例えば、
・特定の商品やカテゴリーを買った際に出したいコンテンツ
・イベント開催中の場合はその告知
・カートメモ（備考）の内容を表示　←　今回はこれの調査の延長の備忘です。
といった時に表示する方法です。

今回は以前に書いた記事の続きとして方法をまとめました。

表示の仕方

1. 「設定 > チェックアウト」ページを開き、「注文処理」の「追加スクリプト」の入力欄を使用します。

以下、注意書き

これは高度なチュートリアルであり、Shopifyではサポートされていません。HTML、CSS、JavaScript、Liquidなどのウェブデザイン言語の知識が必要です。以下のチュートリアルを実行する自信がない場合、Shopify Expertを雇う ことをおすすめします。

2. 「追加スクリプト」の欄に以下を追加

{% if note != blank %}
 <script>
   Shopify.Checkout.OrderStatus.addContentBox(
     '<h2>注文備考:</h2>',
     '<p>{{ note }}<p>'
     )
 </script>
{% endif %}

カートメモ（備考）の記述があれば表示されるようにしています。

3. 実際の表示

今回はカートメモの内容を表示しましたが、応用すれば告知や誘導など利用方法が広がりますね。

最後に表示や動作確認は必ず行いたいと思います。

以下参考

注文状況JavaScriptアセット

アプロ総研では『はじめてEC』というサービスを運営しています。
EC初心者に向けて、初期構築を弊社が行いすぐに販売可能なサイトをお作りいたします。月々のサポートやウェビナーも開催されますのでEC初心者にも安心してご利用いただけます。

ご契約やサービス内容を詳しく知りたい場合は以下のお問合せページよりご連絡をお待ちしております！

はじめてECの説明ページ