Solved

Help with layout of image and products on mobile homepage please

Endlessretro
Trailblazer
172 0 64

Good Evening, 

I am hoping somebody can help...

 

Screen Shot 2021-11-21 at 22.32.22.png

 

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

Accepted Solutions (3)

LitCommerce
Astronaut
2860 684 732

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 - 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 @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 - 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 @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. 

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

KetanKumar
Shopify Partner
36839 3635 11972

@Endlessretro 

thanks for all details but your store is password protect can you please share us 

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
Endlessretro
Trailblazer
172 0 64

@KetanKumar thank you - password has now been removed

LitCommerce
Astronaut
2860 684 732

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 - 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!
Endlessretro
Trailblazer
172 0 64

@LitCommerce that is perfect thank you SO much!

Endlessretro
Trailblazer
172 0 64

@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

 

Screen Shot 2021-11-22 at 18.42.37.png

LitCommerce
Astronaut
2860 684 732

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 - 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!
Endlessretro
Trailblazer
172 0 64

@LitCommerce Perfect! Many Thanks

Endlessretro
Trailblazer
172 0 64

@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. 

 

Screen Shot 2021-11-23 at 21.01.22.pngScreen Shot 2021-11-23 at 21.01.08.pngScreen Shot 2021-11-23 at 21.00.55.png

 

 

LitCommerce
Astronaut
2860 684 732

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 - 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!
Endlessretro
Trailblazer
172 0 64

@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

LitCommerce
Astronaut
2860 684 732

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 - 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!
Endlessretro
Trailblazer
172 0 64

@LitCommerce Thank you I have sent you an invite. Please let me know if any troubles

LitCommerce
Astronaut
2860 684 732

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. 

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!
Endlessretro
Trailblazer
172 0 64

@LitCommerce Thank you sooo much - that is so helpful and much appreciated!!