Password Page Design

Generate the Liquid, CSS, and JavaScript for a custom password page template that I can paste into my theme via Edit code, replacing the default storefront password gate with a fully branded experience. The section should display a fullscreen layout with a background image using an image_picker setting or a solid background color [BG_COLOR] as fallback. The content should be vertically and horizontally centered, containing the store logo from an image_picker setting sized at [LOGO_WIDTH] pixels wide, a heading [PAGE_HEADING], a description paragraph [PAGE_DESCRIPTION], and a password input form that submits to the Shopify password session endpoint. Below the password form, include an email signup form for launch notifications with heading [SIGNUP_HEADING] and subtext [SIGNUP_SUBTEXT] that creates a customer record via the Shopify customer form. Add social media icon links configured via repeatable blocks for platforms like Instagram, Facebook, Twitter, and TikTok, each with a URL field. Include settings for text color [TEXT_COLOR], input border color [INPUT_BORDER_COLOR], button background color [BUTTON_BG_COLOR], button text color [BUTTON_TEXT_COLOR], content max-width [CONTENT_MAX_WIDTH] pixels, and an overlay color [OVERLAY_COLOR] with opacity [OVERLAY_OPACITY] applied over the background image. Add a footer area displaying the Powered by Shopify text and an Enter using password link. Provide complete Liquid, CSS, and minimal JavaScript.

Where to add this: In Shopify admin, go to Online Store > Themes > Edit code, then open templates/password.json (or sections/password.liquid if your theme uses that pattern) and paste the generated code in, replacing the existing content. Save — Shopify automatically serves this file as the storefront password page, so no additional step in the theme customizer is needed.