> 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/metafields/feed-bg-color.md).

# Feed background color

A per-product color metafield that drives the active slide's background on the DRIFT Product Feed. When the site-wide [Live Gradient](/drift-shopify-theme/drift-studio/theme-settings/background.md) is enabled, this color seeds the 4-color gradient palette. When only solid color morph is active, this color paints the background flat.

## Namespace and key

`custom.feed_bg_color` — type **Color**.

## How to set it up

1. Shopify admin → **Settings** → **Custom data** → **Products** → **Add definition**
2. Name: `Feed background color`
3. Namespace and key: `custom.feed_bg_color`
4. Type: **Color** (under "Measurement / Reference / Choice")
5. Storefronts → Read access on
6. Save

## How to use it

On any product, scroll to the Metafields section in the product editor. Pick a color and save. To see the effect:

* **In the feed (homepage)** — swipe to that product. The background morphs to that color (or to a gradient seeded from that color if the live gradient is enabled).
* **On the PDP** — the gradient palette stays the same as it was on the feed slide.

## Enable the feature

For the per-product color to actually apply, you also need **Enable per-product background overrides** turned on in the DRIFT Product Feed section settings.

## Tips

* For solid color mode, pick colors that contrast well with your product images.
* For gradient mode, almost any color works — the theme derives a 4-color palette around your seed, so even saturated colors look harmonious.
* Sold-out products are skipped — the background falls back to the site-wide default.
* Title and price text auto-invert (white or black) based on the seed's luminance for readability.
