Solved

Can you improve mobile cart layout in a Shopify store with the Flow theme?

Jdel541
Tourist
10 0 1

Hello everybody,

 

Currently I have a shopify store with the FLOW theme installed. I do not like how the cart layout looks on mobile screen (see picture). Instead, I would like one similar to the 2nd picture (horizontally distributed as in the first picture I find there is too much space for the item)

Captura de pantalla 2021-11-03 a las 12.17.56.png-->

Captura de pantalla 2021-11-03 a las 12.19.47.png

 Someone has an idea on how this could be done? I was using a previous solution described in this forum but is not working with this theme.

 

Thanks a lot!

Jorge

Accepted Solution (1)
LitCommerce
Astronaut
2860 684 732

This is an accepted solution.

Hi @Jdel541,

I hided it, because when I add it, it won't have enough width for everything. If you want to display it, please remove the code: https://i.imgur.com/fbm67ek.png 

Hope it clear to you.

 

 

 

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

Don
Shopify Staff
2762 199 388

Hi there @Jdel541!

How you can get support for a given theme would depend on who created that theme, to begin with. 

In this case, you mentioned you're using the Flow theme from our theme store, which is created and supported by its developers' Eight.

If you haven't already, you can check out their support docs here and you can submit a support request to them here

Should the specific customisation you wish to put in place not be covered by the scope of their support, you can always look into hiring a Shopify Expert developer from here in our marketplace for some theme customisation work.

You may also be lucky enough that a fellow member of our Community can chip in here with some advice based on their own experience!

Can you tell me a bit more about what you're working on for your business at the moment, are you still gearing up towards launch?

It looks like you're working on a wine store, is that the case?

Don | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Jdel541
Tourist
10 0 1

Hello @Don ,

thanks a lot for your answer. I already checked eight documentation but there is nothing mentioned there.

Site is already launched and looking nice, is just this small feature for my cart when customer is checking out in mobile that I would like to improve. In my opinion, it looks like a mess in mobile as there is too much white space all around, specially if the customer has a long list to check as it would be in my case

Is a meal kit + high quality local ingredients delivery service, you can check my website here if you are interested: www.shorturl.at/hCR14

Hopefully someone in the forum can help me out... It would be very appreciated

Thanks a lot,

Jorge

 

 

LitCommerce
Astronaut
2860 684 732

Hi @Jdel541,

Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme-cart.min.css and paste this at the bottom of the file:

@media only screen and (max-width: 768px){
	.cart__row.table__section{
		display: flex !important; 
		align-items: center !important;
	}
	.cart-table td{
		padding: 30px 5px !important;
	}
	.cart-table [data-label="Producto"] {
		width: 20% !important;
	}
	.cart-table [data-label="Producto"] img{
		width: 100% !important;
	}
	.cart-table .cart__row--product-details {
		width: 40% !important;
	}
	.cart-table .cart__row--product-details a{
		font-size: 14px !important;
	}
	.cart-table .cart__row--product-details .cart__remove{
		font-size: 12px !important;
	}
	.cart-table [data-label="Precio"]{
		width: 20% !important;
		font-size: 12px !important;
	}
	.cart-table [data-label="Cantidad"]{
		width: 20% !important;
	}
	.cart-table [data-label="Cantidad"] .js-qty{
		min-width: auto !important;
	}
	.cart-table [data-label="Cantidad"] .js-qty__adjust{
		display: none !important;
	}
	.cart-table [data-label="Cantidad"] .js-qty input{
		padding: 0px !important;
		text-align: right !important;
		font-size: 12px !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!
Jdel541
Tourist
10 0 1

Hey,

it helped a lot!! indeed!! thank youu soo muchh!!!

 

just one thing, would it be possible to add as well the + - thingy on the quantity selector so customer can add  or delete quantities? currently is looking like this:

Captura de pantalla 2021-11-03 a las 16.18.29.png

after that it would be great!!

thanks again,

Jorge

LitCommerce
Astronaut
2860 684 732

This is an accepted solution.

Hi @Jdel541,

I hided it, because when I add it, it won't have enough width for everything. If you want to display it, please remove the code: https://i.imgur.com/fbm67ek.png 

Hope it clear to you.

 

 

 

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

Great!! now its perfect, thanks a millioonnnn!!!!!!

 

have a super nice day

LitCommerce
Astronaut
2860 684 732

Hi @Jdel541,

If you have any difficulty, you can contact me 🙂

Happy to help you.

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!