Skip to main content

はじめに

モバイルカートの幅をお好みに合わせてカスタマイズするチュートリアルへようこそ!モバイルカートの幅を調整すると、小さな画面でもカートが見やすく操作しやすくなり、お客様のショッピング体験を大きく向上させることができます。このカスタマイズによりレイアウトをコントロールでき、ストア全体のデザインにシームレスにフィットし、すっきりと整った見た目を保てます。 これらの手順は、基本的な CSS の知識を持つストアオーナーや開発者向けに設計されています。モバイルカートの幅を微調整することで、使いやすさが向上し、お客様のチェックアウトプロセスがよりスムーズになり、コンバージョンと顧客満足度の向上につながる可能性があります。 さっそく始めて、モバイルカートの見た目と動作を思いどおりにしましょう!

カスタム CSS 設定へのアクセス

Upcart の CSS のカスタマイズを始めるには、次の手順に従ってください:
  1. ダッシュボード内で Upcart アプリを開きます。
  2. Cart Editor に移動します。
  3. Settings を開き、Custom CSS タブを選択します(タブが収まりきらない場合は More settings の中にあります)。

カスタム CSS の適用

Custom CSS セクションに入ったら、以下の手順に従ってモバイルカートの幅を変更できます。数値を 90% から任意の数値に変更してください。数値が大きいほど、カートが画面を占める割合が大きくなります。(注:これは Upcart の V1.0 と V2.0 の両方に適用されます)
  1. CSS の入力エリアを見つけます。
  2. 以下のコードをコピーして CSS の入力エリアに貼り付けます:

まとめ

このチュートリアルに従うことで、モバイルカートの幅のカスタマイズが完了し、より使いやすく、ストアのデザインに合ったものになりました。こうした小さな変更は、お客様のショッピング体験に大きな影響を与え、モバイルデバイスでの閲覧や購入をより簡単にします。

まだサポートが必要ですか?

カスタマイズに関する支援が必要な場合は、カートドロワーへの HTML、CSS、さらには JavaScript の追加について、Shopify Expert への相談をおすすめします。 Shopify Experts を見る