DRIFT Feed

The signature DRIFT homepage product feed — vertical swipe carousel or grid view, shopper-toggleable.

The Product Feed (named "DRIFT Product Feed" in the section picker) is a vertical scrolling carousel of products — like a TikTok For You feed but for shopping — and merchants can also let shoppers toggle into a grid view on the fly.

When to use it

• Homepage — replaces the traditional "featured collection" section

• Brand pages — for showcasing a curated edit

• Drop pages — for cycling through items in a launch

For full collection pages with filters/pagination, use the Collection Feed section instead.

Settings

Open the theme editor → click the Product Feed section.

Layout

• Collection — which collection to display (defaults to your Frontpage collection)

• Image ratio — square (1:1) or portrait (3:4)

• Default view — Swipe (the fullscreen takeover carousel) or Grid (responsive grid with product cards). Swipe is the default.

• Allow view toggle — when on, a swipe/grid icon appears in the header so shoppers can switch views on the fly. Their choice persists across pageviews via localStorage.

• Grid columns (desktop) — 3 or 4 columns. Mobile is always 2 columns.

Products

• Products per page — how many products to show (recommended: 10-20)

• Show product title — display titles below each image

• Show product price — display prices below each image

Hover effect — applies to both swipe (active slide only) and grid views. Desktop only — touch devices have no hover.

• None — no effect

• Grow — subtle scale-up on the image

• Glow — soft outline around the image

• Image swap — cross-fades to the product's 2nd image on hover. Requires a 2nd product image. Skipped for products with only one image and for sold-out products

Swipe-specific

• Progress indicator — none, dots, or numbers. Numbers (01/14) is the most distinctive

Studio only

• Quick-add enabled — adds a small "+" button to each product card

How customers interact with it

Swipe view (default):

• Mouse: scroll the page, the feed advances one product at a time

• Touchpad: swipe vertically

• Mobile: swipe up/down on the feed area

• Keyboard: arrow keys

The active product is centered in the viewport. Surrounding products are visible but slightly faded.

Swiping through a product's images (mobile)

Hover reveals a second image on desktop, but touch has no hover — so on mobile the images become swipeable instead.

• Swipe up/down — moves between products, as before

• Swipe left/right — moves through that product's images, up to four

The two gestures are handled by the browser on separate axes, so neither interferes with the other, and it works the same way as the product page's mobile gallery — shoppers only learn the gesture once.

Whichever image is nearest the centre is full size and sharp; its neighbours scale down, blur and fade, matching the treatment products get in the vertical feed.

Nothing to configure. Any product with more than one image gets it automatically, and images past the first are lazy-loaded so a feed full of products doesn't pay for images nobody swipes to. A product scrolled away from returns to its first image.

Grid view:

• Standard scrolling. Tap any product to navigate to the PDP.

• Mobile shows 2 columns; desktop shows the merchant-set 3 or 4 columns.

Toggle (if enabled):

• The swipe/grid icon in the header swaps the active view instantly — no page reload.

• Keyboard shortcut: V toggles the view.

Background morph (Studio only)

When Enable per-product background overrides is on, the active swiped slide's background morphs to match the product's metafield(s):

• custom.feed_bg_color (Color) — paints a solid color background OR seeds the Live Gradient palette (depending on which background style is active in theme settings)

• custom.feed_bg_media (File — image or video) — takes over the background completely

• Neither metafield set → falls back to the site-wide theme background

Title and price text auto-invert (white or black) for contrast based on the chosen color's luminance. Media bg always wins over color bg.

Background media blur

Range 0–30px. Blurs image and video backgrounds when the media metafield is set. Useful when the media is busy and you want the product to stand out. Doesn't affect solid color or gradient backgrounds.

See feed-bg-color and feed-bg-media for metafield setup.

Tips

• Curate the feed manually — pick hero products, bestsellers, new arrivals. Don't dump 100 products into it.

• Use lifestyle shots — the swipe view is editorial. Catalog cutouts feel sterile here. Story-telling shots land better.

• Default to swipe for editorial brands, grid for catalog-heavy stores — and let shoppers toggle either way.

• Test on mobile — vertical swipe is the native feel on phones. Verify on real devices.

• Pair with quick-add (Studio) — customers can add to cart without leaving the feed.

• Don't overload with sections — the feed is meant to be the focal point. Surrounding it with 5+ other sections dilutes the effect.

Performance

The swipe view loads all products' images upfront for smooth scrolling. Products-per-page above 30 may slow mobile initial loads. Stay around 10–20 for the best balance.

The grid view lazy-loads images via a blur-up pattern (small placeholder → full image on first visibility), so it scales better with larger collections.