---
description: >-
  With this block, you can add images under the parent links. Works only on
  mobile view.
---

# Image with button (Mobile)

{% hint style="success" %}
**Tip:** To add a block, press **"Add block"** and choose **"Image with button (Mobile)"** from the proposed list of blocks.
{% endhint %}

<mark style="color:orange;">**Note!**</mark> This block can be added for each parent menu item that contains nested menu items. How to create the drop-down menus can be read [<mark style="color:blue;">here</mark>](https://help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus).

In the **"Menu item name"** field, paste the parent link name for which the image will be applied. Note that this is a case-sensitive setting. Add the parent link name in lower or upper case as used in your _Shopify admin -> Content -> Menus_.

Use the **"Link"** source selector to redirect customers to the needed page when hitting the call-to-action button overlaid on the banner or the banner itself.

In the **"Image"** picker, press **"Select"** to choose one from the image library or upload it from your computer.

### Button

To overlay a button on a banner, insert a meaningful phrase into the **"Label"** field. If you need to hide the button, leave the field blank.

The **"Style"** drop-down allows you to set up different button layouts. Choose one of the pre-set styles: "Primary" or "Secondary". Use the following [<mark style="color:blue;">link</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#buttons) to view how each button style is presented in the theme.

Use the **"Color"** picker to set the desired color for the button. The color will be applied to the text, background, or border of the call-to-action button, depending on the "Style" previously selected in the block.

In the following example, you can view how the settings might be displayed in the drawer:

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F5aLngF9eMkGT2YTWZsGf%2Fheader_image%20with%20button.png?alt=media&#x26;token=985c1535-3b3d-46cc-bf83-7f26f5da7714" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Note!** To display the block on mobile, ensure that you set up a drop-down menu in your admin for the used parent item. The banner block will be displayed on the next step after clicking the parent link.
{% endhint %}

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FlM2TYSK93MrGk0eCm67m%2Fheader_image%20with%20button_1.png?alt=media&#x26;token=b934b065-1aeb-4c7d-b88e-e6a0d113543e" alt=""><figcaption></figcaption></figure>
