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

## Menu elements

***

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>

## Add mobile menu images

***

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="https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-b8f9b264a3f05ce389f64a6ab7062c10c344e85b%2Fmobile-menu-block.png?alt=media" 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;"></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 %}
![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-7554ed1b702c1471057c36762c10ee8d4639f6a9%2Fmobile-menu-images.png?alt=media)
{% 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`.

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-a07278a95f9f1789667ff900e1c025040e141c71%2Fmobile-menu-metafield.gif?alt=media)
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.

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-cd340338e45806e5c41ed5754f67d143e16347f1%2Fmobile-menu-image-field.png?alt=media)
3. Click **Save**.
4. Refresh your theme editor, and the custom images should now appear.

</details>