# Popup menu

{% hint style="success" %}
**Tip:** To add a block, press **"Add block"** and choose **"Popup menu"** from the proposed list of blocks. This block can be added multiple times for each parent menu item.
{% endhint %}

{% hint style="warning" %}
This block is usable for the desktop only.
{% endhint %}

{% embed url="<https://www.youtube.com/watch?v=xk6TrWZIqMQ>" %}

In the **"Menu item name"** field, specify the top menu item name for which the block will be used.&#x20;

<mark style="color:orange;">**Note!**</mark> As the settings are case-sensitive, ensure input text exactly as it appears in the admin. Thus, if you use uppercase, lowercase, or capitals in your Shopify admin under *Shopify admin -> Content -> Menus,* maintain the same case in the block.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F7EmQvTnk95qgZgMxynNT%2Fadmin_menu.png?alt=media&#x26;token=a3d0e19a-614f-4adc-b8be-2f8d3139483f" alt=""><figcaption></figcaption></figure>

### Featured promotion

Use the **"Link"** resource selector to apply the redirection to the desired page. Customers will be directed to the pre-defined page when pressing the banner.

In the **"Image"** source selector, press **"Select"** to choose a media from the image library or upload it from your computer.

To display the promotional text over the image, edit the **"Heading"** and **"Paragraph"** fields.

The colors of the heading and paragraph can be changed using the corresponding color pickers.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FtUL1fuwH1cUU7QfNYqs8%2Fpopup%20menu_featured%20promotion.png?alt=media&#x26;token=2276f796-4b97-4c3b-a07f-7e8fe1e2d23f" alt=""><figcaption></figcaption></figure>

### Populars

Tick the **"Enable"** checkbox to activate the related settings. This feature adds a text with a link redirecting to the collection corresponding to the main menu item. This text will be positioned in the top left corner of the second-level popup. Additionaly, you can add an extra column with the images and link items on the right using the settings "Item #1 - Item #20".

Change the positioning of the side column items in the **"Vertical align"** picker. The text alignment can be set to "Top", "Center", or "Bottom" relative to images.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fd7gacLmsZ1Y1zpRFqagt%2Fpopup%20menu_populars%20align.png?alt=media&#x26;token=295def31-5eba-488f-889f-fad503c1b404" alt=""><figcaption></figcaption></figure>

To change the default link of the "Populars" (which originates from the main menu item set in the admin) to any other, use the **"Link"** field. Paste the external link or select one from the source selector.

The link title can be changed using the **"Populars"** field.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FM6kg5eDrZljVm8dYzvlc%2Fpopup%20menu_populars.png?alt=media&#x26;token=e82686df-b2a2-40b9-960f-4cc66977e059" alt=""><figcaption></figcaption></figure>

#### Item #1 - Item #20

With the provided settings, you can incorporate an extra column on the side featuring images with text, which can be linked to pre-defined collections. The items will appear as the nested menu of the **"Populars"** item. Disabling the [<mark style="color:blue;">option</mark>](#populars) will hide the items column by default.

Use the **"Image"** picker to set an image.&#x20;

<mark style="color:orange;">**Note!**</mark> Each item requires assigning an image. Otherwise, an item won't appear in the column.

Utilize the **"Link"** resource selector to assign the redirection to the desired page. Customers will be directed to the predefined page upon clicking an item.

In the **"Title"** field, type any text related to an image.

Using the **"Text"** field, an additional text line can be placed below the title.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FW075FfQG8zJyG9vNueQv%2Fpopup%20menu_items.png?alt=media&#x26;token=52717077-ebe8-4cdb-9222-3d61dd4d0e3e" alt=""><figcaption></figcaption></figure>