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)
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
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?
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
Hi @Jdel541 ,
Please follow these steps:
@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!
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:
after that it would be great!!
thanks again,
Jorge
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.
Great!! now its perfect, thanks a millioonnnn!!!
have a super nice day
