> For the complete documentation index, see [llms.txt](https://docs.lufavo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lufavo.com/roomfolk/pages/product-page.md).

# Product page

The most important page in the store. It shows the product's images on one side and its details on the other, with recommendations underneath.

## How it is built

The details column is made of [product blocks](/roomfolk/blocks/product-blocks.md) — title, price, variant picker, buy buttons, description, collapsible rows. Add, remove and reorder them in the theme editor with a product open.

Underneath sit two [Product recommendations](/roomfolk/sections/product-recommendations.md) sections: related products, and complementary products.

## Images

| Setting         | What it does                                           |
| --------------- | ------------------------------------------------------ |
| Aspect ratio    | Square, Portrait or Landscape.                         |
| Image width     | 40% to 60% of the row on a desktop screen.             |
| Autoplay videos | Plays muted and on a loop, for clips up to 30 seconds. |

**On aspect ratio:** the gallery holds one shape whatever the images are, so clicking through them does not shift the page under the customer's cursor. Pick the shape that suits most of your photography.

**On autoplay:** clips longer than 30 seconds wait to be pressed rather than playing on their own, so a long video does not start unprompted.

## Spacing and style

| Setting        | What it does                |
| -------------- | --------------------------- |
| Top spacing    | 0px to 120px.               |
| Bottom spacing | 0px to 120px.               |
| Color scheme   | Which scheme the page uses. |

## Different layouts for different products

If some products need a different arrangement, make a second template:

1. In the theme editor, open the page menu and choose **Products → Create template**.
2. Arrange it however you need.
3. Assign it to a product from that product's page in your Shopify admin, under **Theme template**.

## What the page does on its own

* **Variant changes** update the price, the availability and the images without reloading the page.
* **Unavailable combinations** disable the add to cart button and label it "Sold out".
* **Media** — video, 3D models and YouTube or Vimeo embeds — all work in the gallery alongside photographs.
* **Rich results** — the page publishes structured product data, so search engines can show your price and availability in results.


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.lufavo.com/roomfolk/pages/product-page.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.