Shopify themes, liquid, logos, and UX
Hi there! I am trying to figure out how to remove the large amounts of padding between the menu and the looping video and then the header underneath on my home page. I also do not like how much room there is between the header and first section of any of my pages (example: the About Me page). Is this a Heading/Header setting? There are larger amounts of space between most of my headers and body text. I have tried a couple fixes from other discussion forums but none have worked so far so I don't think I was placing the right code in the right section. Thanks in advance for your help!
Website: https://jessmylife.com
Solved! Go to the solution
This is an accepted solution.
Hello, @jessmylife
Welcome to the Shopify community!
and Thanks for your Good question.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.index-sections .shopify-section:first-child:not(.shopify-section--full-width) {
margin-top: 0;
}
This is an accepted solution.
Hello, @jessmylife
Welcome to the Shopify community!
and Thanks for your Good question.
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.index-sections .shopify-section:first-child:not(.shopify-section--full-width) {
margin-top: 0;
}
That worked - thank you very much!
Thanks for update and your compliment.
Hi
I have similar problem. I wanted to change the mega menu structure with the globo mega menu app. I unpublish and removed it because the app's dimensions do not fit. Later, the old menu structure was broken. All the menu components started to come to the homepage vertically.
It normally included main topics and submenus horizontally. After it broken, all header / items started to come up vertically.
Could anyone help me?
Thanks
Hello, @cen9izh4n
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
Thanks for update.
Hi @KetanKumar,
I'm very new here! I can see that you pretty much know everything about Shopify! Help!!😇
I'm not having any luck with resolving these problems I have with Brooklyn theme:
Thank you in advance!
Kind regards
brad
Hello, @mytwoheads
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
Thanks - Can I send you link and password privately, please?
I've sent you an email with details of URL and password.
Happy for you to share the solutions here, just not the URL or password.
Thanks
Brad 🙏🏼🙏🏼🙏🏼
Hi Ketan,
You got my email with URL and login details
Any help with those would be very helpful.
Thank you
Brad
Thankk can you please send test email all details
Hi,
Also,
Product images are not aligning with their colour variation
Too much white padding on the home page above and beneath sections
Newsletter section is far to big in height
Appreciate your help Ketan 🙂
Thanks for the details
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.newsletter {
padding: 30px 0;
}
.newsletter .section-header+.section-subheading {
margin-bottom: 10px;
}
.index-sections .shopify-section {
margin-top: 30px;
}
.section-header {
margin-bottom: 20px;
}
Hi Ketan,
The on the product pages the Product images are not aligning with their colour variation choices
This has been resolved, thank you: Too much white padding on the home page above and beneath sections
Newsletter section now has no space between the header and the subtext (See below picture with text problem)
The logo changes position and I lose the main menu (See pictures below). Also, the logo in the mobile view is so small it can hardly be seen.
I'd like the logo to be on the left and full main menu available, I'de also like the mobile logo bigger - but I can't seem to find the code to get those done!!
Appreciate your help Ketan
Hi Ketan,
I'm confused!!!
Did you see my last message regarding the logo and things?
I've sent you an email and haven't heard anything.
Thanks
Brad
sorry for this
Hi Ketan,
In addition to my other problems.
I'm also having a problem with images not resizing for the home page slideshows and on collection pages, the featured image is only showing half the image and when scrolling down it cuts off the image. I'd like for the whole featured image to show on the Collection pages.
Thanks
Brad
Thanks if you have more pleas send PM Details
So I have to send you those same things in a PM?
Yes, please
Hey Ketan, 🙂
I hope you're well?
See private message
Thank you for your help and support.
Kind regards,
Brad 🙂
Thanks i will check and let you know.
Jess, could you possibly explain how you got a video header to actually work? I want a similar thing but cant figure out how. I'm using the brooklyn theme.
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
https://3commtest.myshopify.com/ is the site url, this is the effect I am trying to accomplish https://3ctest.dreamhosters.com/.
Thanks for the details.
sorry but your store is password protect can you please share us
Thanks for is
yes, how can i help you?
I tried using the code to reduce the large amount of spacing, but this does not work
.index-sections .shopify-section:first-child:not(.shopify-section--full-width) { margin-top: 0; }
Is there a solution to reduce the amount of spacing between my menu and title, and tile and my pictures?
Thanks
Hello, @EeJin
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
Hi,
My shop is password protected since it is not live yet. I have sent you an email for this.
Thanks!
Hello, @EeJin
Thanks
1. Go to Online Store->Theme->Edit code
2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.
.template-collection .section-header {
margin-bottom: 10px;
}
.template-collection main.main-content {
padding-top: 0;
}
Hi @KetanKumar,
Will you please help me? I have a couple of banners on my page and I'd like to move the slideshow (image) down so that the logo is not right on top of my head. Any feedback for a solution would be great! My website is www.sheenamonique.com.
Thank you for all of your help in the Shopify Community!
Sheena
Hello, @Sheenamonique
Welcome to the Shopify community!
and Thanks for your Good question.
how can i help you can you please share us an image of what do you want exctaly?
Thanks for responding @KetanKumar! I'd like to add some padding so that the logo is not on top of my forehead.
Thanks for it
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media screen and (min-width: 769px) {
.site-header__logo {padding-left: 175px;}
}
Thank you @KetanKumar for that solution which worked on the desktop but on the mobile it still is showing over my face. I'd like to make sure that it applies to mobile and desktop.
yes, please.
@media screen and (max-width: 768px) {
.site-header__logo img {
left: 88px;
position: relative;
}
}
@KetanKumar Hi Ketan, I am having the same issue with my website. Too much padding/white space between sections. I am having this issue on my homepage and am using the Prestige theme. I sent you a message would it be possible for you to help me out? Thank you in advance!
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
Thanks so much for this fix @KetanKumar - it worked for me 🙂
Can you please provide the same assistance for reducing the space between the header and the product title / product image on the product page itself? I find there is too much white space there... thanks!
Sorry for facing this issue, it's my pleasure to help us.
Welcome to the Shopify community!
and Thanks for your Good question. 😊
Please share your site URL,
So I will check and provide a solution here.
Sure thing! It's still very early in development but it is here : https://pupette-pet-outfitters.myshopify.com/
Thank you 🙂
Hi @KetanKumar
Could you please help me reduce some margins on the homepage as well please?
Attached screenshot is homepage of my website in mobile version (Brooklyn). I would like to remove the margins around the product image ONLY IN MOBILE VERSION (not desktop) so that the image takes up more space while margins are reduced to minimal. How should I go about to achieve this?
I'm using Brooklyn theme and my website url is www.ootdnewyork10.com
Please let me know if you need any further information. Thanks in advnace!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024