DRIFT — Background
Replaces DRIFT's solid background with an image or video across the entire store. This is a DRIFT Studio feature.
How to access
Theme settings → DRIFT — Background
Settings
Enable image/video background
Master switch. When off, DRIFT uses solid backgrounds (light: #FAFAFA, dark: #0A0A0A).
Background image
Used for both light and dark modes. If a dark mode image is also uploaded, this becomes the light mode image.
Dark mode image (optional)
Overrides the background image when the site is in dark mode. Leave empty to use one image for both modes.
Video URL
Direct URL to an MP4 file. Upload your video to Settings → Files in the Shopify admin and paste the public URL here. The video autoplays muted and loops. If both an image and a video are set, the image displays on top.
Background blur
Range from 0 to 20 pixels. Blurs the background media so site content stays the focus.
Invert media in dark mode
Inverts the colors of the background image or video when the site is in dark mode. Lets you use one image for both modes without uploading a separate dark version. Works best with graphics, patterns, and illustrations.
Auto overlay
Adds a mode-aware color overlay on top of the background for better text readability. Light mode gets a light overlay, dark mode gets a dark overlay.
Overlay opacity
Range from 0% to 100%. How strong the overlay is. Higher values hide more of the background.
Live Gradient
A WebGL-rendered color gradient that moves slowly across your site on every page (homepage, PDPs, collection, cart, password page, everything). The shader continuously animates a 4-color mesh derived from a single seed color per mode. Replaces the solid background when enabled. Mutually exclusive with image/video background — turn off Enable image/video background first.
Enable Live Gradient
Master switch. When on, the Live Gradient renders on every page and the image/video background settings are ignored.
Gradient color (light mode)
Seed color used to derive the 4-color palette in light mode. The theme generates lighter/darker variants automatically via HSL math. Default #FAFAFA.
Gradient color (dark mode)
Seed color used in dark mode. Default #070707.
Gradient grain intensity
Range 0–100%. Film grain texture overlaid on the gradient. 0 = clean. Higher values trade tasteful for retro/lo-fi. Default 90%.
Per-product overrides on the Product Feed (Studio only)
When Live Gradient is enabled AND Enable per-product background overrides is on in the DRIFT Product Feed section, the active swiped slide can override the Live Gradient palette per product via metafields:
custom.feed_bg_color(color metafield) — the active product's color becomes the Live Gradient seed; the palette derives around itcustom.feed_bg_media(file metafield) — image or video takes over completely, replacing the Live Gradient on that slide
The override carries through to the product's PDP — clicking a product keeps the same Live Gradient palette as you saw on the feed slide.
See Feed background color and Feed background media for details.
Performance notes
Live Gradient adds about 6KB of WebGL shader JS + a small noise PNG asset. Lazy-loaded after first paint.
Continuous GPU usage while shoppers are on the site. Negligible on desktop. On lower-end mobile devices, the gradient animation may impact battery slightly.
The shader respects
prefers-reduced-motion— shoppers who've opted out of motion see the static gradient with no motion.
Last updated