Shopify themes, liquid, logos, and UX
Good Evening,
I am hoping somebody can help...
I have the above layout on my mobile view home page. I am trying to get the jackets and coats promo box at the top and then the two columns of products below it. Rather than the other way round as shown at the moment. I have tried playing around with the 'mobile content precedence' on the left hand side however cannot seem to find a way to do this. I would appreciate any help anybody can give.
URL: https://endless-retro-22.myshopify.com/
Thank you
Solved! Go to the solution
This is an accepted solution.
Hi @Endlessretro,
Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.min.css and paste this at the bottom of the file:
@media only screen and (max-width: 749px){
.home-builder .row >div:first-child{
order: 1 !important;
flex: 0 0 100% !important;
max-width: 100% !important;
margin-bottom: 15px;
}
}
Hope it helps!
This is an accepted solution.
Hi @Endlessretro,
Please change code:
@media only screen and (max-width: 749px){
#shopify-section-1635723487ee2ad62d .row >div:first-child,
#shopify-section-1586282860739 .row >div:first-child,
#shopify-section-1635712700c1fa7c41 .row >div:first-child{
order: 1 !important;
flex: 0 0 100% !important;
max-width: 100% !important;
margin-bottom: 15px;
}
}
Hope it helps!
This is an accepted solution.
Hi @Endlessretro,
I have added it. https://i.imgur.com/uBU1Chj.png
You just need to check 'Action top mobile', it will show top at mobile.
thanks for all details but your store is password protect can you please share us
This is an accepted solution.
Hi @Endlessretro,
Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.min.css and paste this at the bottom of the file:
@media only screen and (max-width: 749px){
.home-builder .row >div:first-child{
order: 1 !important;
flex: 0 0 100% !important;
max-width: 100% !important;
margin-bottom: 15px;
}
}
Hope it helps!
@LitCommerce I have noticed only slight issue is when I use the code for fix the layout issue - the layout issue is fixed however my Klarna and Clearpay banners move as per the screeenshot below. Prior to adding the code they were next to each other however now one has dropped below. Is this an easy fix?
Thank you
This is an accepted solution.
Hi @Endlessretro,
Please change code:
@media only screen and (max-width: 749px){
#shopify-section-1635723487ee2ad62d .row >div:first-child,
#shopify-section-1586282860739 .row >div:first-child,
#shopify-section-1635712700c1fa7c41 .row >div:first-child{
order: 1 !important;
flex: 0 0 100% !important;
max-width: 100% !important;
margin-bottom: 15px;
}
}
Hope it helps!
@LitCommerce Unsure if you can help - the code you gave me works however - Id like the desktop view to be like the screenshot below - with the Levis image on the right hand side as opposed to left. However when I move the images under builder for desktop view, it changes the mobile view and the Levis image then goes back below the products as per the screenshot below. Is there a code I can put in to ensure the Levis image is on the right hand side on desktop view and at the top of the products on mobile view? Screenshots are below. I hope makes sense.
Hi @Endlessretro,
Because there is no class to distinguish images from other blocks, so it would be difficult to instruct the code to change everything.
If you want, you can create a staff account with email: namphan992@gmail.com
I will add class and option so it always works fine.
@LitCommerce This would be great thank you. I havent ever set up a temporary staff account - can you advise me what I need to do to allow you access? and what you would need access to?
Thank you
Hi @Endlessretro,
Refer https://docs.shopify.com/manual/settings/account/staff-members
You just need to provide access to the theme, I will change it.
@LitCommerce Thank you I have sent you an invite. Please let me know if any troubles
This is an accepted solution.
Hi @Endlessretro,
I have added it. https://i.imgur.com/uBU1Chj.png
You just need to check 'Action top mobile', it will show top at mobile.
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