If you also want the ‘Enter using password’ centered below where people type their email instead, try this
open your file css and insert below:
.modal__content {
top: auto !important;
bottom: auto !important;
}
Here is result:
Topic summary
Issue: Center the logo and the “Enter using password” text on a Shopify password page using the Spotlight theme.
What was tried/suggested:
- Edit theme CSS to make the password header a vertical stack using Flexbox (CSS layout technique). Suggested rule: .password-header { display: flex; flex-direction: column; } added in theme.liquid above .
- Alternative CSS added directly in the CSS file with stronger specificity: .password-header { display: flex !important; gap: 0px !important; } to ensure alignment across viewports.
- To position/center the password modal content, suggested: .modal__content { top: auto !important; bottom: auto !important; }.
Context:
- Store URL and a temporary password were shared for review. A collaborator offer was made to adjust if needed.
- Screenshots (mobile and desktop) were provided to demonstrate the visual result of the CSS changes.
Status: No final confirmation from the original poster; solutions provided and thread appears open for further adjustments if needed.
