> 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/frameora/global-sections/header.md).

# Header

The header appears at the top of your storefront and helps customers navigate your store.

Frameora’s header can include your logo, main menu, search icon, cart icon, separator line, and optional header button.

### Open header settings

<figure><img src="/files/YzeawaKJXYZbA3daUSNf" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
To edit the header:

* From your Shopify admin, go to **Online Store > Themes**.
* Find **Frameora**.
* Click **Customize**.
* In the theme editor sidebar, select **Header**.
  {% endhint %}

### Logo

Use the **Logo** setting to upload the logo shown in the header.

For best results, use a clear logo with a transparent background.

### Logo width

Use **Logo width** to control the size of the logo in the header.

The logo width can be adjusted from **120px to 260px**.

Adjust the width until the logo looks balanced on desktop and mobile.

### Menu

Use the **Menu** setting to choose the navigation menu shown in the header.

{% hint style="success" %}
To edit menu links:

* From your Shopify admin, go to **Content > Menus** or **Online Store > Navigation**.
* Open the menu used by the header.
* Add, remove, or reorder links.
* Save your changes.
  {% endhint %}

Recommended menu links for a photo product store may include:

* Products
* Shop Wall Art
* Occasions
* Ideas
* Custom Canvas
* Gift Cards
* Contact

### Separator line

Enable **Show separator line** if you want a subtle line below the header.

This can help separate the header from the page content.

### Search icon

Enable **Show search icon** to display the search icon in the header.

Search helps customers find products, collections, pages, and other searchable store content.

### Cart icon

Enable **Show cart icon** to display the cart icon in the header.

If you disable the cart icon, make sure customers still have a clear way to access the cart or checkout.

### Header button

Frameora can show an optional button in the header.

Use this button for an important store action, such as linking customers to a main product, collection, or custom product page.

Header button settings include:

* Show button
* Button label
* Button link

Keep the button label short and clear.

Examples:

* Create Your Tiles
* Shop Photo Tiles
* Start Your Order
* Shop Now

### Color scheme

Use the **Color scheme** setting to adjust the header style.

Available options:

* Light
* Soft blue

Choose the color scheme that works best with your logo and storefront design.

### Mobile header

Frameora adapts the header for mobile browsing.

After editing the header, preview your store on mobile to check:

* Logo size
* Menu behavior
* Search icon
* Cart icon
* Header button visibility
* Spacing and readability

### Save your changes

After editing the header, click **Save**.

If changes do not appear immediately, refresh the storefront or open the page in a private browser window.


---

# 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/frameora/global-sections/header.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.