スマホのチェックアウト画面に商品名がアコーディオンになっていて表示されない

AI-generated summary

スマホ版チェックアウトで、注文内容(商品名など)が「注文内容の表示・クーポンの入力」というアコーディオンに隠れており、初期状態で閉じていて見えにくい。PC版は常時表示で、スマホでもデフォルトで開いた状態にしたい(設定やCSSでの対応可否を確認)。

回答:管理画面の標準設定以上にチェックアウト(決済画面)のUIを変更するにはShopify Plus(上位プラン)が必要。Plus以外ではアコーディオンの開閉状態などは編集不可で、スクリプトによるカスタマイズは「注文状況(Thank you)ページ」に限定。2021年に発表されたCheckout App Extensionsで非Plusでもカスタマイズ可能にする計画はあるが、現時点では未実装との情報。

結論:質問者は「デフォルト開き」にしたい意図を再確認し、Plus未契約では対応不可と理解して当面は断念。議論は結論に至りクローズ。

PCはチェックアウト画面に商品名や価格などが表示されるのですが、スマホのチェックアウト画面は価格のみ表示されて「注文内容の表示・クーポンの入力」と記載があり商品名はアコーディオンで隠されています。

「注文内容の表示・クーポンの入力」をクリックすると商品名などの注文内容の詳細がアコーディオンで表示されますが、これが分かりにくくデフォルトで注文内容の詳細は全部表示されていてほしいです。

そのための設定はありますでしょうか?

CSSでアコーディオンを外すようなコーディングをする形になりますでしょうか?

ご質問内容を私が勘違いしていなければ良いのですが、

スマホで、チェックアウト画面にアクセスした際の「注文内容の表示・クーポンの入力」の表示を変更するには、

Shopify Plusの契約が必要になるのではないかと思います。

現時点で、チェックアウト画面に、管理画面で設定できる以上のカスタマイズを施すには、Shopify Plusを契約するしか方法がないからです。

(Thank you 画面 (注文状況ページ) は、追加スクリプトである程度カスタマイズできるのですが。。。)

おそらく、Shopify Plus以外のプランでできるチェックアウトのカスタマイズは下記になるかと思います。

https://help.shopify.com/ja/manual/checkout-settings

昨年(2021年)、

checkout app extensionsによって、アプリ導入でShopify Plusではないプランでも、チェックアウト画面をカスタマイズできるようにするというアナウンスがあったのですが、

https://www.shopify.com/jp/blog/partner-shopify-unite-announcements-2021

下記のページを見るに、実装はまだのようです。

https://shopify.dev/api/checkout-extensions

ご参考まで。

(キュー田辺)

ご回答ありがとうございます。

「注文内容の表示・クーポンの入力」の表示を変更するには、

ではなく、SPではアコーディオンで注文内容が開閉できるようになっていて(PCはアコーディオン無し)デフォルトは閉じているのですが、ぱっと見た時に注文内容が表示されていないように見えてアコーディオンで開閉できるようになっているのに気付かないので、デフォルトでアコーディオンを開いていきなり注文内容が表示されるようにしたいと思っておりました。

自分でも調べましたところチェックアウト画面はプラスを契約してないと編集できない事が分かりました。

アコーディオン開閉式でデフォルトで閉じていると、注文内容が見えなくてお客様が自分が注文した商品が確認できないのが不安要素になるのではと考えています。

今のShopifyではプラスの契約をしないとそこは触れなさそうなので一旦諦める事にします。

ご回答ありがとうございました。