Shopify themes, liquid, logos, and UX
Hi everyone!
I'm trying to make a few adjustments to my password page, but given that I'm not coding expert, it hasn't been working out so well.
The url is nostalcart.com
This is what I'm trying to make the page look like:
.
I got ahead of myself and removed the header and footer from the password page by using the following codes (pasted on base.css):
.password-header { display: none !important; } .password__footer { display: none !important; }
I want to bring back both header and footer - adding the following image centered in the header:
The countdown feature is an app added, the password form was already part of the page, and the email form is an extension of Klaviyo.
The page just needs some realigning with the forms. I'm just making sure it looks presentable on both desktop and mobile versions - preventing the user from having to scroll much.
The social media icons ideally would have to sit at the bottom of the page - is it possible to add them as such to the footer section? Or is it better to add it to the body of the page?
Your help is much appreciated!
Cheers!
from section-password.css
1º Delete 'margin-top: 10rem;' and change the padding, line 23. The code with the changes would look like this:
body .section-template--15373018071119__custom_liquid_w776RD-padding {
margin-top: 10rem;
padding: 0!important;
}
2º Delete 'padding: 4.5rem 3.2rem;' line 84.
3º Add this code: 'max-width: 450px; padding: 0 24px;' line 18:
.password-form {
justify-content:center;
margin-top: 1rem !important;
max-width: 450px;
padding: 0 24px;
}
theme.css or base.css
4º Add this code:
.needsclick.kl-private-reset-css-Xuajs1 {
min-height: auto !important;
}
The page with all the changes would look like this:
PC
MOBILE
I hope you liked it!
By the way, I'd like to share an interesting library that I think can help you find social media icons with a style very similar to the one in the photo you attached. Icons - Vercel Design
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025