# Layout

{% hint style="info" %}
**Theme settings -> Layout**
{% endhint %}

## **RTL**

**Note:**\
Ensure language app maintains tag positions in "Theme content" translations.\
Verify tag order in translations to avoid layout issues in languages like Arabic or Hebrew.

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FHyBV2EneaY5mbv8ki2y1%2Fts_rtl.jpg?alt=media&#x26;token=597ca860-dee7-4b81-8649-033e7f63f324" alt=""><figcaption></figcaption></figure>

Specify content direction as right-to-left for languages like Arabic and Hebrew which use such writing.

You can also modify the gallery on a product page by selecting **Desktop gallery position** under Products -> .

**Page width**

Options: **Boxed** or **Wide**.

**Boxed width**

Adjust the **Boxed width** scale to set the page width from 1000 to 1800 pixels when Boxed mode is active.

Here are examples highlighting the variation between maximum and minimum width settings:

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

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2F0eJa2w8FWlJRgjPKNqrZ%2Fts_boxed_1000.png?alt=media&#x26;token=dfa3b172-1087-4d50-9b40-dac4f9efdbf7" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="1800" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FvkwYqKz9pgeuIdVNDKaR%2Fts_boxed_1800.png?alt=media&#x26;token=ce761304-a850-4dc1-a835-e59a46a4fab4" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

**Left and right page content margin**

Optimize wording

***

## **Grid** <a href="#grid" id="grid"></a>

**Horizontal space**

Add spacing between store sections for better navigation and organization.

**Adjusting Grid Spacing**

To alter the spacing between items like products or banners on a grid layout, use a pixel scale ranging from 10 to 40 pixels. This change applies to both desktop and mobile displays, ensuring consistent design and layout responsiveness.

Below are examples illustrating the difference between maximum and minimum values in space settings:

***

## **Section top spacing**

Set the values for top spacing. It is used in the sections Layout -> Top spacing option.

#### **Desktop/Mobile**

**Normal**

If you use the Normal option, change the top spacing gap on a scale from 10 to 100 pixels.

**Medium**

Using the Medium option allows you to set a precise spacing value from 10 to 80 pixels.

**Small**

The space parameters of the Small option can be set from 10 to 40 pixels.
