# Layout

## How to edit Layout

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

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

### Page width

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

Use the slider or manually enter a pixel value to define your store’s overall page width. The range is 1200 - 2000px.

This setting helps you maintain a consistent layout across all pages, ensuring that your store looks clean and balanced on different screen sizes.

{% hint style="info" %}

* A wider width works best for large screens and modern layouts.
* A narrower width creates a more compact and focused appearance.&#x20;
  {% endhint %}

### Right-to-Left support <a href="#right-to-left-text-support" id="right-to-left-text-support"></a>

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

An RTL (Right-to-Left) layout is a website design in which the content flows from right to left, commonly used for languages written in this direction.

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

1. In the theme editor (**Customize**), click **Theme settings.**
2. Select **Layout.**
3. Click ✅ **Enable RTL layout.**
4. Enter the **Languages support RTL.** Enter [ISO language codes](https://www.loc.gov/standards/iso639-2/php/code_list.php) separated by commas (e.g., `he,ar`).

Leave the field blank to apply RTL support to **all** languages.

5. Click **Save**.
   {% endhint %}

* **Enable RTL:** Toggle ON to apply RTL layout for supported languages.
* **Languages support RTL:** Enter [ISO language codes](https://www.loc.gov/standards/iso639-2/php/code_list.php) separated by commas. Leave the field blank to apply RTL support to **all** languages.

> 💡 Example: Use `he,ar` to apply RTL only for Hebrew and Arabic.

{% hint style="info" %}

#### Best practices

* Enable RTL layout when using right-to-left languages such as Arabic or Hebrew.
* Make sure your RTL languages are already added and published in **Shopify Settings > Languages** before enabling this feature. [*Learn more*](https://help.shopify.com/en/manual/international/localization-and-translation)

![](/files/BQ7HdlesfNaOf5E1fmcv)
{% endhint %}

### Enable Back to Top Button

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

With just one click, customers can quickly navigate back to the top of the page, making it easier for them to continue browsing or locate essential information.

This option is especially helpful for stores with infinite scrolling, long-form product pages, or extended home layouts.

{% hint style="info" %}
**Steps:**

1. In the theme editor (**Customize**), click **Theme settings.**
2. Select **Layout.**
3. Select ✅ **Enable back to top button**.
4. Click **Save.**
   {% endhint %}

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


---

# 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/pebble-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.