Skip to main content
Aftersell Cart のデザインは 2 つのレベルで機能します。カート全体にスタイルを当てるグローバル設定と、個々のブロックを微調整するブロックごとの上書きです。

​
グローバルデザイン設定

エディタのサイドバーから Cart settings を開くと、カートのグローバルデザインにアクセスできます。設定は Design、Buttons、Layout にグループ分けされています。

​
Design

​
Buttons

​
Layout

​
ブロックごとのデザイン上書き

Custom code を除くすべてのブロックには、設定パネルの下部にブロックごとのデザイン上書きがあります。Express payments 以外のすべてのブロックでは Design という見出しが付き、Express payments の上書きはラベルのない Style と Spacing のセクションにあります。（Custom code には設定パネル自体がありません。ブロックそのものがコードなので、Code タブだけが表示されます。）これらはスタイル、余白、その他のブロック固有のデザイン設定を制御します。これらのブロックごとのデザイン設定は、空欄の場合、そのプロパティのグローバル設定にフォールバックします。 多くのブロックには、Design パネル内に Text セクションもあり、そのブロック内の特定のテキスト要素のタイポグラフィ(フォントファミリー、サイズ、行の高さ、文字間隔)を設定できます。テキスト要素が複数あるブロック(Notes や Empty cart など)には Text element ピッカーが表示され、それぞれを個別にスタイリングできます。
カートエディタのブロックごとの Design 設定パネルのアニメーションプレビュー

​
フォントとドロワーの位置

  • フォント: カートはデフォルトでテーマのフォントを継承します。各ブロックのデザイン設定の Text セクションから、特定のテキスト要素（商品タイトルやアップセルの見出しなど）にカスタムフォントファミリーを設定できます。詳細は Cart itemsブロック と Upsellsブロック を参照してください。
  • ドロワーの位置: ドロワーの幅は調整できます（上記の Desktop width）。左右の位置設定はありません。

​
動作設定

スタイリングに加えて、Cart settings には動作オプションもあります。カートへの追加時にドロワーを開く設定や、ストアフロントを同期させるテーマセレクターなどです。Cart settings を参照してください。

​
カスタム CSS を使うべきとき

組み込みの設定は一般的なケースをカバーします。それを超えるもの（特定の要素を対象にする、独自の余白、レスポンシブの微調整）には、Custom CSS を使ってください。