> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/sections/products/product-with-text-and-featured-collection-with-media.md).
# Product with Text & Featured Collection with Media
Pair a single product or a whole collection with a large image or video, with optional parallax or zoom scroll animation.
Put a single product — or a whole collection — next to a large image or video, with optional parallax or zoom scroll animation, to give a spotlighted item more visual weight than a plain grid tile.
* **Product with Text** — pick one product manually and pair it with a media panel.
* **Featured Collection with Media** — pick one collection and let its products auto-populate next to the media panel.
***
### Product with Text
Pick one product manually and pair it with an image or video panel.
#### How to add
1. In Theme Editor, click **Add section**.
2. Select **Product with Text**.
3. Choose a product and a media file in the section settings.
#### Good to know
* **Desktop options defaults to off** — the opposite default from Featured Products' desktop variant picker. If shoppers report they can't pick a size or color on desktop for this section, check this setting first.
* Parallax speed is directional: negative and positive values move the media opposite ways during scroll, not just faster or slower.
#### Customization ideas
* Use Product with Text for a single hero product — a new launch or bestseller — where you want full control over both the copy and the exact product.
#### Settings
Settings
| Setting | What it does |
| ------------------- | ----------------------------------------------------------------------------------------------------------- |
| Product | Manually pick one product |
| Media | Image or video |
| Animation | Parallax or zoom on scroll |
| Parallax speed | -20 to 20 — negative and positive move the media in opposite directions as the page scrolls |
| Swap media position | Flip media to the other side |
| Desktop options | **Defaults to disabled** — the product's option/variant picker is hidden on desktop unless you turn this on |
***
### Featured Collection with Media
Pick one collection — its products populate the section automatically, no manual product picking — next to a media panel with the same parallax/zoom animation as Product with Text.
#### How to add
1. In Theme Editor, click **Add section**.
2. Select **Featured Collection with Media**.
3. Choose a collection — its products auto-populate the grid or slider side.
#### Good to know
* Unlike Featured Products or Featured Collections, this section doesn't let you hand-pick which products show — it always pulls the full current product list from the one collection you choose.
#### Customization ideas
* Use Featured Collection with Media for a "Shop the collection" homepage moment where the visual matters as much as the products.
#### Settings
Settings
| Setting | What it does |
| --------------------- | ---------------------------------------------------------------- |
| Collection | One collection — its products auto-populate the grid/slider side |
| Media | Image or video, with parallax or zoom scroll animation |
| Media size | Large, half, or small |
| Swap media position | Flip media to the other side |
| Layout | Grid or Slider for the auto-populated products |
| Product card settings | Same shared settings as Featured Products |
***
### Best practices
* Use Product with Text when you need full control over which exact product appears — a launch or bestseller.
* Use Featured Collection with Media when you want the section to stay current automatically as a collection's products change.
## Related
* [Featured products & collections](/docs/volume-themes/sections/products/featured-products-featured-collections-and-featured-collection-grid.md)
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://staylime.com/docs/volume-themes/sections/products/product-with-text-and-featured-collection-with-media.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.