はじめに
Custom CSS 設定へのアクセス
- ダッシュボード内で Upcart アプリを開きます。
- Cart Editor に移動します。
- Settings を開き、Custom CSS タブ(タブの行に収まらない場合は More settings の中)を選択します。
- 次に、コードをコピーして CSS 入力エリアに貼り付けます
- 完了したら「Save をクリック」し、ストアフロントのページを更新して結果をライブで確認します。
CSS で Upcart によってトリガーされるまでモバイルカートの幅をゼロに設定する
CSS を使用して、Upcart によってトリガーされない限りモバイルカートの幅をゼロに設定し、よりすっきりとした洗練されたショッピング体験を実現する方法を学びます。
⚠️ 重要なお知らせ
このカスタマイズは、Upcart のカートモジュールの Version 1 でのみ機能します。最近カートを Version 2 にアップグレードした場合、これらのカスタマイズは機能しない可能性があります。移行ガイドで提供されている Version 2 用の新しいセレクターを使用する必要があります。
カスタマイズが期待どおりに機能しない場合は、自分でカートを Version 1 に戻すことができます: Cart Editor で、左側メニューの上部にある Cart version ドロップダウンを使用し、V1.0 (Legacy) を選択します。このドロップダウンは、カートのすべてのモジュールが V2 になると表示されます。
現在、モジュールの Version 2 用の新しいカスタマイズテンプレートを準備しており、まもなく利用可能になります。
この CSS チュートリアルへようこそ。ここでは、Upcart によってトリガーされない限り、モバイルカートの幅をゼロに設定する方法を紹介します。これは、顧客がカートを表示する準備ができるまでカートを非表示にし、モバイルのショッピング体験を効率化する便利な方法です。
このガイドは、基本的な CSS の知識を持つストアオーナーや開発者向けに設計されています。このカスタマイズを使用すると、カートを視界の外に置いてページレイアウトを改善し、気を散らす要素を減らして、顧客が買い物に集中できるようにします。ストアのモバイル体験に大きな違いをもたらす小さな調整です。
さっそく始めて、モバイルカートをよりスマートに機能させましょう!
Upcart の CSS のカスタマイズを始めるには、次の手順に従ってください:
以上です! これで、Upcart によってトリガーされるまでモバイルカートの幅をゼロに変更し、よりすっきりとした、集中できるショッピング体験を作る方法を学びました。
Upcart のサポートチームは、カート内のカスタム CSS や HTML ソリューションの実装に関するサポートは提供できません。
カスタムのデザインやスタイリングのサポートが必要な場合は、Shopify エキスパートへの相談をおすすめします:
Shopify エキスパートを見る