SScale Themedocs
FR

The sliding side cart with all its options - type, position, coupon code, notes, trust badges, and customizable blocks.

Cart Drawer

The Cart Drawer is the side cart panel that opens from the edge of the screen. It is the default cart mode of Scale Theme, offering a smooth shopping experience without leaving the current page.

Cart modes

Scale Theme offers two modes for the cart:

ModeDescription
Drawer (default)Sliding side panel
PageDedicated classic /cart page
SettingOptionsDefault
Cart typeDrawer / PageDrawer
Open on addAutomatically opens the drawer when a product is addedYes
💡The Drawer mode is recommended for conversion. It allows the customer to see their cart without leaving the page, reducing friction and making it easy to return to browsing.

Position

SettingOptionsDefault
PositionRight / LeftRight

Drawer structure

The Cart Drawer is organized into 3 zones:

  • "Cart" title with the number of items
  • Close button (X)

Body (scrollable)

  • Timer (optional)
  • Progress bar (optional)
  • Custom Liquid (position: above items)
  • Cart item list
  • Upsells (position: scroll, optional)
  • Custom Liquid (position: below items)
  • Upsells (position: fixed, optional)
  • Quick Add Products (optional)
  • Coupon code field (optional)
  • Custom Liquid (position: above totals)
  • Price breakdown (subtotal, savings, total)
  • Tax/shipping note (optional)
  • Cart note (optional)
  • Custom Liquid (position: above checkout)
  • Checkout button
  • Accelerated checkout (Apple Pay, Google Pay, Shop Pay)
  • Trust badges (optional)
  • Custom Liquid (position: below checkout)

Timer

A countdown timer that creates a sense of urgency:

SettingDescriptionDefault
Enable timerActivates the countdownNo
DurationTimer duration (5-30 min)15 min
MessageText with $time placeholder"You have $time to complete your order!"
Color paletteTimer background colorBackground 1
ℹ️The $time placeholder in the message is dynamically replaced by the remaining time. Example: "You have 14:32 to complete your order!"

Coupon code field

SettingDescriptionDefault
Enable discount fieldShows a field to enter a coupon codeYes

The coupon code field allows the customer to apply a code directly in the drawer. A success or error message is displayed after application. Applied codes appear with a remove button in the price summary.

Checkout button

SettingDescriptionDefault
Button textCustom checkout button text"Check out"

Cart note

SettingDescriptionDefault
Enable noteTextarea field for customer messageYes

Tax/shipping note

SettingDescriptionDefault
Show tax note"Taxes included" mention and shipping policy linkYes

Trust Badges

Trust badges reinforce confidence at the critical checkout moment:

SettingDescriptionDefault
Enable trust badgesShows trust badgesNo
Show payment badgesIcons of active payment methods (Visa, MC, etc.)Yes
Custom imageUpload an image (custom badges, certifications)-
Image widthCustom image width (50-400px)200px
SpacingGap between badges (0-40px)16px

, and a custom trust badge image)

💡Combine automatic payment icons (detected from your Shopify payment gateways) with a custom image containing your certifications, guarantees, or security badges.

Blocks

The Cart Drawer supports the following blocks:

Cart Tier

Progress bar tier. See Free shipping progress bar.

SettingDescription
TypeShipping / Gift
ThresholdAmount to reach
MessageText with $amount placeholder
Success messageText when the tier is reached
IconTruck / Package / Gift / Star / None
Gift productProduct offered (if Gift type)

Custom Liquid

Custom Liquid code block injectable at different positions in the drawer.

App

Shopify app block.

Quick Add Products

Quick-add products that can be added to the cart in one click:

SettingDescriptionDefault
Enable Quick AddActivates quick productsNo
ProductsProduct list (max 5)-
Label 1-5Custom label for each product-
ℹ️Quick Add items are different from Upsells. Quick Add items are small quick buttons (like "add-ons"), while Upsells are product recommendations with image and price. See Cart Upsells.

Interactions

  • Opening: click on the cart icon, add to cart, cart:open event
  • Closing: X button, click on the overlay, Escape key
  • Quantity: +/- buttons and direct input field
  • Removal: delete button per item
  • Accessibility: role="dialog", aria-modal="true", focus trap
PreviousProgressive GiftsNextFree Shipping Bar