> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/pages/header/mobile-menu.md).

# Mobile menu

The **Mobile menu drawer** displays your menu links, social media icons, and language and country selectors. You can choose to show feature images for collection and product links.

<h2 align="center">Menu elements</h2>

***

By default, the mobile menu displays the following features when enabled for the desktop menu in the **Header** settings. See the [Header guide](https://github.com/fluorescent/kb-stiletto/blob/main/pages/header/header/README.md) for more information.

<table><thead><tr><th width="302">Features</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:$primary;">Language selector</mark></td><td>Let customers select their preferred language.</td></tr><tr><td><mark style="color:$primary;">Country selector</mark></td><td>Let customers to view your products with their preferred currency.</td></tr><tr><td><mark style="color:$primary;">Social media icons in mobile menu</mark></td><td>Show icons for your social media accounts added to <strong>Theme settings > Social media</strong></td></tr><tr><td><mark style="color:$primary;">Secondary menu</mark></td><td>Show a separate link list below the main menu.</td></tr></tbody></table>

<h2 align="center">Add mobile menu images</h2>

***

Add a **Mobile menu images** block to show images next to collection and product links.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Under **Header**, click **(+) Add block**.
2. Select **Mobile menu images** and click the block to open the settings.

<img src="/files/vdeh2fmxL7zUuAdZR28Y" alt="" data-size="original">

3. Enter the **Menu name** from your Shopify admin to enable the mobile images.

   > If left blank, the images will be enabled for the main menu. Add a new mobile menu images block for each separate menu.
4. To make the thumbnail images a uniform shape, select an **Image aspect ratio** to crop them to **Square**, **Landscape**, or **Portrait**.

Select **Natural** to display the original shape of each image.

4. Click **Save**.

</details>

{% columns %}
{% column %}

* **Links to collections** will show the feature image set in your Shopify admin. If no image is set, the menu will show the first product's image.
* **Links to products** will show the first featured image set your the Shopify admin.

<mark style="color:$info;">If you want to show a</mark> <mark style="color:$info;">**custom image**</mark><mark style="color:$info;">, you can</mark> [use metafields to assign images to collections and products](#add-custom-images-with-metafields).
{% endcolumn %}

{% column %} <img src="/files/bH4rHxK812GckGn2B5cp" alt="" width="375">
{% endcolumn %}
{% endcolumns %}

### <mark style="color:$primary;">Add custom images with metafields</mark>

{% hint style="info" %}
**Metafields** allow you to add custom content and data to specific products, collections, and pages. You can then connect metafields to your templates and sections using **Dynamic sources** to automatically display the correct content for different parts of your store.
{% endhint %}

To show a custom image, instead of the default collection or product image, you can use metafields in your Shopify admin.

* First, set up a Collection or Products metafield. This metafield needs to have the exact **Namespace** `stiletto.mobile_menu_thumbnail`.
* Second, add custom images to this new metafield to your products or collections in the Shopify admin.

Follow the step-by-step instructions below.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your Shopify admin:

1. Go to **Settings > Custom data**.
2. Select **Collections** or **Products**.
3. Click **Add definition**.
4. In the **Name** field, enter `Mobile menu thumbnail`.

   > **The name must be this exact phrase**. In the **Namespace and key** field, it will autopopulate to be `custom.mobile_menu_thumbnail`
5. In **Namespace and key**, select `custom` and replace it with `stiletto`. It should now read as `stiletto.mobile_menu_thumbnail`.

   <img src="/files/Tm7IS7EKs2eFtUi43KK0" alt="" width="563">
6. Click **(+) Select type** and select **File**.
7. Under **Validations**, make sure **Accept specific file types** is selected, and uncheck **Videos.**
8. Click **Save**.

**To add images to your collections or products' metafields:**

1. From your Shopify admin, open your collections or products to add images.
2. Scroll down to the **Metafields** area, and click the "Mobile menu thumbnail" metafield you created to select an image.

   <img src="/files/U1WkGEmzncomjExj0WYr" alt="" width="563">
3. Click **Save**.
4. Refresh your theme editor, and the custom images should now appear.

</details>