Shopify themes, liquid, logos, and UX
Hello all, I hope you are all having a wonderful week.
I am nearly finished setting up my newest Shopify store and am having trouble customizing/adjusting my home page (and others). I am trying to reduce the amount of spacing/padding between the various sections. Please lmk if there is coding to customize this easily. Furthermore, can I adjust padding/spacing between particular sections, or will the customizing code just generally reduce space between all sections?
Additionally, I would love to have two different viewable versions of the "who we are, what we do" section towards the bottom of the page- 1 version for computer, one version for mobile (or any smaller screen really) Since when i put in the image/text table it gets tottaly squished and missaligned when not on a full wide screen/desktop view.
Thank you for your help in advance!
Kelly
Popspaceboutique.com
(to see the actual site, put in password: makemyspacepop )
Solved! Go to the solution
This is an accepted solution.
Thanks
please this code also
.index-section .hr--invisible {
margin: 26px 0px;
}
do you have again an issue just give me further screenshot
Hello, @wbkellam
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.index-section {
padding-top: 30px;
padding-bottom: 30px;
}
Thank you! I just did this and notice it only really is adjusting the padding between the top image header section and the first section that is a newsletter sign up- is there a way to trim down the area between the other sections as well? (IE bottom of a collection section and the View All button, and then also the area between that view all button and then the next section after it?)
Essentially i want to trim the padding in the index section, the newsletter section, the collection section, the featured collection section
Thank you for your help!
This is an accepted solution.
Thanks
please this code also
.index-section .hr--invisible {
margin: 26px 0px;
}
do you have again an issue just give me further screenshot
This is magic! thank you! works exactly as I was looking for!
Thanks for update and your support.
Hey Kumar, I'm using the supply theme and was able to remove the padding above my store logo but there's still a lot of padding between the logo and first section which is a slideshow.
Kindly assist, thanks.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Thanks for details
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.template-index .main-content {padding-top: 0;}
.template-index .grid-item.large--one-half.text-center.large--text-right {
display: none;
}
thank you so much Kumar it worked. While I still have you, would you mind helping me change the colors of the titles in my footer? Just to make the titles for example 'Quick Links' and 'Newsletter'another color
is there also a way to align the footer content to the left on mobile? It seems to be center-aligned
Hey Kumar, unfortunately the cart and search box are not showing in desktop mode after adding the code. What could be the issue?
Dear Kumar,
I have the same problem spaces between each sections of my homepage and Im using Venture Theme. Kindly looking forward for your expertise to solve this pls. I attached screen shots. The Spaces/Paddlings I wanted to get rid of are between each section of my home page.
Kind Regards
sorry for that issue can you please share us store url
Hello @KetanKumar i have tried to effect your guide on how to fix mobile view but i cant seem to get it right. Can you have a look at my website and help me out. Poshdoggy.co.uk. I have already tried using the code you suggested, but it didn't work (Note; I couldn't find theme.scss.liquid after Asset on my theme). Someone suggested we paste the code in (base.css), that it is the same with theme.scss.liquid. I did that but still did not change anything. I had to remove it.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024