Athora Pages & Homepage Sections Cart

Cart Drawer

The cart drawer allows customers to view and manage their cart without leaving the current page. It provides a faster checkout flow and can help reduce cart abandonment by keeping the shopping experience uninterrupted.

In Athora, the cart drawer can also display additional cart tools, promotional content, complementary products, and collection suggestions when the cart is empty.

1. Access the cart drawer settings

From your Shopify admin, go to Online Store → Themes → Customize.

Open Overlay group → Cart drawer.

2. Cart drawer settings

Features

Use these settings to control the optional features displayed in the cart drawer.

  • Enable free shipping bar: Displays the free shipping bar. See this guide for setup instructions.

  • Enable gift wrap: Shows a gift wrap option in the cart drawer. Follow this guide to set it up.

  • Shipping protection: Add an optional fee to protect the shipment against loss, damage, or theft. You choose product in Theme settings > Cart to make this option work.

  • Enable cart note: Allows customers to leave a note with their order.

  • Enable shipping: Displays the shipping section in the cart drawer.

  • Enable discount code: Displays the discount code section in the cart drawer.

Buttons

Use these settings to control the cart drawer action buttons:

  • Show view cart

  • Show check out

  • Empty button link

  • Show button icon

  • Icon button

  • Image ratio

Promotion bar

Use the promotion bar to display a short message inside the cart drawer.

  • Message: Sets the promotion text. If left blank, the promotion bar is hidden.

  • Icon: Select an icon to display alongside the promotional message.

  • Custom SVG Icon: Add a custom SVG icon using icon libraries such as Remix Icon or Font Awesome.

  • Custom Image Icon: Upload a custom image to replace the default icon. The recommended image size is 32 × 32px.

  • Enable Scrolling Text: Enable this option to make the promotional message scroll automatically across the bar.

    • When enabled: The promotional message will scroll continuously across the bar, creating a marquee effect.

    • When disabled: The promotional message will remain static and automatically wrap onto multiple lines if the content is too long.Speed: Controls the scrolling speed of the message.

  • Speed: Controls the scrolling speed of the message.

  • Direction: Controls the scrolling direction.

  • Uppercase: Enable this option to display the promotional message in uppercase letters.

Complementary products

The cart drawer can display additional products to encourage larger orders.

  • Heading

  • Product list

  • Replaces selected products: Replaces the selected Product list with the complementary products of the first item in the cart, configured in Shopify Search & Discovery. See this guide.

If no complementary products are set, the selected Product list will be shown instead.

  • Auto-rotate

  • Change every

  • Pause on hover

Appearance

Use these settings to control the visual style of the cart drawer.

  • Color scheme: Applies a color scheme to the cart drawer.

  • Cart action color scheme: Applies a color scheme to the cart action buttons.

  • Indent: Adjust the indentation or spacing of the content.

  • Blur: Apply a blur effect to the content.

  • Width: Set the width of the Cart Drawer. This setting applies only to screens with a width of 480px or wider.

Some cart drawer features depend on additional theme settings.

  • Product: Choose product to taken free shipping minimum amount. See this guide.

  • Choose product gift wrap: Select the product used for this feature. See this guide.

  • Indent: Adjusts content spacing.

  • Blur: Applies a background blur effect when the cart drawer is open.

  • Currency codes: Shows or hides currency codes.

  • Custom shipping policy URL: Adds a custom shipping policy link.

4. Empty cart collections

You can display collection suggestions when the cart drawer is empty to help customers continue shopping.

In Cart drawer, add a Collection block.

Each Collection block includes the following settings:

  • Collection: Selects the collection to display.

  • Image: Sets the collection image. By default, the collection image is used.

  • Title: Sets a custom title. By default, the collection title is used.

  • Link: Sets the destination URL. By default, it links to the selected collection.

Collection blocks only appear when the cart is empty.

If you would like our team to check your setup, please contact us on Live chat.