> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/page-categories/404-page.md).

# 404 page

## 404 page

{% hint style="success" %}
**Tip:** To edit the page, navigate to the **404 page** template from the top drop-down menu.
{% endhint %}

#### **Media**

**Image**\
Press **"Select"** to upload the necessary animation for all screen sizes. 

**Image ratio**\
Select an option from the drop-down to adapt the media to the desired size. If an option includes additional settings, they will appear underneath the drop-down after selecting an option:

* **"Adapt to image"**. Displays an image in its original aspect ratio.
* **"Landscape"**. Displays an image horizontally while preserving its original landscape proportions, allowing for more flexibility when image dimensions vary.
* **"16/9"**. Displays images in a widescreen format, making it ideal for banners, featured content, and landscape photography.
* **"Proportion"**. Select the option to adjust a media height as a percentage using the **"Proportion"** scale. The parameters can be changed from 10% to 210%\*.

\*The "Proportion" option is applied to mobile by default.

**"Proportion"** indicators:\
\* 100% = Square image\
\* Less than 100% = Landscape\
\* More than 100% = Portrait\
\* 16:9 = 56, 4:3 = 75, 3:2 = 67, 2:1 = 50, 1:1 = 100, 9:16 = 175, 3:4 = 133, 2:3 = 150, 1:2 = 200.

#### Layout options

**Dividing line**\
Add a divider by setting its position: "Top", "Bottom", or "Both". Select "None" to hide the divider.

**Top spacing /** **Bottom spacing**\
Decide whether to add spaces at the top and bottom of the section. Control spacing settings from 0 to 100 pixels on each scale.

***

{% hint style="success" %}
Provides additional blocks: **"Button"**, **"Description"**, and **"Heading"**.\
**Tip:** Press **"Add block"** to use the desired block.
{% endhint %}

### Button

**Label**\
Enter the text displayed on the button.

**Link**\
Select a page or paste a URL that opens when customers click the button.

**Style**\
Select the desired style in the drop-down: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following [<mark style="color:blue;">help page</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#buttons).

**Color**\
Applies color settings according to the selected button style:

* **"Primary"**. Changes the button background color.
* **"Secondary"**. Colorizes the text and border.
* **"Link style"**. Changes the text color.

***

### Description

**Description**\
Enter the message displayed on the page to inform customers that the requested page could not be found. Use this text to explain the situation and guide customers back to your store.

**Color**\
Use the paint palette to set the desired color. The color you apply to the item is used for both desktop and mobile.

***

### Heading

**Heading**\
Enter text to display as the main title.\
Example: Error 404

**Size**\
Change the main text size to "Small", "Medium", or "Large".

**Color**\
Set the heading color. The color setting is applied to both desktop and mobile.

***

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

<figure><img src="/files/yIMLS8RD0ov4v1v8PRje" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="/files/Aed3zI4BaH0XKbgzVnLD" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}