> 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-studio/sections-and-features/enter-page.md). # Enter Page A full-screen overlay shown on the first homepage visit. Studio adds three background options Pro doesn't have (Live Gradient inheritance, Video, and Solid) plus a **3D model viewer logo** — a hook into WEBEXP's [free 3D logo maker](https://webexp.dev/pages/3d-logo-maker) so drop brands can use an interactive 3D mark on their entry moment. ## 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. ## Background ### Background Choose how the section fills the viewport. * **Solid (follows light/dark mode)** — Uses your theme's current mode background. Inherits from theme, no picker needed. * **Image** — Full-screen image with blur, overlay color, and overlay opacity. * **Video** — Full-screen MP4 that autoplays muted and loops. Preloads eagerly so the video's own first frame is visible almost immediately — no blank load state. * **Live Gradient (inherit site setting)** — The Enter Page overlay goes transparent and the site's WebGL Live Gradient shows through. Homepage content underneath is hidden via a body class while the overlay is up, so shoppers only see the gradient behind your logo and links. Falls back to Solid if Live Gradient isn't enabled site-wide in **DRIFT — Background**. ### Background image Only used when Background is set to Image. Set the focal point via **Shopify Admin → Content → Files → drag the focal dot**. ### Background video URL Only used when Background is set to Video. Upload an MP4 to Content → Files and paste the direct URL. ### Media blur 0–40 px. Applies to Image and Video backgrounds. ### Overlay color * **Dark** — Darkens for white text. Best over bright media. * **Light** — Lightens for dark text. Best over dark media. Ignored on Solid and Live Gradient backgrounds. ### Overlay opacity 0–100%. How strong the overlay is. ## Logo ### Logo type * **Image (2D)** — Standard 2D logo image. Best for wordmarks, illustrated marks, and static emblems. * **3D model (interactive)** — Renders a `.glb` 3D model with WebGL. Auto-rotates by default, shoppers can drag to interact. Best for emblem-style brand marks. Needs a `.glb` file — generate one for free at [our 3D logo maker](https://webexp.dev/pages/3d-logo-maker), or upload your own. ### Logo image (2D) — light mode Used when Logo type is Image, or as a fallback if a 3D model fails to load. Leave empty to see a placeholder WEBEXP logo. ### Logo image (2D) — 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 (2D) 40–400 px. Only applies to the 2D image logo. ### Show logo in container Off by default. Wraps the logo (2D or 3D) in a Liquid Glass card. ### 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. ## 3D Model Only applies when Logo type is set to 3D model. ### GLB file URL Upload the `.glb` file from your 3D logo pack to **Shopify Admin → Content → Files**, then paste the direct URL here. Leave empty to see a placeholder WEBEXP 3D logo. Need a 3D logo? Try [our 3D logo maker](https://webexp.dev/pages/3d-logo-maker). ### GLB file URL — dark mode Optional. A different `.glb` shown when the site is in dark mode — typically the same mark in a lighter material so it doesn't disappear against a dark background. Leave it empty and the light model is used in both modes. ### Model size 80–400 px. Applied to the model viewer's container width and height. ### Auto-rotate On by default. Slow continuous rotation. Shoppers can still click and drag to interact — auto-rotate resumes when they release. ### Show glow Off by default. Adds a `filter: drop-shadow()` around the 3D model that hugs the model's silhouette (not a boxy shadow). ### Glow color The color of the drop shadow when Show glow is on. Default `#ffffff`. ### Glow intensity 0–100%. Larger values push the glow further out from the model. ## Links Add up to 6 link blocks. Each block has: * **Label** — Button text. * **URL** — Leave empty for pure dismiss, use `#anchor` for same-page jump, or use a full URL for external. * **Dismiss overlay on click** — Turn on for the SHOP button. ### Use Liquid Glass pills On by default. Frosted blur cards with refractive edge highlights matching the theme's Liquid Glass treatment. ### 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. Logo appears near viewport center, holds briefly, then rises to its resting spot. Links fade in one by one afterward, domino-style. Respects `prefers-reduced-motion`. Waits for the DRIFT Loading Screen (if enabled) to dismiss before starting — the animation only plays when the shopper can actually see the section. ### Show only once per browser session On by default. Uses sessionStorage. ## Default preset Three link blocks ship by default: 1. **SHOP** — Dismisses the overlay. 2. **INSTAGRAM** — Add your Instagram URL. 3. **CONTACT** — Add your contact URL. ## Marketing hook The 3D model + free 3D logo maker combo is a Studio-exclusive funnel: users generate a `.glb` at [webexp.dev/pages/3d-logo-maker](https://webexp.dev/pages/3d-logo-maker), realize only DRIFT Studio supports it on the storefront, and upgrade. Point clients at the tool from your onboarding notes.