# Layout

By customizing the layout settings, you can tailor your theme to perfectly fit your brand’s identity and improve the overall user experience. 

{% hint style="success" %}
Steps:

1. In the theme editor (**Customize**), click **Theme settings**
2. Locate **Layout**
3. Make necessary changes
4. **Save.**
   {% endhint %}

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

This option lets you adjust the layout of the whole store, which includes:

* **Page width**: Use the slider or enter a value in pixels to define the overall page width.

A wider page width works well for large screens, while a smaller width creates a compact, focused layout. 📏

* **Corner radius:**&#x20;
  * **Buttons**: Style call-to-action buttons.
  * **Inputs**: Customize input fields.
  * **Blocks**: Style content blocks for a polished look.
  * **Product cards**: Add a unique touch to product listings.
  * **Badges**: Style promotional badges (e.g., “Sale” or “New”).

{% tabs %}
{% tab title="Square" %}

<figure><img src="/files/VXmBX8s1a7DS082QznYO" alt=""><figcaption><p>Square button</p></figcaption></figure>

<figure><img src="/files/vRBtGZc3i74VSYhofkE5" alt=""><figcaption><p>Square input</p></figcaption></figure>
{% endtab %}

{% tab title="Slightly round" %}

<figure><img src="/files/sh158xokl8VR0L1BZhVA" alt=""><figcaption><p>Slightly round button</p></figcaption></figure>

<figure><img src="/files/ARKV7vv0Zvw2SnS00Xuo" alt=""><figcaption><p>Slightly round input</p></figcaption></figure>
{% endtab %}

{% tab title="Rounded" %}

<figure><img src="/files/rXoNELwzw7Uq76IuitRW" alt=""><figcaption><p>Rounded button</p></figcaption></figure>

<figure><img src="/files/fzTBW5CVb6zX9gGEgDh2" alt=""><figcaption><p>Rounded input</p></figcaption></figure>
{% endtab %}

{% tab title="Pill" %}

<figure><img src="/files/Li1uIiIBbXXH48It37Qy" alt=""><figcaption><p>Pill button</p></figcaption></figure>
{% endtab %}
{% endtabs %}


---

# Agent Instructions: 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:

```
GET https://docs.foxecom.com/hyper-theme/theme-settings/layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.