Center align subtotal block on cart page (Dawn 2.0 theme)

Store Design
1

Hello! I have a pretty unique product with a lot of different variables…therefore, the details of my product on my cart page go pretty long and then the checkout button is not visible on the screen and it’s not obvious that the user needs to scroll down.

To help with this, I was going to move my checkout button to the top of the page and add some helper text for the user to know to scroll down if they want to review their order.

But… it looks really odd (screenshot below) because I can’t get the subtotal block (w/ checkout button) to center-align to match up with my Rich Text header. Can someone help me center-align the subtotal/checkout button block? Thank you so much!

My website is www.trykindred.com

Theme is Dawn 2.0

mattmark_0-1657308136210.png
mattmark_0-1657308136210.png1066×735 38.5 KB

2

Hi @mattmark , in order to get this result:

Screenshot 2022-07-08 at 21.36.46.png
Screenshot 2022-07-08 at 21.36.46.png1232×854 34.9 KB

Go to edit code > assets > component-cart.css and find this element:

.cart__footer>div:only-child {
    margin-left: auto;
}

replace it with:

.cart__footer>div:only-child {
    margin:0 auto;
}

After that open assets > component-totals.css and find this element:

.totals {
    justify-content: flex-end;
}

replace it with:

.totals {
    justify-content: center;
}

Find this element too (assets > component-cart.css):

.tax-note {
    margin-bottom: 2.2rem;
    text-align: right;
}

and replace it with:

.tax-note {
    margin-bottom: 2.2rem;
    text-align: center;
}
3 Likes
3

That did the trick. Thank you so much for your extremely quick help!