# How to add a mega menu (Products)

**The appearance of the mega menu** (<mark style="color:blue;">**Products**</mark>)

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FKzbohROJWaonNw8RIkv0%2Fproduct-mega-menu-1.png?alt=media&#x26;token=b7553bdd-bdb7-41f6-9636-18ec9cb2b988" alt=""><figcaption></figcaption></figure>

* **Go to the Customizer**
* Click on the **Add block** inside the Header
* Add the "**Mega menu (Products)**" block

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FfHul9vLV2Ek5MpSZfhTv%2Fblock-product.png?alt=media&#x26;token=6942996f-82ff-4de6-8340-8245c15ce819" alt=""><figcaption></figcaption></figure>

* Copy the name of the **menu item** to which you want to add a mega menu.

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FhQgWgPTubP4vbUiMJ5Qq%2Fproduct-mega-menu-2.png?alt=media&#x26;token=4efc1bfb-bb10-497d-af1e-94a5a1ac3f83" alt=""><figcaption></figcaption></figure>

## Block settings

<div><figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2Fp8ndUe7l6KejY5Yltw3d%2Fproduct-block-1.png?alt=media&#x26;token=7ee667d7-1ad5-429b-8275-f522b173d9dc" alt=""><figcaption></figcaption></figure> <figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FfBhH2lF2j4mqFhvobfhh%2Fproduct-block-2.png?alt=media&#x26;token=6cd78283-6c41-42ea-bce9-21c22176e92b" alt=""><figcaption></figcaption></figure></div>

| Settings      | Description                                                           |
| ------------- | --------------------------------------------------------------------- |
| **Menu item** | Enter the name of the menu item to which you want to add a mega menu. |
| **Products**  | Select the products you want to display in the Mega Menu              |
| **Heading**   | You can add a heading to the product column                           |

## Layout settings

| Settings                         | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Enable slider**                | You can display product slider or grid.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| **Product column width**         | <ul><li><strong>One-third width of a column (</strong>If you want to display the product width at one-third, then you should select it<strong>). By default, it is selected</strong></li><li><strong>Half width of column(</strong>If you want to display half-width mega menu items and half-width products, then you should select it<strong>)</strong></li><li><strong>Full width of column (</strong>If you want to display only products in full width without mega menu items, then you should select it<strong>)</strong></li></ul> |
| **Number of columns on desktop** | There is an option to control the product column for the desktop device.                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| **Number of columns on laptop**  | There is an option to control the product column for the laptop device.                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |

## **Product column width**

{% tabs %}
{% tab title="One-third" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FX7oKq26MJPgWk4ioP4DZ%2Fone-third-product.png?alt=media&#x26;token=4aef613e-2c39-434c-b091-1e777cca53a7" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Half width" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FkaLMzkTPfz8BhclT6uYs%2Fproduct-block-1.png?alt=media&#x26;token=3b322609-b885-467e-ad4e-ea693eca7e09" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Full width" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FOhEAWKPye5PLvY9iSOo1%2Ffull-width-product.png?alt=media&#x26;token=715cbcb9-470a-4c2a-9423-0efe3a47ed23" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Product card settings

| Settings                                       | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Image ratio**                                | <ul><li><strong>Adapt to image:</strong> Uses the aspect ratio of the collection images is cropped.</li><li><strong>Portrait</strong>: uses a 2:3 cropping ratio to the images.</li><li><strong>Square:</strong> uses a 1:1 cropping ratio to the images.</li><li><strong>Landscape:</strong>  uses a 3:2 cropping ratio to the images.<br></li></ul>                                                                                                                                                                                                                                                                                                                                                                    |
| **Show second image on hover**                 | Shows the second product image when a customer moves their mouse over the first image.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| **Show badges**                                | For particular sections, you can show or hide product badges.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| **Show title**                                 | For particular sections, you can show or hide the **title.**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| **Show price**                                 | For particular sections, you can show or hide the **wishlist price.**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| **Show vendor**                                | For particular sections, you can show or hide the **wishlist vendor.**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| **Show product rating**                        | You can display show/hide product ratings for specific sections.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| **Enable quick add button**                    | For particular sections, you can show or hide the **cart button**.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| **Quick add button display**                   | <ul><li>Static</li><li>Hover</li></ul><p><em><strong>Always static on mobile</strong></em></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| **Quick add button style**                     | <ul><li>Icon button</li><li>Text button</li><li>Text with icon button</li></ul><p><em><strong>Except for the "Icon button", all buttons are always displayed below the product card on mobile</strong></em><br><br><a href="#quick-add-button-style-on-the-product-card"><strong>See more of the display</strong></a></p>                                                                                                                                                                                                                                                                                                                                                                                                |
| **Make button full width**                     | <p><strong>You can display the "Cart button" in full width.</strong><br></p><p><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2F8MArVZtYYbVOZpHcw3dk%2Fcart-full-width.png?alt=media&#x26;token=c3a569b1-f66f-4393-b11e-efa48f4f9e8a" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                  |
| **Show "quick add button" below product card** | <p>Enabling this option will make the "quick add button" always static and occupy full width.</p><p><br><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2F9Ag3qw178VACrSgj5yqh%2Fbelow-cart.png?alt=media&#x26;token=07971126-85cb-48a0-80a0-0dafdba82670" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                              |
| **"Quick add button" position on desktop**     | <p>You can change the "Quick add button" position on the "Product card" -</p><ul><li>Top left</li><li>Top center</li><li>Top right</li><li>Middle left</li><li>Middle center</li><li>Middle right</li><li>Bottom left</li><li>Bottom center</li><li>Bottom right</li></ul><p><em><strong>It works, unless you enable the option "Show quick add button below product card"</strong></em></p><p><br><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FCpRWzRAlKoHAcDvX21JJ%2Fbutton-position.png?alt=media&#x26;token=9fb7e22f-a461-481c-babd-68e4042f09ff" alt="" data-size="original"></p>                                              |
| **Show pre-order button**                      | You may want to allow customers to purchase out-of-stock items. [**Learn more**](https://themihub.gitbook.io/vector-shopify-theme/general-topics-faq/how-to-enable-the-pre-order-product-to-your-store)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| **Show countdown**                             | To display the countdown timer, you need to enable it. [**Learn more**](https://themihub.gitbook.io/vector-test-theme/collections-and-products/products/add-a-countdown-timer-to-the-product)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| **Enable color swatches**                      | To display color swatches, you need to enable it. [**Learn more**](https://themihub.gitbook.io/vector-test-theme/theme-settings/color-swatches)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| **Show marquee**                               | To display the marquee, you need to enable it. [**Learn more**](https://themihub.gitbook.io/vector-test-theme/collections-and-products/products/show-a-marquee-badge-to-your-product)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| **Marquee display**                            | <ul><li>Always static</li><li>Hide on hover</li></ul><p><em><strong>Always static on mobile</strong></em><br><br>You must follow the instructions to display the marquee on the product card. <a href="../../collections-and-products/products/show-a-marquee-badge-to-your-product"><strong>Learn more</strong></a></p>                                                                                                                                                                                                                                                                                                                                                                                                 |
|                                                |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| **Round corner**                               | You can enable/disable the round corner of the product card                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
| **Card spacing**                               | You can add padding inside of the product card by enabling this setting.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| **Product card color scheme**                  | <p>You can add a color scheme to the product card.</p><p><br><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FWiLtLvPkrp8FlFQi3MF6%2Fcard-color-scheme.png?alt=media&#x26;token=c723dd9d-a170-4df8-8ec5-55636ee6e8d3" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                  |
| **Inventory status**                           | <p>You can enable or disable it. <br><br><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2F8MZscf3k7DCbEBbFQT1i%2Fineventory.png?alt=media&#x26;token=ab636969-f743-40b7-a850-9e262fb1f9a3" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                                                                                                             |
| **Low inventory threshold**                    | <p>You can show a " low inventory stock" message for your customer. <strong>Just add a low inventory threshold</strong><br><br><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FLJNfdj9Ie5CWpNO4F5PH%2Flow-stock-message.png?alt=media&#x26;token=a37ff923-4b28-4326-8a57-c43d74dd328a" alt="" data-size="original"></p>                                                                                                                                                                                                                                                                                                                |
| **Show inventory count**                       | <p>You can show/hide inventory stock count numbers. </p><p><br><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FHIm4rgo3oDHnImpnWKjc%2Fno-count.png?alt=media&#x26;token=4c77b454-19a3-4ef7-a421-bca49bd997cb" alt="" data-size="original"><br></p>                                                                                                                                                                                                                                                                                                                                                                                     |
| **Show always status**                         | <ul><li>You can always show the inventory status for all the product cards.<br></li><li>If you disable the option, the inventory status will be displayed based on the quantity of the specific product inventory.</li></ul>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| **Minimum number of quantity**                 | <p>You can set "<strong>Minimum number of quantity</strong>" to show inventory status.</p><p></p><p><strong>It works until you enable "Show always "</strong></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| **Color settings**                             | <p></p><p>You can add color to different statuses of inventory stock.</p><ul><li><strong>In stock</strong></li><li><strong>Out of stock</strong></li><li><strong>Low stock</strong></li><li><strong>Continue selling</strong> (<em>You may want to allow customers to purchase out-of-stock items.</em> <a href="../../general-topics-faq/how-to-enable-the-pre-order-product-to-your-store"><strong>Learn more</strong></a> )<br><br><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2Fj2gkslwxCDvEr8zzXQ59%2Fcolors_stock_status.png?alt=media&#x26;token=e8c3b08c-5b77-4ef6-afcb-64f7b530c14f" alt="" data-size="original"></li></ul> |
|                                                |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |

### **Quick add button style on the product card**

{% tabs %}
{% tab title="Text with icon button" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FsSQk3pjUr5HP8lL0pWfo%2Ftext-with-cart-icon-button.png?alt=media&#x26;token=0db67826-b9fb-4dc1-a57b-3226af4a6232" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Icon button" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FuENepTzf8qtK4XQoKVV4%2Ficon-cart-burtton.png?alt=media&#x26;token=a9d618b5-5dbf-4051-94e0-8844d5475538" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Text button" %}

<figure><img src="https://3066755919-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbMGVnCsdnFPDX2dCTNWk%2Fuploads%2FuJWOxGojX8g3AaYAsXAl%2Ftext-button.png?alt=media&#x26;token=c4660ae8-2e08-49b8-a480-8cbda51f78ff" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}
