> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/drift-shopify-theme/drift-pro/sections-and-features/enter-page.md). # Enter Page A full-screen overlay shown on the first homepage visit. Contains your logo and a set of link buttons — a SHOP button dismisses the overlay to reveal the homepage feed underneath, and other links (Instagram, Contact, etc.) navigate normally. Sits in front of everything, respects the current light or dark mode, and only re-appears once the shopper opens a new browser session. ## How to access In the theme editor, open the **Home page** template. Click **Add section** and pick **DRIFT Enter Page**. Drag it to the top of the section list. Configure via the section settings panel on the right. ## Background ### Background Choose how the section fills the viewport behind the logo and links. * **Solid (follows light/dark mode)** — Uses your theme's current mode background (`#FAFAFA` in light mode, `#0B0B0D` in dark). No merchant color picker needed — it inherits from the theme automatically. Best when you don't need imagery on the entry moment. * **Image** — Full-screen image with blur, overlay color, and overlay opacity controls. Use for brand shots, editorial photography, or moody hero images. ### Background image Only used when Background is set to Image. Set the focal point on the image itself in **Shopify Admin → Content → Files → click the image → drag the focal dot**. The section reads the focal point automatically — useful for portrait shots where you want the face in frame on desktop. ### Image blur 0–40 px. Blurs the background image so the logo and links stay the focus. ### Overlay color * **Dark** — Darkens the image for white text. Best over bright imagery. * **Light** — Lightens the image for dark text. Best over dark imagery when you want a lighter feel. Ignored on Solid backgrounds. ### Overlay opacity 0–100%. How much the overlay covers the image. Higher values improve text legibility at the cost of image visibility. ## Logo ### Logo image — light mode The 2D logo displayed in the entry overlay. Leave empty to see a placeholder WEBEXP logo — useful for previewing the layout before you upload your brand asset. ### Logo image — dark mode Optional. Shown instead of the light logo when the site is in dark mode. Leave it empty and the light logo is used in both modes — and either field works on its own, so you can upload only a dark logo if that suits your brand. ### Logo height 40–400 px. Height of the 2D logo. Width scales automatically. ### Show logo in container Off by default. Wraps the logo in a rounded Liquid Glass card — feels like a badge or emblem around your mark. ### Container shape * **Circle** — Aspect-ratio 1, fully rounded. Best for emblem-style logos. * **Rounded square** — 24 px border-radius, sizes to your logo's aspect. ## Links Add up to 6 link blocks via **Add block → Link**. Each block has: * **Label** — The button text. Default: `SHOP`. * **URL** — Where the link goes. Leave empty for a pure dismiss button. Use an anchor (`#products`) to jump to a homepage section after dismiss. Use a full URL for external destinations. * **Dismiss overlay on click** — Turn on for the SHOP button. The overlay fades and slides up to reveal the homepage. External links should leave this off. ### Use Liquid Glass pills On by default. Wraps each button in a frosted blur card with a refractive edge highlight matching the theme's Liquid Glass treatment. Works over image or solid backgrounds. ### Show social icons Off by default. Renders your social links as circular buttons below the entry buttons. The URLs come from **Theme settings → Social media**, so you set them once and every surface that shows socials uses the same list. The icons match the buttons above them — including the Liquid Glass treatment when **Use Liquid Glass pills** is on — and fade in one by one after the last button when the entrance animation is enabled. ## Behavior ### The Enter Page fades in Not a setting. The Enter Page is revealed from a solid pane in your background colour rather than simply being there when the page loads. The pane matches whatever sits behind it — your Live Gradient's seed colour when that's the background, otherwise the theme background for the current mode — so it reads as a lift rather than a crossfade between two colours. The logo begins rising partway through the reveal instead of waiting for it to finish. Two cases skip it automatically: * **A loading screen is enabled** — that dismissal is already the reveal, and two fades back to back feel slow * **The shopper has reduced motion enabled** — the page appears immediately ### Enter animation On by default. The logo appears near the center of the viewport, holds briefly, then rises smoothly to its resting position. Links fade in one by one afterward in a domino cascade. Automatically respects `prefers-reduced-motion` — shoppers who've opted out of motion see the content instantly. ### Show only once per browser session On by default. The overlay uses sessionStorage to remember dismissal, so it only shows the first time in each browser session. Turn off if you want it every visit. ## Default preset When you first add the section, it ships with three link blocks: 1. **SHOP** — Dismiss on click, no URL. Reveals the homepage. 2. **INSTAGRAM** — No URL configured yet. Add your Instagram link. 3. **CONTACT** — No URL configured yet. Add your contact page or `/pages/contact`.