How to put total amount next to checkout text in cart drawer

Topic summary

A user seeks to customize their Dawn theme cart drawer by repositioning the total price next to the checkout button text and relocating the shipping/tax notice.

Solution Provided:
A community member shared CSS code to achieve the desired layout changes:

  • First snippet removes spacing issues with social menu elements
  • Second snippet uses flexbox (flex-direction: column-reverse) to reorder cart drawer footer elements, moving the total price display above the checkout button

Current Status:
The CSS solutions successfully resolved the initial layout request. However, a follow-up issue emerged: dynamic payment buttons in the cart drawer are displaying incorrectly at the top of the page instead of their intended position. The user is now seeking additional code to fix this button placement bug.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.

I’m looking to move the total price next to the checkout text within the checkout button on cart drawer on dawn theme and remove the estimated total and move the shipping & tax calculated at checkout text like this

URL knmb1c-pf.myshopify.com

password samurai

1 Like

Hi @undercoverfresh

You pm me recently, this is the answer of your question.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.menu-drawer .list-social {
    margin: 0;
}

.header--has-social .menu-drawer__utility-links {
    padding-bottom: 0 !important;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like

And for this post try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.drawer__footer {
    display: flex;
    flex-direction: column-reverse;
}

.drawer__footer .cart__ctas {
    order: 1;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like

The codes worked perfectly but would you happen to have the code you used to put the dynamic buttons in the cart drawer? The one I used has a bug where it displays it on the top of the page.