> 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/theme-settings/layout-and-style.md).

# Layout and style

**Theme settings → Layout, Buttons, Input fields, Product cards, Badges, Drawers**

These settings apply across the whole store, so shapes stay consistent from page to page.

## Layout

| Setting     | What it does                                                       |
| ----------- | ------------------------------------------------------------------ |
| Page width  | Narrow or Wide. How far content spreads on a large screen.         |
| Page margin | 10px to 100px. The gap between content and the edge of the screen. |

## Buttons

| Setting              | What it does                                                             |
| -------------------- | ------------------------------------------------------------------------ |
| Button corner radius | 0px (square) to 40px (fully rounded).                                    |
| Border thickness     | 1px to 4px. Applies to secondary buttons, which are drawn as an outline. |
| Text case            | Default, or Uppercase.                                                   |
| Shadow opacity       | 0 to 60. At 0 there is no shadow.                                        |
| Shadow blur          | 0px to 40px.                                                             |

## Input fields

| Setting             | What it does |
| ------------------- | ------------ |
| Input corner radius | 0px to 24px. |
| Border thickness    | 1px to 4px.  |

Applies to every field in the theme — search, the newsletter signup, the contact form, the quantity box.

## Product cards

| Setting             | What it does                                                                                      |
| ------------------- | ------------------------------------------------------------------------------------------------- |
| Card corner radius  | 0px to 32px.                                                                                      |
| Border thickness    | 0px to 4px. At 0 there is no border.                                                              |
| Card shadow opacity | 0% to 40%.                                                                                        |
| Card shadow blur    | 0px to 80px.                                                                                      |
| Image fit           | **Fill** crops the image to the frame. **Fit** shows all of it and leaves space around the edges. |
| Alignment           | Left or Center.                                                                                   |

**On Image fit:** choose **Fill** if your product photography is consistently shaped, and **Fit** if it varies. Fit guarantees nothing is cropped out, at the cost of uneven whitespace between cards.

## Badges

| Setting                     | What it does                                                           |
| --------------------------- | ---------------------------------------------------------------------- |
| Badge position              | Top left, top right, bottom left or bottom right of the product image. |
| Badge corner radius         | 0px to 24px.                                                           |
| On sale badge color scheme  | Which scheme the sale badge uses.                                      |
| Sold out badge color scheme | Which scheme the sold out badge uses.                                  |

## Drawers

Applies to the cart drawer and the mobile menu drawer.

| Setting          | What it does |
| ---------------- | ------------ |
| Corner radius    | 0px to 40px. |
| Border thickness | 0px to 4px.  |
| Shadow opacity   | 0 to 60.     |
| Shadow blur      | 0px to 80px. |


---

# 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/theme-settings/layout-and-style.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.