Link Options

Badges

To highlight some items from the total mass for the priority focusing of the buyer's attention, our theme has special badges. Badge can have any text and color.

Steps to enable

1. From your Shopify admin, go to Online Store > Navigation ↗ (opens in a new tab).
2. Click the name of the menu that includes the item.
3. In the Menu items section, click Edit beside the name of the item.
4. You need to add a pseudo elements in the end of Name field.

|badge-color:3|badge:My badge text

badge-color can be from 1 to 4 (preset colors):

• 1 - Black
• 2 - Orange
• 3 - Red
• 4 - Green

Each preset color you can change to your own in Theme Settings > Colors - Badges.

5. Click Apply changes.
6. Click Save menu.

Example from our demo

Catalog menu item.

Catalog|badge-color:3|badge:Sale

Icons

Steps to enable

1. From your Shopify admin, go to Online Store > Navigation ↗ (opens in a new tab).
2. Click the name of the menu that includes the item.
3. In the Menu items section, click Edit beside the name of the item.
4. You need to add a pseudo element in the end of Name field:

|icon:icon-code

icon-code you can get in the available icons list ↗ (opens in a new tab) or upload your ownupload your own.

Examples

Icon in 1st level of navigation

Backend

Frontend

Icon in 3rd level of nested navigation

Backend

Frontend

Default dropdown caption

Steps to enable

1. From your Shopify admin, go to Online Store > Navigation ↗ (opens in a new tab).
2. Click the name of the menu that includes the item.
3. In the Menu items section, click Edit beside the name of the item.
4. You need to add a pseudo element in the end of Name field:

|subtitle:My caption text

5. Click Apply changes.
6. Click Save menu.

Example from our demo

Pages menu item.

Pages|subtitle:Store pages

Text tooltip

Steps to enable

1. From your Shopify admin, go to Online Store > Navigation ↗ (opens in a new tab).
2. Click the name of the menu that includes the item.
3. In the Menu items section, click Edit beside the name of the item.
4. You need to add a pseudo element in the end of Name field:

|tooltip:My text tooltip

5. Click Apply changes.
6. Click Save menu.

Example from our demo

Pages > Faq menu item.

Faq|subtitle:Faq options|badge:new|badge-color:4|tooltip:has categories and search filter

Image tooltip

Steps to enable

1. From your Shopify admin, go to Online Store > Navigation ↗ (opens in a new tab).
2. Click the name of the menu that includes the item.
3. In the Menu items section, click Edit beside the name of the item.
4. You need to add a pseudo element in the end of Name field:

|preview:absolute_image_path

absolute_image_path is a path to the image that you must upload to the Shopify cdn server (from your Shopify admin, go to Settings > Files > Upload files)

5. Click Apply changes.
6. Click Save menu.

Example from our demo

Home menu item.

Nutrition|preview://cdn.shopify.com/s/files/1/1323/8419/files/skin-11-nutrition.png|padding:319|badge-color:1|badge:Dark|tooltip:Dark with contrast, Maturity and authority  /  Fitness equipment, Games store, Alcohol, Halloween Store (8 sections)|