Hi all.
I am trying to customise my footer, but I am finding it hard to do so on Desktop and mobile.
The top image is what it looks like now and the bottom is the aim.
Topic summary
Customizing the Shopify footer across desktop and mobile, and reducing spacing on the password page; progress guided by shared screenshots that show the current and desired layouts.
-
Access/setup: Store URL and password were shared. Because the password page had no input field, password protection was temporarily disabled to allow review.
-
Desktop footer: A participant provided CSS to add in theme.liquid (above the closing ) using a media query (min-width: 768px) to reflow the footer: reversing the top content row, spacing it out, and stacking the newsletter block vertically. The result matched the target layout shown in the screenshot.
-
Password page spacing: The user wanted less padding between stacked Rich Text sections. CSS targeting the specific section IDs was added in password.liquid (above ) to remove padding, with a screenshot confirming tighter spacing.
-
Mobile footer: The user requested a mobile footer layout matching a provided mockup screenshot. No implementation guidance has been given yet.
Status: Desktop footer and password-page spacing addressed with CSS; mobile footer request remains open pending instructions.
1 Like
PWD is otsaiy
Thank you so much!
1 Like
Hey @marycrichton123
That’s pretty odd because I just noticed, there’s no place on your password page to enter the password. Can you disable the password for some time?
I have done thank you
Hey @marycrichton123
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (min-width: 768px) {
.footer-block--newsletter.scroll-trigger.animate--slide-in {
display: flex !important;
flex-flow: column !important;
align-items: start !important;
}
.footer__content-top.page-width {
display: flex !important;
flex-flow: row-reverse !important;
justify-content: space-between !important;
}
}
</style>
RESULT:
If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.
Best,
Moeed
1 Like
Thank you so much! That is amazing
I do also have a question on the password page. I have layered Rich Text sections, and i can not seem to reduce the padding between the sections.
I dont want there to be to much space between the lines of text, and therefore the screen will not scroll.
This is also the same on mobile.
1 Like
Can you share a screenshot of which padding exactly you’re referring to so that we’re on the same page?
Follow these Steps:
- Go to Online Store
- Edit Code
- Find password.liquid file
- Add the following code in the bottom of the file above </ body> tag
<style>
section#shopify-section-template--25742622622073__rich_text_qUxk9q * {
padding: 0 !important;
}
section#shopify-section-template--25742622622073__rich_text_YGxKUt * {
padding-bottom: 0 !important;
}
</style>
RESULT:
If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.
Best,
Moeed
1 Like
