Cart & Checkout

The cart experience is crucial for conversions. Edpro includes a sleek cart drawer with advanced features.

Cart Drawer

The cart drawer slides in from the right side when customers:

• Click the cart icon in the header
• Add a product to their cart

Cart Drawer Features

• Cart items list - All products with images, titles, variants, and prices
• Quantity controls - Easy quantity adjustment
• Remove items - One-click removal
• Progress indicator - Optional spending goal tracker
• Product recommendations - Suggested products
• Subtotal - Order total before checkout
• Checkout button - Proceed to checkout
• Payment icons - Accepted payment methods

Accessing Cart Settings

1. Open the theme editor
2. Go to the Modals section group
3. Click on Cart Drawer

Progress Indicator

Encourage larger orders with a visual spending goal.

How It Works

1. Set a spending threshold (e.g., $100)
2. Progress bar shows how close customer is to the goal
3. Displays remaining amount needed
4. Icons indicate milestones reached

Settings

Progress Steps (Blocks)

Add milestone blocks to show progress icons:

1. Click Add block → Progress step
2. Set the amount threshold
3. Choose an icon (package, cart, tickets, etc.)
4. Add up to 3 progress steps

Product Recommendations

Display recommended products in the cart to increase order value.

Settings

Recommendation Sources

• First item - Based on the first cart item
• Mixed - From all cart items
• Fixed - Manually selected products
• Collection - From a specific collection

Cart Items Display

Each cart item shows:

• Product image - Thumbnail with click-to-view
• Product title - Linked to product page
• Variant options - Selected options (size, color)
• Quantity dropdown - Quick quantity adjustment (1-10)
• Remove button - Delete item from cart
• Price - Line item total with discount display

Discount Display

When discounts apply:

• Original price shown with strikethrough
• Discounted price in highlight color
• Savings clearly visible

Empty Cart State

When the cart is empty:

• Friendly message displayed
• Cart icon with empty indicator
• Link to continue shopping
• Directs to collections page

Checkout Flow

The checkout button:

1. Links to Shopify’s secure checkout
2. Transfers all cart items and customer data
3. Supports dynamic checkout (Shop Pay, Apple Pay)

Payment Icons

Display accepted payment methods to build trust.

Adding Payment Icons

1. In Cart Drawer, click Add block
2. Select Payment list
3. Configure display settings

Settings

• Mobile/Desktop visibility toggles
• Icon size (small, medium, large)
• Automatically shows your configured payment methods

Custom Payment Icons

To use custom payment icons:

1. Go to Theme settings → Payment icons
2. Upload custom images for each payment method
3. Icons appear in cart and footer

Main Cart Page

The main cart page (/cart) provides a full-page cart experience:

• Same items as cart drawer
• More space for additional information
• Alternative for customers who prefer full-page view

Common Tasks

Enable progress indicator

1. Cart Drawer section
2. Check “Show progress indicator”
3. Set progress text and threshold

Add product recommendations

1. Cart Drawer section
2. Enable “Show recommendations”
3. Configure source and limit

Change recommendation products

1. Cart Drawer section
2. Set source to “Fixed”
3. Select products in “Recommendations products”

Add payment icons

1. Cart Drawer → Add block → Payment list
2. Configure visibility and size

Troubleshooting

Cart not opening

• Check if cart drawer section is in the template
• Verify no JavaScript errors in console

Items not adding to cart

• Check product availability
• Ensure product form is correctly configured

Progress bar not updating

• Verify threshold amounts in cents
• Check cart total calculation

Recommendations not showing

• Ensure products exist in source
• Check if products are in stock
• Verify collection has products

Need more help? Contact support