ディレクターの田辺です。Plusじゃないとカスタマイズできない」そんなふうに考えていた時期が私にもありました。Plusではない、ベーシックプランやスタンダードプランであっても、ロケールファイルで設定されている文言であれば、チェックアウト画面の文言を変更可能でした。Plusでなくとも、文言変更以外の変更を、チェックアウト画面に加えることができます。Functionsを使用したチェックアウトのカスタマイズ方法をご紹介します。Functionsとはhttps://shopify.dev/docs/api/functionsShopifyアプリの拡張機能の1つです。Functionsも、そのようなShopifyアプリの拡張機能の1つとして提供されています。Functionsを利用することで、下記のようなことができます。Functionsが制御できるのは、ロジックのみです。チェックアウト画面に何か要素を追加する、ことはできません。Plusでのみ利用できます。Extensionsは、「要素を追加する」ことはできても、チェックアウト画面に元々存在する要素に変更を加えることはできません。配送方法や支払方法を選択するUIは、Shopifyのチェックアウト画面に元々備わっているものです。Extensionsにはできないのです。Functionsというわけです。チュートリアルを実際にやってみるhttps://shopify.dev/docs/api/functions#getting-startedこちらのページに懇切丁寧なチュートリアルがありますので、ぜひお試しください。本記事では、上記ページで紹介されているチュートリアルに少しだけ手を加えて、実際にありそうなシナリオにしてみます。シナリオ代引決済をさせたくない商品がある商品情報に「代引決済が可能かどうか」のメタフィールド(custom.enableDaibiki)がある代引決済をさせたくない商品が1つでもカートに含まれていたら代引決済をチェックアウト画面の支払方法の選択画面で非表示にするベースとなるチュートリアルhttps://shopify.dev/docs/apps/checkout/payment-customizations/getting-startedこちらのチュートリアルをベースにします。上記チュートリアルを進めてください。3まで進めていただければ大丈夫です。以降は、本記事では扱いません。いうメタフィールドを追加します。flase(boolean)とします。テストしたい商品のcustom.enableDaibikiの値をfalseにしておきます。チュートリアルからの変更点input.graphqlを下記のように変更し、カートに投入された商品のメタフィールドcustom.enableDaibikiを取得できるようにします。}}input.graphqlを保存後、下記を実行します。typegen次に、src/index.jsの内容を下記に変更します。custom.enableDaibikiのタイプはbooleanですが、JSONで返却される都合上、stringとして扱われます。src/index.jsを保存後、下記を実行しデプロイします。deploy最初に実践いただいたhttps://shopify.dev/docs/apps/checkout/payment-customizations/getting-startedを完了されていれば、その際に作成した「決済のカスタマイズ」に今回の変更が反映されます。決済」のページ下部から確認できます。実際に代引不可にした商品をカートに入れチェックアウトを進めていただくと、支払方法の選択画面にて「代引引換」が非表示になっていることを確認いただけるはずです。Functionsを使ったShopifyアプリが既にありますので、そちらをお試しになると良いでしょう。Plusではないストアにインストールして使用可能です。「配送先に応じて配送方法を出し分ける」こともできます。ご興味あれば、お問い合わせいただければ、ある程度までは無料でご相談に乗りますので、お気軽にお問い合わせください。https://techlab.q-co.jp/contact/それでは。ExtensionカテゴリーHTMLJavascriptNode.jsNext.jsReactTypeScriptパフォーマンスShopifyNewRelicDockerCI/CDGitStrapiJestテストDatabaseAWSTechQLab(テックラボ)とは?株式会社キューのWeb技術者によるWeb技術・ノウハウを発信するブログです。