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

Solved
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)

Accepted Solutions
LitCommerce
Trailblazer
291 72 73

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
Trailblazer
291 72 73

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
Trailblazer
291 72 73

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
Trailblazer
291 72 73

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 13 (13)
KetanKumar
Shopify Partner
25061 2509 9072

@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
LitCommerce
Trailblazer
291 72 73

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.

heymikey
Tourist
6 0 1

I've sent you a private message, thanks.

LitCommerce
Trailblazer
291 72 73

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
Trailblazer
291 72 73

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
Trailblazer
291 72 73

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

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.