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
Topic summary
A user seeks help adjusting their cart page layout to bring items, quantities, and pricing closer together, as elements appear too spread out. Another community member provides CSS code to paste into the theme.liquid file below the tag, with screenshots demonstrating the solution.\n\nAdditional requests addressed:\n- Moving customer order instruction box to align with payment buttons on the right (CSS solution provided, though centered alignment recommended)\n- Adding yellow background to cart header with custom text\n- Adding red border around items in cart\n- Extending red border to full width\n- Adding yellow background to \
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 “” tag paste the following. Screenshot attached for reference.
Screenshot is for reference only, the correct code to paste is the one shown above.
1 Like
@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?
You can use this.
Instructions are the same as above.
I personally think center is better, but you can choose what you like,
This is center for example
The code is
1 Like
You’re right, center Definity looks cleaner! Thank you so much, have a great rest of the day! Cheers!
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.
Hey @Lawrence7 ,
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.
Screenshot is for reference only, the correct code to paste is the one shown above.
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.
And if it would be posible to give the “Subtotal” a yellow background please.
Remove everything from before and replace with this
@ThePrimeWeb Thank you very much, I’m very grateful.
Thank you.
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.
