How can I adjust the layout of my cart page for closer item placement?

Snackbarco · ‎02-09-2024

Hello everyone! I'm trying to adjust my cart page to squeeze together the item, quantity and pricing closer to each other. They are way to separated, maybe all together in the center. Here a picture to show you what I mean. My website is snackbarcanada.ca

ThePrimeWeb · ‎02-09-2024

Hey @Snackbarco

Try this and see if you like it 😊

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
table.cart-items {
    width: max-content;
    margin: auto;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎02-09-2024

Hey @Snackbarco

Try this and see if you like it 😊

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
table.cart-items {
    width: max-content;
    margin: auto;
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Snackbarco · ‎02-09-2024

@ThePrimeWeb Thank you so much! I have another question actually, the bottom where it has the customer order instruction, how can I move that over to the far right with the pay buttons?

ThePrimeWeb · ‎02-09-2024

@Snackbarco,

You can use this.

Instructions are the same as above.

<style>
.cart__blocks {
    margin-left: 0 !important;
}

.cart__footer-wrapper:last-child .cart__footer {
    flex-direction: column !important;
    gap: 30px !important;
    align-items: flex-end !important;
}
</style>

I personally think center is better, but you can choose what you like,

This is center for example

The code is

<style>
.cart__blocks {
    margin-left: 0 !important;
}

.cart__footer-wrapper:last-child .cart__footer {
    flex-direction: column !important;
    gap: 30px !important;
    align-items: center !important;
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Snackbarco · ‎02-09-2024

You're right, center Definity looks cleaner! Thank you so much, have a great rest of the day! Cheers!

Lawrence7 · ‎03-07-2024

Hello @ThePrimeWeb please I need help making this few changes for my cart page as well

I want to add a yellow background to the header and some text as indicated and I'd like a red border on the item that's about to be bought

Please help with the code to make this changes, I'll very much appreciate it.

ThePrimeWeb · ‎03-07-2024

Hey @Lawrence7,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
h1.cart-header__title,
label[for="CartSpecialInstructions"],
.product-details__item.product-details__item--property,
.cart__shipping.rte {    
    background-color: yellow !important;
    
}

h1.cart-header__title {
    margin: auto !important;    
}

h1.cart-header__title,
label[for="CartSpecialInstructions"],
.product-details__item.product-details__item--property,
.cart__shipping.rte {
    width: fit-content !important;
}

.cart__shipping.rte {
    margin-left: auto !important;
    padding: 0 !important;
}

td.cart__image-wrapper {
    border-left: 3px solid red !important;
    border-top: 3px solid red !important;
    border-bottom: 3px solid red !important;
}

td.cart__meta.small--text-left {
    border-top: 3px solid red !important;
    border-bottom: 3px solid red !important;
    border-right: 3px solid red !important;
}

@media only screen and (max-width: 749px) {
   .cart__shipping.rte {
        margin-right: auto !important;
    } 
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Lawrence7 · ‎03-07-2024

Hi @ThePrimeWeb

Thank you very much it looks just how I want it but what if I want to extend the red border to be full width? I think it would look more better that way.

Lawrence7 · ‎03-07-2024

And if it would be posible to give the "Subtotal" a yellow background please.

ThePrimeWeb · ‎03-07-2024

Remove everything from before and replace with this

<style>
h1.cart-header__title,
label[for="CartSpecialInstructions"],
.product-details__item.product-details__item--property,
.cart__shipping.rte,
.cart-subtotal {    
    background-color: yellow !important;
    
}

h1.cart-header__title {
    margin: auto !important;    
}

h1.cart-header__title,
label[for="CartSpecialInstructions"],
.product-details__item.product-details__item--property,
.cart__shipping.rte,
.cart-subtotal  {
    width: fit-content !important;
}

.cart__shipping.rte,
.cart-subtotal {
    margin-left: auto !important;
    padding: 0 !important;
}

tr.cart__row.border-bottom.line1.border-top {
    border: 3px solid red !important;
}

@media only screen and (max-width: 749px) {
   .cart__shipping.rte,
    .cart-subtotal {
        margin-right: auto !important;
    } 
}
</style>

Was I helpful?