# Step 2: Publish Shopify

### Step 2: Publish the menu on your website.

#### **I) METHOD 1: INSERT (BEFORE OR AFTER) THIS MENU AT A SPECIFIC LOCATION ON YOUR WEBSITE, OR REPLACE AN EXISTING MENU, USING A CSS SELECTOR. (**RECOMMENDED)

#### I.1. Turn on Navi+ on App Embeds

Step 1: Click Online Store, then click Themes. Tips: Right-click on Online Store and select “Open Link in New Tab” to save time.

Step 2: Select the theme where you want to publish the menu.

Click: **Customize**

* If your website is new and has no users yet, feel free to publish the menu without worry—you can easily turn it on or off at any time without affecting visitors.
* If your website already has regular traffic, be more careful. The best practice is to create a **duplicate Theme** and test Navi+ on that version first.

<figure><img src="/files/EIZU8eCs1oLL0bqCcMZO" alt=""><figcaption></figcaption></figure>

Step 3: Go to App embeds, find “Navi+ on All pages”, and turn it on.

<figure><img src="/files/3xM2w1RqgpoOje6t5dn0" alt=""><figcaption></figcaption></figure>

Step 4: Don’t forget to click “Save” to apply the changes.

After these 4 steps, Navi+ has been installed on your website and is ready to display. However, the process is not yet complete. Go back to the Navi+ app tab to actually turn on **Publish Menu**.

#### I.2. Select display settings and publish the menu.

Step 1: Click the **Publish to website** button.

<figure><img src="/files/7pLEYkqLyXO98F9QiMpa" alt=""><figcaption></figcaption></figure>

Step 2: Turn on toggle "Publish menu by Insert/Replace method".

<figure><img src="/files/TrlUNN2Lg23RzREOrOts" alt=""><figcaption></figcaption></figure>

Step 3: Select the correct CSS Selector and replace/insert method

In this guide, we’ll focus on 2 ways: inserting this menu below the header or replacing the default Mega Menu. You can also use this method creatively by finding and applying other CSS selectors to trigger the menu.

<details>

<summary>How to insert this menu below the header of website<strong>?</strong></summary>

<figure><img src="/files/my2GuCWAqDD2oFBceQWW" alt=""><figcaption></figcaption></figure>

To do this, simply identify the CSS selector of your website’s header enter it into the textbox. We’ve already found the CSS selectors for some of the most popular themes for you, listed below.

1. CSS selectors for some popular, free themes.. from Shopify as Dawn, Sense, Savor, Horizon..

```
header
```

2. Not in this list, don't worry

```
- You can chat with a Navi+ supporter for instant help—this only takes a few minutes to find the CSS selector.

- Or, you can follow the self-help guide in next topics (Right after this topic).

```

</details>

<details>

<summary>How to replace the default Mega Menu?</summary>

On mobile, there’s no Mega Menu to replace, so this method is usually not feasible

</details>

<details>

<summary><strong>How to find the CSS selector on your website?</strong></summary>

You can chat with a Navi+ supporter to get instant help instead of doing it yourself.\
However, (1) this will help you understand the core idea, and (2) if you want to do it on your own, follow the instructions below.

{md}<https://help.shopifas.com/manual/internal/what-is/common/how-to-find-css-selector.md{endmd}>

</details>

#### **II) METHOD 2: ADD THIS MENU AS A SECTION/BLOCK IN THE SHOPIFY THEME**

This method inserts the menu by adding a Block/Section in your Shopify theme. It’s a traditional approach, so I won’t describe it in detail. With this method, you don’t even need to **“Turn on Navi+ in App Embeds”** as required in Step 1 of Method 1.

Copy Embed ID of this menu, then insert to block named "Navi+ on Section" on Theme Sections. You can add a title, set up full width, and adjust the margin for this section after adding it.

<figure><img src="/files/G641ynAnGh6xB39wJ1vt" alt=""><figcaption></figcaption></figure>

<details>

<summary>Guide to add this menu as a section/block in the Shopify theme</summary>

{md}<https://help.shopifas.com/manual/internal/what-is/common/how-to-add-this-menu-as-a-section-block-in-the-shopify-theme.md{endmd}>

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.shopifas.com/manual/internal/what-is/mega-mobile/step-2-publish-shopify.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.