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.

To add a promotional link to Shopify navigation, add a menu item under Online Store > Navigation > Main menu, link it to your sale collection, then style it with your theme’s header highlight setting or a small CSS change. A “Sale” or “New” link in a contrasting colour such as red tends to draw clicks.

Why you can trust us

We’ve built and customised hundreds of Shopify storefronts. We also built Fudge, the AI operator for Shopify stores, with a 4.9 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 Label 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:

.header__menu-item[href='/collections/sale'] {
    color: #e00;
    font-weight: 700;
}

This selector targets Dawn’s header menu links. In other themes, prefix the selector with your theme’s header nav class, because a bare a[href='/collections/sale'] also restyles footer links and banner buttons that point to the same collection.

Add the CSS to your theme’s CSS file or a <style> tag in a custom Liquid snippet. To open the CSS file, go to Online Store > Themes, click the three-dot menu (…) next to your theme, then Edit code, and open assets/base.css or similar.

You can describe this to Fudge, the AI operator for Shopify stores, in its store editor: “Make the ‘Sale’ item in the main navigation appear in red text.” Fudge identifies the correct selector for your specific theme and drafts the styling for you to preview.

For other menu changes, see Edit Navigation Menus in Shopify.

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

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.

To give the campaign its own landing page, see Create a Promotional Page in Shopify.

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.”

FAQ