# Overview #### Why ANG - Extra menu ? Extra menu is easy to set up and use, many customization modes, compatible with most popular themes. In particular, the Extra menu supports translation in many different languages, suitable for multilingual stores. #### Available menu types: * Mega menu * Tab menu * Dropdown menu (tree menu) with multiple levels #### Outstanding customizations: * Customize menu animation: fade in, flip in, zoom in, shift up * Customize font & color * Customize trigger event to active menu: hover and click * Responsively build-in grid #### Full list features of ANG - Extra menu * Mega menu * Tab menu * Dropdown menu / tree menu with multiple levels * Drag and drop menu items to change position * Bubble for menu * Customize front, color, width,... * Customize event to active menu * Many icons and Google fonts available * Add image directly to menu or background * Support horizontal & vertical menu * Show / hide menu item on desktop or mobile * Product slider * Image slider * Import / export menu data # Quick start This is a video tutorial on how to create and edit a simple menu. {% embed url="" %} Video tutorial {% endembed %} # Replace menu by smart selector If the menu cannot be displayed on the store, you can use this method to select the menu available on your store so the app will find and replace the app's menu in the position you want to display. #### How to use smart selector? **Step 1**. Click Design > Choose "Replace a menu by CSS selector" > Click "Smart selector".

**Step 2**. Move mouse to menu that you want to replace by "Extra menu". If the menu appears blue bordered, click on it and there will be a confirmation message. Click "OK" to confirm.

You will see result like image bellow.

**Step 3**. Choose mobile menu selector. Click "Smart selector"

Open mobile menu **Step 4**. Move mouse to mobile menu that you want to replace. If the menu appears blue bordered, click on it and there will be a confirmation message. Click "OK" to confirm

**Step 5**. Check result and save menu data to accept all changes.

# Create menu image {% embed url="" %} # Create bubble menu {% embed url="" %} # Menu with masonry grid #### Menu without masonry grid ![Round corners main menu](https://cdn.flastpick.com/general/docs/without-masonry.png) #### How to enable masonry grid ![Round corners main menu](https://cdn.flastpick.com/general/docs/enable-masonry.png) #### Menu with masonry grid ![Round corners main menu](https://cdn.flastpick.com/general/docs/with-masonry.png) # How to use gradient color #### Switch from Solid color to Gradient color ![Switch to gradient color](https://cdn.flastpick.com/general/docs/switch-gradient.png) #### Add a color to gradient ![Add a color to gradient](https://cdn.flastpick.com/general/docs/add-color.png) #### Remove a color from gradient ![Remove a color from gradient](https://cdn.flastpick.com/general/docs/remove-color.png) #### Change opacity in color gradient ![Change opacity in color gradient](https://cdn.flastpick.com/general/docs/change-opacity.png) #### Change direction color gradient ![Change direction color gradient](https://cdn.flastpick.com/general/docs/change-direction.png) # Create product slider To create a product slider on the menu, please follow the steps below: 1. Add a new menu item and select "Product sider" from the layout menu.

2. From "Slider source" choose to create a slider from a collection or select specific products.

2.1 **From a collection:** Selection a collection and configure the options for the slide.

2.2 **From specific products**: Click to "View and edit products" button.

3. Find and select products to add to the slide.

4. You can reorder the added products and click "Done" to add products to slide.

5. Save your changes and view results.

**Video guide.** {% embed url="" %} # Upload images to your store Learn how to upload images to the store and display them on the menu 1. Go to Shopify Admin > Content > Files, click to "Upload files" button

2. Choose photos from your computer and upload them. 3. After uploading the image, click the "Copy link" button in the "Link" column to copy the image link.

4. Paste the image link into the menu where you want to display the image.

# Schedule publish menu You can schedule menu publishing for a specific time period for events such as Christmas, New Year, Black Friday,... ### 1. **Duplicate the menu and customize it to suit upcoming events.**

### 2. Re-customize menu

### 3. Set menu schedule

### 4. Save changes You just need to save the changes, the system will automatically schedule and publish the menu for you. You can also schedule other menus at different time intervals.

# Group mobile menus Group menu items on mobile into separate groups. 1. To enable menu grouping on mobile, go to **Design** tab > **Mobile** > **Group items**, Enable "**Group menu items on mobile**" option.

2. To add group, click "Add group" button, enter group title and select menu items.

3. You can change color, font size, border,... of group.

4. Group menu mobile on live store

# Breadcrumbs Breadcrumbs is a block built into the ANG - Extra menu application. You can display breadcrumbs on any page if the link exists in the menu. To add Breadcrumbs to your store, you need to make sure the menu is enabled on the theme, then follow these steps: #### 1. **Select your theme and customize it.**

#### 2. Select the page and add Breadcrumbs block to your page

#### 3. Reconfigure breadcrumbs and save

#### 4. See results on live store

# Publish a second menu for mobile only This article will guide you in detail how to publish a secondary menu and enable it on mobile. Conditions for use: 1. Your theme must have a separate mobile menu, not the same element as the desktop menu. 2. You must be on the **VIP** plan of the ANG - Extra menu app. Steps to publishing for mobile #### 1. Disable mobile menu in menu for desktop. Go to customize the display menu for the desktop and turn on the "Hide menu on mobile" option.

Turn on the "Hide menu on mobile" option

#### 2. Publish secondary menu to display menu on mobile

# Create secondary tab Add a second level of tabs inside a main tab to better organize menu content. Step 1: Edit the tab where you want to add a secondary tab. Step 2: Turn on the "**Enable secondary tabs**" option.

You will see secondary tabs appear. You just need to add tab items as usual. If you don't see the "**Enable secondary tabs**" option, click the "**Show more options**" button to display it.

# Schedule the display of a menu item. Control when the menu item is visible to customers Step 1: Edit a menu item that you want to schedule to display. Step 2: Click the "**Show more options**" button to display scheduling options.

Step 3: Turn on the "**Enable schedule**" option.

Once turned on, you simply need to set the display time. # Hide products when out of stock Products that are out of stock will not be shown in the menu. > The "Hide products when out of stock" feature only works with menu items whose menu type is "Product" and "Text link" if the "Link type" is "Specific product". Step 1. Edit a mega menu item with the menu type "Product" or "Text link" and the link type "Specific product".

Step 2: Turn on the "Hide products when out of stock" option.

This menu item will automatically hide when the product is out of stock. # Block collapsible > The "Block collapsible" feature is only available for menu items with the menu type "Block item".

Step 1. Edit a "Block item", then find the "Enable Block collapsible" option and turn it on. You can choose the type of arrow you want to display.

When it is called, it will look like this:

This feature will work on both desktop and mobile. # Footer menu Add a sticky bottom navigation bar to your storefront on phones and tablets — like the tab bar in a mobile app. Give shoppers one-tap access to Home, Shop, Search, Cart, and more. ### What is the Footer Menu? The Footer Menu is a navigation bar that stays pinned to the bottom of the screen on **phones and tablets**, so your most important links are always within thumb's reach. It works like the tab bar in a native mobile app: a row of up to **5 icons with labels** that follow the shopper as they scroll. It is completely independent from your theme's own footer — it doesn't replace your footer links or change your theme. You can turn it on or off at any time. > **Premium feature.** The Footer Menu is available on a paid plan. You can build and preview it for free — you only need a paid plan to make it live on your storefront.

*** ### Before you start To show the Footer Menu on your storefront you need two things: 1. **A paid plan** — required to publish (set a menu live). 2. **The app embed turned on** in your theme — this is what actually renders the bar. It takes one click.

*** ### Step 1 — Turn on the app embed The bar only appears once its app embed is enabled in the theme editor. 1. Open the **Footer Menu** page in the app and click **Learn more** or **Open theme editor**, or go to **Online Store → Themes → Customize → App embeds**. 2. Find **Extra menu — Footer menu** in the App embeds panel and toggle it **on**. 3. Click **Save**. \[VIDEO: 15–20s screen recording — opening the theme editor, scrolling to App embeds, toggling "Extra menu — Footer menu" on, clicking Save.] Back in the app, you can click **Check again** on the "Turn on the footer menu in your theme" banner to confirm it's active.

*** ### Step 2 — Create a footer menu 1. Go to the **Footer Menu** page in the app. 2. Click **Create footer menu** and give it a name (this name is internal — shoppers never see it). 3. You'll be taken straight into the editor. You can keep up to **10 footer menus** — one is **Live**, the rest are drafts you can use as backups or seasonal variations.

*** ### Step 3 — Add your items Each footer menu holds up to **5 items** (more than 5 makes each tap target too small on a phone). Every item has an **icon** and a **label**. 1. Click **Add item**. 2. Pick an **icon** and type a short **label**. 3. Choose where the item links to: * **Home** — your storefront home page * **Collection** — a specific collection * **Product** — a specific product * **Page** — a standard page (e.g. Contact, About) * **Blog** — a blog * **Custom URL** — any link or path (e.g. `/cart`, `/search`) 4. Drag items by the handle to reorder them.

\[VIDEO: 10–15s — adding an item, then drag-and-drop reordering two items in the list.] > **Tip:** Keep labels to one short word (e.g. *Shop*, *Search*, *Cart*). Short labels keep the bar tidy and readable on small screens. *** ### Step 4 — Customize the appearance Open the **Appearance** panel to style the bar. The live preview updates as you change each setting. * **Bar background** — a solid color or a gradient. * **Text & icon color** — the color of inactive items. * **Active item color** — the label/icon color for the item matching the current page. * **Active background** — an optional colored "pill" behind the current item (solid or gradient). Leave it transparent if you don't want a pill. The active item is detected automatically from the page the shopper is on, and its label is slightly bolded so it stands out even without a colored pill.

> **Accessibility note:** the app shows a contrast warning if your text color is hard to read against the background, so shoppers can always read the labels. *** ### Step 5 — Control where and how it shows Open the **Visibility** panel to fine-tune the behavior: * **Hide on scroll** — the bar slides away as the shopper scrolls down and comes back when they scroll up (like Facebook). Off by default. * **Avoid conflicts at the bottom of the screen** — automatically hides the bar when a drawer, popup, or another sticky bar (e.g. a sticky "Add to cart") is open, so nothing overlaps. On by default. * **Lift chat widgets** — nudges chat buttons (Crisp, Tidio, Messenger, etc.) up so the bar doesn't cover them. On by default. * **Hide on specific page types** — turn the bar off on pages where you don't want it (e.g. checkout-adjacent or landing pages).

*** ### Step 6 — Translate your labels (optional) If your store sells in more than one language, you can translate each item's label. 1. Open the **Translations** panel. 2. Choose a language from **Translating into** at the top. 3. Enter a translation for each item. The placeholder shows the original label — leave a field blank to fall back to the original. Shoppers automatically see the labels in their own language. Translations travel with the menu when you export, import, or duplicate it.

*** ### Step 7 — Set it live When you're happy with your menu, click **Set live** in the top-right of the editor. * Only **one** footer menu can be live at a time. Setting a new one live automatically moves the previous one to draft. * **Save your changes first** — "Set live" publishes what's saved, not unsaved edits on screen, so the button is disabled until you save. * To take the bar down, open the live menu and click **Move to draft**. Your menu is kept — it just stops showing on the storefront.

*** ### Managing multiple menus From the **Footer Menu** list page, use the **…** menu on any row to: * **Set live / Move to draft** * **Duplicate** — great for seasonal or A/B variations * **Rename** * **Export** — download the menu as a `.json` file * **Import** — upload a `.json` file to recreate a menu (including its translations) * **Delete** (the live menu can't be deleted until you move it to draft)

*** ### Frequently asked questions **Does the Footer Menu show on desktop?** No — by design it only appears on phones and tablets, where a bottom bar is most useful. **Will it replace or change my theme's footer?** No. It's a separate bar that sits on top of your storefront and doesn't touch your theme's footer links. **I enabled the app embed but nothing shows.** Make sure you have a menu **set live** and that you're viewing the store on a phone/tablet-width screen. If you're on a paid plan and it still doesn't appear, click **Check again** on the banner. **What happens if I downgrade to the free plan?** Your menus and settings are kept, but the bar stops showing on your storefront. Set a menu live again after you upgrade to bring it back. **Can I use more than 5 items?** No — 5 is the maximum so each item stays large enough to tap comfortably on a phone. {% embed url="" %} ### Cart button An item that links to the cart can either open the cart page or open your theme's own cart drawer, so a shopper who adds something keeps their place on the page instead of being sent away from it. Choose between them under **edit an item → Links to: Cart**. Most themes need nothing else. If your theme's drawer doesn't open, you can point the app at its cart button yourself — by clicking the button on your own storefront rather than by writing any code. [Open your theme's cart drawer from the footer bar →](#cart-button) # Cart button Open your theme's cart drawer from the footer bar When a footer bar item links to the cart, you can choose what tapping it does: * **Open the cart page** — the shopper goes to `/cart`, the same as any other link. * **Open your theme's cart drawer** — the bar clicks your theme's own cart button, so the drawer or popup your theme already uses slides open without reloading the page. The second option is the one most stores want. A shopper who is halfway down a collection page keeps their place instead of being sent to a separate page and having to come back. You'll find both under **Footer Menu → edit an item → Links to: Cart**. > The preview in the app can't show this. The preview is a picture of your bar, not a copy of your theme, so it has no drawer to open. Check it on your live storefront on a phone. ### It works with most themes on its own Leave **How to find your theme's cart button** on **Automatically** and the bar looks for your theme's cart control every time the item is tapped. It looks at what is actually on the screen at that moment, which matters because many themes ship a separate header for phones — the bar picks the one your shopper can see, not the one meant for desktop. Nothing breaks if it finds nothing. The item keeps its ordinary link to the cart page underneath, so the worst case is the behaviour you had before: the cart page opens. There is no dead tap. The same is true if your theme has no drawer at all, or if it doesn't respond — after a moment the cart page opens instead. ### When the drawer doesn't open Some themes build their cart button in a way that can't be recognised from the outside. If tapping the item takes shoppers to the cart page when you expected a drawer, point the app at the button yourself: 1. Set **How to find your theme's cart button** to **Point it at a specific button**. 2. Click **Pick it on my store**. Your storefront opens in a small window. 3. Move the pointer over your header. Anything you can pick is outlined in green; anything that isn't a button or a link is outlined in red. 4. Click your theme's cart button. The window closes and the field fills in. 5. **Save**.

The window that opens is phone-sized on purpose. Your bar only appears on phones, and if your theme has a separate mobile header, a button picked at desktop width would be one your shoppers never see. Pick the button in the header **as it looks in that small window**. Two things worth knowing while picking: * Aim at the cart button in your header, not at the icon drawing inside it. The picker snaps to the button around whatever you point at, so either works. * Your footer bar itself can't be picked. Pointing at it would make the item trigger itself. ### Typing the selector yourself The field takes any CSS selector, so if our support team sends you one, paste it in and save. For example, Shopify's Horizon theme uses: ``` .cart-drawer > button ``` If the selector is misspelled the app tells you while you type. If it is valid but matches nothing on your storefront, the bar quietly goes back to finding the button on its own, so a selector left over from a theme you no longer use can't break the item. ### After you change theme Selectors describe one theme's markup, so one written for your old theme usually means nothing in your new one. Set **How to find your theme's cart button** back to **Automatically** and try it — most themes need nothing else. Only reach for **Point it at a specific button** again if the drawer doesn't open. # Create image carousel An image slider shows a row of images — banners, lookbooks, collection covers — that customers can swipe through. It is a **menu item layout**, so the slider sits in the menu itself. {% hint style="info" %} Image slider and [product slider](/create-product-slider) are not the same thing. A product slider is built from products or a collection and lives inside a mega menu. An image slider is built from images you supply and is used as a menu item. {% endhint %} {% stepper %} {% step %} ## Add a new menu item In the menu editor, click "+ Add menu item" to create a new item.

{% endstep %} {% step %} ## Select the Image Carousel layout In **Menu layout**, choose the **Image Carousel** icon (the last one).

{% endstep %} {% step %} ## Manage images Click "Manage images".

{% endstep %} {% step %} ## Fill in the slides For each slide, fill in: * **Image path** — the image URL. See [Upload images to your store](/upload-images-to-your-store) to get one. * **Title** — the caption shown with the image. * **Alt** — alternative text, used for accessibility and SEO. * **Url** — where the slide links to when clicked. Use "+ Add more image" to add a slide, the handle on the left to reorder, and the bin icon to remove one.

{% endstep %} {% step %} ## Apply the image list Click "Apply" to return to the item options.

{% endstep %} {% step %} ## Set mobile slider behavior Set how the slider behaves on mobile: **Viewed items mobile**, **Image width / height on mobile**, **Image border radius on mobile**, **Image aspect ratio on mobile**, **Limit items**, **Space between items** and **Slider peek right** — the sliver of the next image that stays visible so customers know they can swipe.

{% endstep %} {% step %} ## Style captions and colors Style the captions with **Title position**, **Title alignment**, **Title font size**, **Image title color**, **Image title hover color** and **Image overlay color**. Turn off "Make slider items clickable" if the images should be decorative only.

{% endstep %} {% step %} ## Save and check the storefront Click "Save" and check the result on your storefront. {% endstep %} {% endstepper %} ## Good to know * Image slider is available on the **VIP** plan. * Use images with the same aspect ratio. Mixed ratios make the row look uneven. * "Slider peek right" only matters when there are more images than fit on screen. * If the slider looks too tall on phones, lower **Image height on mobile** or use a wider **Image aspect ratio on mobile**. # Create menus for each market You can build several independent menus and show each one only in the markets you choose — for example, a different navigation for your US store and your European store. Markets come from **Shopify Settings → Markets**. {% stepper %} {% step %} ## Create a new menu Open **Menus** and click the "+" button to create a new menu.

{% endstep %} {% step %} ## Name the menu Give the menu a name and an optional description, then click "Save". The new menu is created as a **Draft**.

{% endstep %} {% step %} ## Build the menu Click "Customize" to build the menu for that market, then save your changes.

{% endstep %} {% step %} ## Open publishing options Back on the **Menus** page, open the "..." menu of that menu and choose **Publish on markets**.

{% endstep %} {% step %} ## Add a market In the "Publish for selected markets" dialog, click "+ Add market". {% endstep %} {% step %} ## Select markets Tick the markets this menu should appear in, then click "Done". You can search by market name or ID if you have a long list.

{% endstep %} {% step %} ## Publish the menu Check the markets listed next to "Selected markets" and click "Publish". {% endstep %} {% step %} ## Repeat for each dedicated market menu Repeat steps 1–7 for every market you want a dedicated menu for. Each menu is stored separately, so editing one never affects the others. {% endstep %} {% endstepper %} {% hint style="info" %} **Good to know** * If no market is selected, the menu will not be visible anywhere. Select at least one market, or use **Publish global** to show the menu in every market. * Use **Publish on mobile** when a menu should only replace the mobile navigation — see [Publish a second menu for mobile only](broken://pages/31e9501559ef0df053e1c2763b80481a8cdcfb1b). * A market must exist in Shopify before it appears in the list. Create it in **Settings → Markets** first. * Assign each market to one menu only. If two published menus target the same market, the result on the storefront is not predictable. {% endhint %} # Translate your menu If your store sells in more than one language, translate the menu so each customer sees it in their own language. Translations are stored per menu, so every menu has its own set. {% stepper %} {% step %} ## Open Translations Open **Translations** in the app navigation. You can also reach the same screen from the "..." of a menu on the **Menus** page with **Translate**, or from the **Translate menu** icon in the editor's left icon bar.

{% endstep %} {% step %} ## Choose the menu Click "Translation" on the menu you want to translate. {% endstep %} {% step %} ## Pick the language Open the "..." button at the top right and pick the language you are translating into. The language you are currently editing is shown in bold.

{% endstep %} {% step %} ## Translate the texts On the **Texts** tab, fill in the translation for each menu item title and description. The original text is the label above each field, so you always see what you are translating.

{% endstep %} {% step %} ## Translate the links Switch to the **Links** tab to point items at the localised URL for that language.

{% endstep %} {% step %} ## Swap images per language Switch to the **Images** tab if a language needs different images — for example a banner with text baked into it.

{% endstep %} {% step %} ## Save the translation Click "Save", then repeat steps 3–6 for every other language. {% endstep %} {% step %} ## Check the menu on your storefront Open your storefront, switch the language and check the menu. {% endstep %} {% endstepper %} {% hint style="info" %} **Good to know** * The languages offered come from your store's languages in **Shopify Settings → Languages**. Publish a language there first and it appears in the picker. * Leave a field empty and the menu falls back to the original text for that item. You do not have to translate everything at once. * **App Interface Language** in **Settings** changes the language of the app's admin interface only. It does not affect what your customers see. * Translations are part of the menu data: they are included when you [export a menu](broken://pages/2061ecf83a1bb091ed661cf62363bc63d0c22eb6), and the **Override translation** option decides whether an import replaces them. {% endhint %} # Plans and billing Where to see your current plan, upgrade, downgrade and stop paying for the app. {% stepper %} {% step %} ## Open Subscriptions Open **Subscriptions** in the app navigation. {% endstep %} {% step %} ## Choose a billing period Choose the billing period at the top right: **Monthly**, or **Annual** to save 17%. The prices on the cards update with your choice.

{% endstep %} {% step %} ## Compare the plans Every plan lists what it includes, and the plan you are on is marked **Your current plan**. * **Free** — mega menu, tree menu, products and images in the menu, menu animation, menu on mobile. * **Premium** — everything in Free, plus tab menu, custom HTML, contact form, image upload and effects, bubbles, multiple languages, multiple menus, show/hide items per market or per page, scheduled visibility, hide out-of-stock products, multi-layer mobile menu, separate mobile design. * **VIP** — everything in Premium, plus products from a collection, filter collection with tags, product slider, image slider, multi-menu design, publishing schedule and CTR menu analytics. {% endstep %} {% step %} ## Apply a discount code If you have a discount code, enter it in **Discount code** and click "Apply" before selecting a plan.

{% endstep %} {% step %} ## Select a plan Click "Select" on the plan you want. {% endstep %} {% step %} ## Approve the charge in Shopify Shopify shows the approval screen for the recurring charge. Confirm it to activate the plan — the charge is handled by Shopify and appears on your Shopify invoice. {% endstep %} {% step %} ## Confirm the new plan is active You are returned to the app and the new plan is now marked **Your current plan**. {% endstep %} {% endstepper %} ## Change or cancel a plan * **Upgrade or downgrade** — come back to this page and select another plan. Shopify prorates the difference for you. * **Cancel a paid plan** — select the **Free** plan. The paid subscription stops and the app keeps working with the free features. Uninstalling the app also cancels the subscription. {% hint style="info" %} **Good to know** * Paid plans start with a **14-day free trial**. You are not charged during the trial. * Annual subscriptions are covered by a **30-day money-back guarantee**. * Downgrading does not delete anything. Menus that use features above your new plan simply stop rendering those parts until you upgrade again. * Billing questions that this page does not answer: use the live chat in the app. {% endhint %}