Solved

Cart page design

Snackbarco
Excursionist
18 0 2

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 

 

cart page.png

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
1057 275 214

This is an accepted solution.

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.

ThePrimeWeb_0-1707500522681.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here

View solution in original post

Replies 4 (4)

ThePrimeWeb
Shopify Partner
1057 275 214

This is an accepted solution.

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.

ThePrimeWeb_0-1707500522681.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? Contact me here
Snackbarco
Excursionist
18 0 2

@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? oder box.png

ThePrimeWeb
Shopify Partner
1057 275 214

@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

ThePrimeWeb_0-1707501512801.png

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 me here
Snackbarco
Excursionist
18 0 2

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