ストアに合わせてカートドロワーを調整する

カートデザインを開き、スタイルを選択します。このタブでは、ドロワー全体の外観と開き方を設定できます。

色を選択する

テーマカラーの行には、公開中のテーマの色が表示されます。色を1つ選び、パレットスタイルとしてクリーン、色付き、ダークのいずれかを選択します。カスタムカラーを選択したり、ランダムな色を試したりすることもできます。

デフォルトでは、ドロワーの幅や角の丸みなどのレイアウトを維持したまま、デフォルトの色に戻します。

1つのブロックの色を変更する

色を編集の最初の行にあるドロワーには、背景、テキスト、アクセント、アクセントテキスト、薄いテキスト、節約額、境界線の基本色が含まれます。その下には、ヘッダー、告知バー、特典バー、アップセル、フッター、チェックアウトボタンなど、ドロワー内の各ブロックに専用の行があります。ブロックをオンにすると、そのブロックの行が表示されます。

ブロックの色を空欄にすると、そのブロックにはドロワーの色が適用されます。テーマカラー、カスタムカラー、ランダムカラー、またはデフォルトを選択すると、すべてのブロックカラーがクリアされ、ドロワーがすっきりした状態になります。

ドロワーのレイアウトを設定する

レイアウトカードでは、ドロワーの位置と動作を設定できます。

• ドロワーの位置: 左端または右端を選択します。
• ドロワーのレイアウト: 「接続」は端に沿って配置し、「フローティング」はドロワーの周囲に余白を設け、端からの間隔を表示します。間隔は0から80pxまで設定できます。
• ヘッダーの高さ: 「デフォルト」または「コンパクト」を選択します。「コンパクト」ではカートタイトルの上下の余白が半分になるため、小さな画面でもカートにより多くの内容を表示できます。
• ドロワーの幅: 280から700pxまで設定できます。
• 商品追加時にカートを開く: 下記の自動表示を参照してください。

エディタープレビューには、コントロールを使いやすくするための固定幅が設定されています。保存してストアフロントを確認し、実際のドロワー幅を判断してください。画面が狭い場合、ドロワーの幅は利用可能なスペースに制限されます。

形状とテキストを設定する

「形状とテキスト」カードでは、仕上げの設定を行えます。

• 角の丸み: 0から20pxまで設定できます。
• テキストサイズ: 90から120%まで設定できます。ドロワー内のすべてのテキストを一度に拡大縮小し、テーマのフォントを維持します。
• 影: 奥行き効果をオンまたはオフにします。

商品画像を調整する

画像の形は正方形または縦長（3:4）です。カート内商品の画像とすべてのアップセル画像に適用されるため、ドロワー全体で同じようにトリミングされます。

画像カードでは、すべての画像サイズを一か所で設定できます。カート内商品画像のサイズ、リスト形式のアップセル画像のサイズ（縦リストおよび一度に1つのレイアウトのアップセル）、カルーセルとサイドアップセルの画像サイズ（カルーセルレイアウトとすべてのサイドアップセルカード）、追加商品の画像サイズです。

カート内商品画像の枠線を有効にすると、カート内の各商品画像の周囲に細い線が表示されます。画像の背景が白い場合に有効にすると、ドロワー内で画像が見やすくなります。新しいカートでは初期状態で無効になっており、アップセル画像と追加商品の画像には枠線が付きません。

自動表示を設定する

商品追加時にカートを開くはレイアウトカードにあります。無効にすると、商品追加後に自動的に開かなくなります。購入者は引き続きカートアイコンからドロワーを開けます。

この例では、青いテーマカラーに「色付き」と「フローティング」を組み合わせることで、ドロワーが淡い青色の背景になり、16pxの間隔が設定されています。保存して、デスクトップとモバイルでストアフロントを確認してください。これらの設定以外を変更する場合は、カスタムHTMLとCSSを参照してください。カスタムCSSは「スタイル」の下部にある詳細設定の下に配置されます。