# 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 type="success">

Steps:

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

</Hint>

![image](https://docs-assets.foxecom.app/hyper-theme/image_AU4VWytw.png)

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">

![Square button](https://docs-assets.foxecom.app/hyper-theme/image_VXmBX8s1.png)

![Square input](https://docs-assets.foxecom.app/hyper-theme/image_vRBtGZc3.png)

</Tab>

<Tab title="Slightly round">

![Slightly round button](https://docs-assets.foxecom.app/hyper-theme/image_sh158xok.png)

![Slightly round input](https://docs-assets.foxecom.app/hyper-theme/image_ARKV7vv0.png)

</Tab>

<Tab title="Rounded">

![Rounded button](https://docs-assets.foxecom.app/hyper-theme/image_rXoNELwz.png)

![Rounded input](https://docs-assets.foxecom.app/hyper-theme/image_fzTBW5CV.png)

</Tab>

<Tab title="Pill">

![Pill button](https://docs-assets.foxecom.app/hyper-theme/image_Li1uIiIB.png)

</Tab>
</Tabs>