Shopify themes, liquid, logos, and UX
Hi, Im looking for help to customize the password page using the Taste theme:
- Transparent Header (full page is 1 image)
- Logo is centered
None of the codes on shopify community have worked for me thus far.
Thanks in advance!
Solved! Go to the solution
This is an accepted solution.
@AaronS89291 Almost there! 😄
Try replacing the previous code I provided with the following:
#shopify-section-main-password-header > div {
background: none;
position: absolute;
width: 100%;
z-index: 1;
top: 0;
left: 0;
}
.password-header {
padding-top: 0;
color: white;
}
.modal__toggle-open.password-link.link.underlined-link {
color: white;
}
.modal__content {
height: fit-content;
}
.email-signup-banner__box.banner__box.newsletter.newsletter__wrapper {
padding-top: 236px;
}
html.js.full-height {
height: 100vh;
}
.password-main>section:only-child {
height: 100%;
display: block;
max-height: unset;
box-sizing: border-box;
max-height: 100%;
}
.banner {
height: 100%;
}
@media screen and (min-width:1024px){
.email-signup-banner__box.banner__box.newsletter.newsletter__wrapper {
padding-top: 42px;
}
}
Best regards,
Foladun | Customer Account Deluxe
• Boost engagement and sales with Customer Account Deluxe: a Modern Customer Page with Loyalty, Wishlist, and Social Login (Free plan available✨)
• Drive more revenue, increases user retention and repeat purchases, with simple one-click installation.
Hi @AaronS89291,
Foladun here from the Customer Account Deluxe App team. 👋
To customise your password page with a transparent header, please follow these steps:
{% if template == 'password' %}
<style>
.sticky-header.header-wrapper {
background: none;
}
</style>
{% endif %}
To center the logo:
Let me know if you need any further assistance!
Best regards,
Foladun | Customer Account Deluxe
• Boost engagement and sales with Customer Account Deluxe: a Modern Customer Page with Loyalty, Wishlist, and Social Login (Free plan available✨)
• Drive more revenue, increases user retention and repeat purchases, with simple one-click installation.
Hi there, the transparent header didn't work. I've tried this code a couple of different ways and nothing has worked yet. Can you recommend another way?
Hi @AaronS89291,
Let's try this updated approach. The process remains the same, but the code and file you'll edit have changed:
#shopify-section-main-password-header > div {
background: none;
position: absolute;
width: 100%;
}
Let me know if this resolves the issue!
Best regards,
Foladun | Customer Account Deluxe
• Boost engagement and sales with Customer Account Deluxe: a Modern Customer Page with Loyalty, Wishlist, and Social Login (Free plan available✨)
• Drive more revenue, increases user retention and repeat purchases, with simple one-click installation.
Hi,
That almost worked - it gets rid of my entire header instead of making it transparent so then the logo and passkey box disappears which I don't want. Can you adjust the code please?
Hi @AaronS89291,
try replacing it with just this:
#shopify-section-main-password-header > div {
background: none;
}
Let me know if this works.
Best regards,
Foladun | Customer Account Deluxe
• Boost engagement and sales with Customer Account Deluxe: a Modern Customer Page with Loyalty, Wishlist, and Social Login (Free plan available✨)
• Drive more revenue, increases user retention and repeat purchases, with simple one-click installation.
The header is now white
@AaronS89291
I see. Can you share a link to the password page? It'll help me provide a better solution since it's a bit tricky to figure it out without seeing the code.
Best regards,
Foladun | Customer Account Deluxe
• Boost engagement and sales with Customer Account Deluxe: a Modern Customer Page with Loyalty, Wishlist, and Social Login (Free plan available✨)
• Drive more revenue, increases user retention and repeat purchases, with simple one-click installation.
Yes thank you - pw is twentytwentyfour
@AaronS89291
Thanks for the password! What's the link though?
Best regards,
Foladun | Customer Account Deluxe
• Boost engagement and sales with Customer Account Deluxe: a Modern Customer Page with Loyalty, Wishlist, and Social Login (Free plan available✨)
• Drive more revenue, increases user retention and repeat purchases, with simple one-click installation.
pepprbeauty.com.au
@AaronS89291
Ok - try this, always at the end of section.password.css:
#shopify-section-main-password-header > div {
background: none;
position: absolute;
width: 100%;
z-index: 1;
top: 0;
left: 0;
}
Best regards,
Foladun | Customer Account Deluxe
• Boost engagement and sales with Customer Account Deluxe: a Modern Customer Page with Loyalty, Wishlist, and Social Login (Free plan available✨)
• Drive more revenue, increases user retention and repeat purchases, with simple one-click installation.
SO close! The logo is still there but now the logo and text are overlapping and there is a white banner beneath the background image and above the footer.
This is an accepted solution.
@AaronS89291 Almost there! 😄
Try replacing the previous code I provided with the following:
#shopify-section-main-password-header > div {
background: none;
position: absolute;
width: 100%;
z-index: 1;
top: 0;
left: 0;
}
.password-header {
padding-top: 0;
color: white;
}
.modal__toggle-open.password-link.link.underlined-link {
color: white;
}
.modal__content {
height: fit-content;
}
.email-signup-banner__box.banner__box.newsletter.newsletter__wrapper {
padding-top: 236px;
}
html.js.full-height {
height: 100vh;
}
.password-main>section:only-child {
height: 100%;
display: block;
max-height: unset;
box-sizing: border-box;
max-height: 100%;
}
.banner {
height: 100%;
}
@media screen and (min-width:1024px){
.email-signup-banner__box.banner__box.newsletter.newsletter__wrapper {
padding-top: 42px;
}
}
Best regards,
Foladun | Customer Account Deluxe
• Boost engagement and sales with Customer Account Deluxe: a Modern Customer Page with Loyalty, Wishlist, and Social Login (Free plan available✨)
• Drive more revenue, increases user retention and repeat purchases, with simple one-click installation.
Thank you, that worked!!! 😀
I see now the footer looks quite big since the header is transparent now. Is there a way to make the footer shorter and also hide 'powered by shopify'? I still want my instagram logo/link there though.
@AaronS89291
I'm glad it worked! 😊 And I saw that you already found a solution for the footer.
Feel free to reach out if you need anything!
Cheers,
Foladun | Customer Account Deluxe
• Boost engagement and sales with Customer Account Deluxe: a Modern Customer Page with Loyalty, Wishlist, and Social Login (Free plan available✨)
• Drive more revenue, increases user retention and repeat purchases, with simple one-click installation.
Hi @AaronS89291 ,
To customize the Taste theme's password page with a transparent header, full-page background, and centered logo:
Edit Code:
body#password {
background: url('{{ "your-background-image.jpg" | asset_url }}') no-repeat center center;
background-size: cover;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.site-header { background: transparent !important; position: absolute; width: 100%; }
.site-header__logo { text-align: center; width: 100%; }
Logo HTML (Optional): Center logo HTML in password.liquid:
<div class="site-header__logo">
{{ 'logo-image' | asset_url | img_tag: 'Logo' }}
</div>
replace your-background-image.jpg with your image filename. save and preview
Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.
Thanks & Regards
Akshay Bhatt
Hi, thanks. Where do I post this code? And I cannot locate password.css - I only have section.password.css or password.liquid
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn 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, 2025