Cart popup
Popup style cart option in Pipeline
Last updated
Popup style cart option in Pipeline
Last updated
The Cart Popup style in Pipeline brings attention to the middle of the screen with an overlay-style cart. While also making it easy for shoppers to access their cart details, and with full controls to manage items in their cart before proceeding to checkout. The Check-out button at the bottom displays their order subtotal.
This popup style along with the drawer style is popular for mobile and desktop shoppers allowing customers to quickly view and manage their cart items without disrupting their shopping flow. It also simplifies the checkout process.
Use the "Cart Drawer" under the Overlay group to manage the Popup cart options. These are both overlay cart styles and the settings are managed together under Cart Drawer.
In the Overlay group, click on Cart Drawer (both popup and drawer share the same settings)
When you click on "Cart Drawer" in the Overlay group, you'll have options to customize the Popup Cart:
The Cart Drawer (orange highlight) under the Overlay group has settings to manage the Cart Drawer and the Popup Cart styles in Pipeline.
The Cart (gray highlight) under the Template group has a separate set of settings to manage only the Page style cart. The Page version can incorporate additional sections.
The Cart Drawer (used for Popup and Drawer styles) includes a few features you can activate and customize for your customers:
Estimate shipping An accordion-based shipping cost calculator with country and region lookup. Prices are based on your shipping prices configured in the main Shopify Admin settings.
Show quantity selectors Toggle to show or hide the quantity value and buttons
Show product vendor Toggle to show or hide the vendor name
Show Cart notes Include a mini-input form for customers to add additional notes with their order like engraving details or custom information regarding products ordered.
Free Shipping message This dynamic message informs customers how close they are to qualifying for free shipping. The threshold is set in the Theme Settings -> Cart. The message text is configured in the Cart section settings along with a toggle to show or hide. When the threshold is reached, an animated congratulations message is displayed.
Custom Cart message A badge-styled message box where you can display a coupon code or other short important information.
Colors Change the background color of the Cart drawer
Additional Checkout buttons Show or hide the additional payment methods like Apple Pay, Google Pay, Amazon Pay, and PayPal. This is not recommended for the Popup cart due to the size these buttons occupy. When unchecked, these buttons will appear on the Checkout page.
The Empty cart link has been moved to the Theme Settings -> Cart
You can customize the default link for shoppers to use if their cart is empty when viewing the cart. This is an opportunity to send them to a collection with special promotions or featured products.
