商品情報にスキップ
1 1
公開日:2023.05.26

Shopifyのテーマ「Dawn」のカートページにコンテンツ(セクション)を追加した際に、カートが空の時のみ表示し、商品がある場合は表示させない方法

Shopifyのテーマ「Dawn」のカートページにコンテンツ(セクション)を追加した際に、カートが空の時のみ表示し、商品がある場合は表示させない方法

用途

  • カート編集

実装方法

  • Javascript
詳細を表示する

そこまで効果があるわけでは無いのですが、Allbirdsのように中身が空のカートページに商品やコレクションへの導線を表示しておくのも良いですね。 中身に応じて表示・非表示されるようにしつつ、空にした瞬間も画面を更新せずに表示されるようにした設定例です。


テーマ「Dawn」のカートページにコンテンツ(セクション)を追加した際にカートが空の時のみ表示し、商品がある場合は表示させない方法


カートページテンプレートに必要なセクションを配置し、それとは別にカスタマイズされたLiquidセクションを追加


ご購入(すべて¥0です)いただくと、サンプルコードをご覧いただけるようになります。

すでにご購入済みの方はこちらからログインしてください。

サンプルコード

動作検証済テーマ:Dawn/Rise 15.2.0

カートページテンプレートに必要なセクションを配置し、それとは別にカスタマイズされたLiquidセクションを追加

関連ポスト