Skip to main content

Step-by-step guide to Set Up Custom Cart Drawer

Learn how to set up custom cart drawer

Andrey Gadashevich avatar
Written by Andrey Gadashevich
Updated over a month ago

Step 1: Initial App Setup

  1. Install and open the Cartly Cart Drawer app from your Shopify admin

  2. On the home screen, you'll see a setup guide showing "0 / 2 completed"

  3. Click the "Enable" button next to "Enable app in the theme"

  4. Next, click "Choose a feature" to select a feature

Step 2: Choose Your Cart Features

  1. In the "Core features" section, you can create different cart options:

    • Custom cart: Full-featured cart with upsells, progress bars, and advanced options

    • Checkout Redirect: Simple add-to-cart button that redirects to checkout

    • Buy Now Button: Direct purchase button bypassing the cart

    • Sticky Add to cart Bar: Fixed bottom bar for easy cart access

    • Sticky Checkout Bar: Fixed checkout button for persistent visibility

  2. Select any feature and toggle it ON (paid options apply)

Step 3: Basic Settings Configuration (for "Custom Cart Drawer")

  1. Click on the feature you've toggled on

  2. Configure these essential options:

    • Open Cart Drawer on cart icon click: Enable this for automatic drawer opening

    • Show compare at price: Display original vs. sale prices

    • Show Save label below product prices: Highlight savings to customers

    • Show "Continue shopping" button: Optional - adds a button to continue browsing

    • Show "View cart" button: Optional - adds link to full cart page

Step 4: Design Customization

  1. Click Design in the left sidebar

  2. Here, you can customize your cart drawer appearance (colors).

  • Font Settings: The font automatically inherits from your theme, but you can customize it following Cartly's font guide.

Step 5: Translation and Text Customization

  1. Go to Translations in the left sidebar

  2. Customize all text that appears in your cart drawer:

    • Cart Title Label: Default is "Your Cart ({{number_of_items}})"

    • Save: Text for save/apply buttons

    • Subtotal Label: Cart subtotal text

    • Checkout button: Main checkout button text

    • Empty cart label: Message when cart is empty

    • Empty cart description: Additional empty cart message

    • Continue shopping button: Text for continue shopping link

    • View cart button: Text for view cart link

    • Terms and conditions agreement error: Error message text

    • Upsells Title: "You might also like" section header

    • Add to cart button: Upsell product button text

Step 6: Feature Configuration

Announcement Bar

  1. Click Announcement bar under Features

  2. Toggle Enable to activate

  3. Configure:

    • Bar style: Choose Full width or Rounded

    • Position: Select Top fixed, Top, or Bottom

    • Announcement message: Add your promotional text with formatting

    • Timer duration: Set countdown timer (in minutes)

    • Action after timer expired: Choose Hide message, Restart timer, or Clear cart

Free Shipping Progress Bar

  1. Click Free shipping progress bar under Features

  2. Toggle Enable to activate

  3. Set Minimum purchase amount: Amount needed for free shipping (e.g., 200)

  4. Customize messages:

    • Goal reminder message: "You are {{amount}} away from free shipping"

    • Goal achieved message: "Free shipping unlocked!"

  5. Choose Position: Top or Bottom of cart

Order Notes

  1. Click Order notes under Features

  2. Toggle Enable to activate

  3. Customize:

    • Order notes label: Field title with formatting options

    • Order notes placeholder: Placeholder text like "Special instructions for your order"

    • Order notes position: Above Checkout button or Below cart items

Discount Code

  1. Click Discount code under Features

  2. Toggle Enable to activate

  3. Set up:

    • Discount code field placeholder: "Discount code"

    • Button label: "Apply"

    • Error message: "Enter a valid discount code"

Terms and Conditions Checkbox

  1. Click Terms and conditions checkbox under Features

  2. Toggle Enable to activate

  3. Configure:

    • Edit the agreement text: "I agree to the terms and conditions"

    • Terms and conditions checkbox pre-ticked by default: Optional auto-check

Installment Payment

  1. Click Installment payment under Features

  2. Toggle Enable to activate

  3. Set up:

    • Quantity of payments: Number of installments (e.g., 4)

    • Installment payment label: Custom text with variables

    • Show installment provider logo: Display payment provider badges

    • Choose from: Afterpay, Klarna, Affirm, Shop Pay, Sezzle

    • Add image: Upload custom payment provider logos

Trust Badges

  1. Click Trust badges under Features

  2. Toggle Enable to activate

  3. Configure:

    • Trust badges message: "Guaranteed Safe & Secure Checkout"

    • Trust badges image: Shows payment icons (Apple Pay, Google Pay, PayPal, etc.)

    • Use the free payment icons set or upload custom images

    • Trust badges position: Below Checkout button, Above Checkout button, or Above Subtotal

Express Payments

  1. Click Express payments under Features

  2. Toggle Enable to activate

  3. Choose layout: Vertical or Horizontal

  4. Select which express payment buttons to show:

    • Shop Pay

    • Apple Pay

    • Google Pay

    • PayPal Pay

    • Amazon Pay

    • Venmo Pay

Additional Info

  1. Click Additional info under Features

  2. Toggle Enable to activate

  3. Add informational text: "Taxes and shipping will be calculated at the checkout"

  4. Choose Position: Above Checkout button or Below Checkout button

Step 7: Upsell Configuration (Advanced)

  1. Navigate to Upsell under the "Growth" section

  2. Click Upsell and cross-sell to configure product recommendations

  3. Set up product suggestions that appear in the cart to increase average order value

Step 8: Final Activation

  1. Once all features are configured, the cart drawer will automatically be active

  2. The toggle switch at the top shows "On" when the cart drawer is enabled

  3. Test your cart drawer by:

    • Adding products to cart

    • Clicking the cart icon

    • Verifying all features work as expected

    • Testing on mobile devices

Did this answer your question?