# Layout

{% hint style="info" %}
&#x20;**Theme settings -> Layout**
{% endhint %}

### Default content width

&#x20;This option allows you to choose the content width. It can be either full or boxed. The default content width is **“Full width”**, but you can change it to **“Boxed”** anytime. The changes apply to the header, footer, and home page sections. You can overwrite this option in section options.&#x20;

{% tabs %}
{% tab title="Full width" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf21ZWIet8j-RZ6uo5I%2F-Mf23jhsnjhQovayATgT%2FScreenshot_3.png?alt=media\&token=13b34edb-bedb-4b00-9890-57f71b0c3644)
{% endtab %}

{% tab title="Boxed" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf21ZWIet8j-RZ6uo5I%2F-Mf23mi_uP53ZtP4E1c0%2FScreenshot_4.png?alt=media\&token=21ea3767-0e72-4c77-96c9-712060fcfb80)
{% endtab %}
{% endtabs %}

### Show breadcrumbs

&#x20;If you enable this option, the whole path you made to get to the particular product will be shown:

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FiMTw2K5yCK9cT68ayD3M%2Fbreadcrumbs.png?alt=media\&token=073a2100-6264-43ea-8e83-69bbecf8e0fa)

### Pagination type

&#x20;A Shella theme offers you 4 pagination types. **“Infinite scroll”** - loads the next page content when you scroll to the end of the page. **Button “Load more”** - shows a “Load more” button at the end of the page. **“Classic”** - shows the list of pages with previous and next links. **“Centered classic”** - shows the list of pages with previous and next links, and is centered at the end of the page. Applies to the collection page and articles list page.

{% tabs %}
{% tab title="Classic" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf25AvZ1UgNMhzzTGNe%2F-Mf28YCZ6hgDsY4W7JV1%2FScreenshot_7.png?alt=media\&token=f07f8ab1-9b9b-42e1-b499-a07f267456aa)
{% endtab %}

{% tab title="Centered Classic" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf25AvZ1UgNMhzzTGNe%2F-Mf28bgnrP4QosHhUW2o%2FScreenshot_8.png?alt=media\&token=0853fb55-832c-4750-bca5-3aed9aed7c0c)
{% endtab %}

{% tab title="Button “Load more”" %}
![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf25AvZ1UgNMhzzTGNe%2F-Mf28gjtTOgDcOG_Uvqh%2FScreenshot_6.png?alt=media\&token=cc85c980-a576-48be-bd7f-c238d6421037)
{% endtab %}
{% endtabs %}

### Enable RTL

&#x20;If you enable this option, the entire page content will be shown from the right side to the left. You may need to switch language at your *Shopify Admin -> Settings -> Languages -> Published languages.*

&#x20;Example: If you need to have the page in Arabic, you need to follow these steps:

1. Change the theme language to Arabic (please make sure, that the texts on your page are translated in Arabic).
2. Enable RTL.

<figure><img src="https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-McsaSlZSE2uMqzAxy2S%2Fuploads%2FwOzadFyzrOpdMddmmxtO%2Frtl.png?alt=media&#x26;token=fa02ba45-fd7e-43cd-8b0e-e76fd57db012" alt=""><figcaption></figcaption></figure>

### Enable images lazyload

&#x20;This option enables page speed optimization. You can check what lazy loading means and how it works in the example of Shopify’s lazy loading method in [<mark style="color:blue;">**How Lazy Loading can Optimize Your Shopify Theme Images**</mark>](https://www.shopify.com/partners/blog/lazy-loading).&#x20;

{% hint style="warning" %}
**Please note**, that the Shella theme uses a completely different code for this purpose!
{% endhint %}

### Skin

&#x20;Select the preset color, typography, and padding configuration. You may review the skin storefront at our demo stores.

{% hint style="success" %}
[<mark style="color:blue;">**VIEW DEMO**</mark>](https://mpthemes.net/shella-shopify-theme/intro-center-cdn/)
{% endhint %}

### Age confirmation

&#x20;Here you can configure the **“Age confirmation”** popup. Enable the option **“Enable age confirmation popup”** if you want to use it for your store. Select the **“Background image”** to make it more attractive for the clients. Use the **“Background image width”** scale from 100 to 1200 to change the image size. You can also decide if to show or hide the confirmation checkbox.&#x20;

![](https://1204500216-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-McsaSlZSE2uMqzAxy2S%2F-Mf29KuZC2m_aqAuChO8%2F-Mf2BH7DvBznkYE69JRH%2FScreenshot_9.png?alt=media\&token=8a933ef7-1f46-4d2a-8ed8-9bb65a17e214)

{% hint style="success" %}
[<mark style="color:blue;">**VIEW ​DEMO**</mark>](https://shella-cannabis-cbd.myshopify.com/)
{% endhint %}
