Solved

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

Snackbarco
Excursionist
18 0 3

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
2138 614 491

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@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 11 (11)

ThePrimeWeb
Shopify Partner
2138 614 491

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@theprimeweb.com or check out the website
Check out our interview with Shopify!
Snackbarco
Excursionist
18 0 3

@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
2138 614 491

@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@theprimeweb.com or check out the website
Check out our interview with Shopify!
Snackbarco
Excursionist
18 0 3

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

Lawrence7
Explorer
69 0 14

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.

CART.png

ThePrimeWeb
Shopify Partner
2138 614 491

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.

ThePrimeWeb_0-1709833273596.jpeg

 

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
Explorer
69 0 14

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
Explorer
69 0 14

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

ThePrimeWeb
Shopify Partner
2138 614 491

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?

Buy me a coffee

🙂

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

@ThePrimeWeb Thank you very much, I'm very grateful.

 

Thank you.

Lawrence7
Explorer
69 0 14

@ThePrimeWeb 

 

Please Help

I want to remove the "Read More" button from the product page on mobile, as it's not working and affecting the conversion rate.

 

Lawrence7_0-1718035061712.png