Solved

How do I change the cart page layout on mobile? (Venture theme)

heymikey
Tourist
6 0 1

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. 

cartpage.png

Accepted Solutions (4)
LitCommerce
Astronaut
2860 684 732

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

LitCommerce
Astronaut
2860 684 732

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

LitCommerce
Astronaut
2860 684 732

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

LitCommerce
Astronaut
2860 684 732

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;
	}
}
LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 16 (16)

KetanKumar
Shopify Partner
36839 3635 11972

@heymikey 

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
heymikey
Tourist
6 0 1

I've sent you a private message, thanks.

LitCommerce
Astronaut
2860 684 732

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.

 

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
heymikey
Tourist
6 0 1

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.

LitCommerce
Astronaut
2860 684 732

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
LitCommerce
Astronaut
2860 684 732

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
heymikey
Tourist
6 0 1

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.

LitCommerce
Astronaut
2860 684 732

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
heymikey
Tourist
6 0 1

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!!

LitCommerce
Astronaut
2860 684 732

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;
	}
}
LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
Jdel541
Tourist
10 0 1

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

Buggy_Catnip
Tourist
4 0 1

requesting help with the same @KetanKumar 

Buggy_Catnip
Tourist
4 0 1

looking to adjust mobile cart to better fit the screen, see attached image:

KetanKumar
Shopify Partner
36839 3635 11972

@Buggy_Catnip 

can you please send store url so i will check and let you know 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

LitCommerce
Astronaut
2860 684 732

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!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
heymikey
Tourist
6 0 1

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.