Shopify themes, liquid, logos, and UX
How do I change the cart page layout on mobile so that the content in the cart is laid out horizontally instead of vertically? I want it to look like the one on the right side in the photo.
Solved! Go to the solution
This is an accepted solution.
Hi @heymikey ,
Please change all the code I sent before with this code:
@media only screen and (max-width: 749px){
#CartProducts .cart__row{
display: flex;
justify-content: center;
align-items: center;
}
#CartProducts td{
width: 40%;
text-align: left;
}
#CartProducts .cart__cell--image{
width: 20% !important;
}
#CartProducts .cart__cell--quantity{
width: 20% !important;
}
.cart__cell--quantity .js-qty__adjust{
display: none !important;
}
#CartProducts .cart__cell--total{
width: 20% !important;
}
}
Hope it helps!
This is an accepted solution.
Hi @heymikey ,
You need to add this code to display the quantity selector well:
@media only screen and (max-width: 749px){
#CartProducts .cart__cell--quantity .js-qty__input{
padding: 0 !important;
}
}
Hope it helps!
This is an accepted solution.
Hi @heymikey ,
Please add code:
@media only screen and (max-width: 749px){
#CartProducts td a {
font-size: 16px !important;
}
}
If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.
This is an accepted solution.
Hi @heymikey ,
Please add code:
@media only screen and (max-width: 749px){
#CartProducts td a {
font-size: 16px !important;
}
#CartProducts td p a {
font-size: 12px !important;
}
#CartProducts td span {
font-size: 14px !important;
}
}
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
I've sent you a private message, thanks.
Hi @heymikey ,
- With quantity: I have intentionally hidden it for mobile, because if it shows, it won't make room for all with current html.
- With product name: Remove code 'justify-content: center;', it will display fine.
- With message: I didn't receive any message, can you resend it.
The quantity selector is a bit important, even if it could just be a small box with a number. If it's 100% not possible then I don't think it will be of much use to my site. Thanks for the help regardless.
This is an accepted solution.
Hi @heymikey ,
Please change all the code I sent before with this code:
@media only screen and (max-width: 749px){
#CartProducts .cart__row{
display: flex;
justify-content: center;
align-items: center;
}
#CartProducts td{
width: 40%;
text-align: left;
}
#CartProducts .cart__cell--image{
width: 20% !important;
}
#CartProducts .cart__cell--quantity{
width: 20% !important;
}
.cart__cell--quantity .js-qty__adjust{
display: none !important;
}
#CartProducts .cart__cell--total{
width: 20% !important;
}
}
Hope it helps!
This is an accepted solution.
Hi @heymikey ,
You need to add this code to display the quantity selector well:
@media only screen and (max-width: 749px){
#CartProducts .cart__cell--quantity .js-qty__input{
padding: 0 !important;
}
}
Hope it helps!
Absolute legend! If possible, do you know how to change the product name font to a smaller size? it's a little too big. thanks.
This is an accepted solution.
Hi @heymikey ,
Please add code:
@media only screen and (max-width: 749px){
#CartProducts td a {
font-size: 16px !important;
}
}
If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.
Thanks so much for your help. One last thing, is it possible to make the "Remove" text font smaller and also the price on the right side? Thanks a lot in advance!!
This is an accepted solution.
Hi @heymikey ,
Please add code:
@media only screen and (max-width: 749px){
#CartProducts td a {
font-size: 16px !important;
}
#CartProducts td p a {
font-size: 12px !important;
}
#CartProducts td span {
font-size: 14px !important;
}
}
Hello,
I am really interested in achieving this for my store but unfortunately I cannot manage with my current theme (flow theme)
could someone help me figure out the issue?
Thanks a lot in advance,
Jorge
looking to adjust mobile cart to better fit the screen, see attached image:
can you please send store url so i will check and let you know
Hi @heymikey ,
Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:
@media only screen and (max-width: 749px){
#CartProducts .cart__row{
display: flex;
justify-content: center;
align-items: center;
}
#CartProducts td{
width: 50%;
}
#CartProducts .cart__cell--image{
width: 30% !important;
}
#CartProducts .cart__cell--quantity{
display: none !important;
}
#CartProducts .cart__cell--total{
width: 20% !important;
}
}
Hope it helps!
Very cool, but it's missing the quantity selector. Also, the product name is centered instead of being aligned to the left, as well as the color/style. If possible, please let me know how this can be implemented. Thanks for your time.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024