Dawn Theme - How to add dynamic buttons to cart drawer

Store Design
1

IMG_7304.jpeg
IMG_7304.jpeg1290×1588 62 KB

I am looking to add the dynamic checkout buttons to the cart drawer on dawn theme for mobile and desktop like on the picture

2

Hi @undercoverfresh ,

I am from Mageplaza - Shopify solution expert.

To add dynamic checkout buttons (Shop Pay, PayPal, etc.) to your Dawn theme’s cart drawer on both mobile and desktop, follow these steps:

1. Edit cart-drawer.liquid
Locate the file: Sections > cart-drawer.liquid

Find the checkout button code (look for cart__checkout-button).
Add this code RIGHT AFTER the checkout button:

{% comment %} Add dynamic checkout buttons below {% endcomment %}

  {{ content_for_additional_checkout_buttons }}

2. Add CSS Styling
Add this CSS to your theme (in theme.css, base.css, or via Theme Settings > Custom CSS):

/* Dynamic buttons container */
.cart-drawer__dynamic-checkout-buttons {
  margin-top: 1.5rem;
  width: 100%;
}

/* Mobile-first styles */
.additional-checkout-buttons {
  width: 100% !important;
}

.dynamic-checkout__button {
  margin-top: 0.5rem !important;
}

/* Desktop adjustments */
@media (min-width: 750px) {
  .cart-drawer__dynamic-checkout-buttons {
    margin-top: 1rem;
  }
  
  .dynamic-checkout__button {
    max-width: 100% !important;
  }
}

This implementation matches Dawn’s styling while ensuring proper functionality across devices. The buttons will automatically adapt to your store’s enabled payment methods.

Please let me know if it works as expected

Best regards!