How to Add Promotional Links to Shopify Navigation (2026)

Key takeaways

• Add the promotional link via Online Store > Navigation > add menu item.
• Some themes support native highlight styles for nav items - check Theme Editor > Header.
• For custom colours, bold text, or a badge, you need CSS targeting that specific nav item.
• Fudge can style any navigation link the way you describe without you writing code.

A “Sale” or “New” link in the header navigation - especially in a contrasting colour like red - consistently drives clicks. Here’s how to add it and make it stand out.

Why you can trust us

We’ve built and customised hundreds of Shopify storefronts. We also built Fudge - an AI storefront editor with a 5.0 rating on the Shopify App Store.

Step 1 - Add the menu item

Step 1. Go to Online Store > Navigation > click Main menu.

Step 2. Click Add menu item.

Step 3. Set the Name to whatever you want displayed in the nav - “Sale”, “New In”, “Offers”, “Limited Edition”, etc.

Step 4. Set the Link to the destination - typically a collection: click the link field and search for your sale collection, or type the path manually (e.g., /collections/sale).

Step 5. Click Add, then Save menu.

The item now appears in your navigation. By default, it looks identical to all other nav items. The next step is making it stand out.

Step 2 - Style the promotional link

Check if your theme supports it natively

Some Shopify themes include a built-in option to highlight a specific navigation item. Before writing any code, check:

Online Store > Themes > Customize > Header

Look for settings like:

• “Highlight menu item” - enter the menu item label to highlight
• “Accent navigation link” - pick a link to display differently
• Per-item colour pickers in the nav settings

Themes like Impulse, Prestige, and Broadcast often include this. If your theme has it, use it - it’s the cleanest implementation.

Option 2 - CSS targeting

If your theme doesn’t have a built-in highlight option, you can target the nav item using CSS. The selector depends on how your theme renders the navigation, but a common approach is targeting by the link’s href attribute:

a[href="/collections/sale"] {
  color: #e00;
  font-weight: 700;
}

This can be added to your theme’s CSS file (Online Store > Themes > Edit code > assets/base.css or similar) or via a <style> tag in a custom liquid snippet.

You can describe this to Fudge: “Make the ‘Sale’ item in the main navigation appear in red text.” Fudge identifies the correct selector for your specific theme and applies the styling.

Adding a badge to a navigation item

A small badge (a coloured pill or dot overlaid on the nav item) is a stronger visual signal than colour alone. This requires a small HTML and CSS change to your header template.

Approaches:

• Use a CSS ::after pseudo-element to add the badge without changing the HTML
• Or add a <span> element inside the nav item’s anchor tag with a class for styling

This is a common request. Describe it to Fudge: “Add a small red ‘NEW’ badge to the ‘New Arrivals’ item in the main navigation.”

Seasonal promotional links

Many stores use promotional nav links for limited periods - a “Black Friday” link during November, a “Summer Sale” link in July. A good practice is to:

1. Create the collection in advance
2. Add the nav item when the sale goes live
3. Remove it after the sale ends (Online Store > Navigation > delete the item > Save)

Some stores use a separate “promotional” menu that’s toggled on/off via the Theme Editor settings during campaign periods. Ask your developer to set this up once, and future campaigns just need a menu swap.

Animated or blinking nav links

Some stores go further and add a subtle animation to the promotional nav link - a gentle pulse, a blinking dot, or a colour transition - to draw extra attention.

This is achievable with CSS keyframe animations. Describe the exact effect you want to Fudge: “Make the ‘Sale’ nav link pulse gently between white and red text every 2 seconds.”