Sale Navigation Menu Setup Guide

A sale menu helps shoppers reach the discounted products that interest them. This setup groups sale destinations by product type. Use KOBU to show those links and any accurate badge wording, then verify the prices and collection contents in Shopify before the campaign goes live.

Setup tutorial · KOBU · Updated 2026-09-07 · By Activory

Try the storefront example

Select a menu item to inspect its destination. Use Phone width to check the labels and layout. The example paths represent collections or pages you will create in your store.

This example uses KOBU storefront code with sample data and the settings below. Your theme’s fonts and available width can change the result. Example links show their destination; purchase controls use a sample cart. Use the checks below to confirm the finished setup in your store.

Build it in KOBU

1. Create the destination collections or pages in Shopify. Use the labels and paths below as your example plan. Confirm that each destination is published.
2. In KOBU, add each menu item to Group 1. Enter its title and destination. Add an SVG icon or your own image. Publish the items.
3. Open the page template in the Shopify theme editor. Add Kobu - Menu Highlight. Choose menu group 1 and the Circle shape.
4. Set Menu mode to Rows & Columns. Use 80 px width, 80 px height, 16 px gap, and 14 px label text. Keep the title visible. Save the theme.

Example settings

• The example uses blue SVG icons on a pale background. Use the same icon style for each item, or replace all icons with consistently framed product images.

Sample data and content

Use these values for a test. Replace them with checked product data, published destinations, and offers that your store can supply.

When is a sale label accurate for a collection?

A sale badge is a claim about the destination. Use it only when the linked products support the message. Keep markdowns, clearance, and bundle offers distinct if their terms differ. A percentage claim needs a defined scope and current price evidence, not just an attractive label.

1. Build the sale collections and compare their inclusion rules with the actual promotional prices.
2. Create a KOBU menu with accurate labels. Keep any percentage or time claim within the offer’s real scope.
3. Check the menu on mobile and confirm that the sale treatment remains readable beside standard navigation.
4. Create an end-of-sale review task in your operating process so badges and collections are updated together.

Read the KOBU setup guide for the full app controls and placement options.

Check the finished setup

• Open a product from each sale destination and verify the price and selected variant.
• Check a sold-out sale collection and remove the menu route if it no longer helps customers.
• Confirm that an expired discount code is not still promised by the menu label.

Common mistakes

• Do not assume a badge creates a discount or changes a product’s price.
• Do not call a broad mixed-price collection a sale-only destination.

Supported use

KOBU links shoppers to the destinations you configure. A menu label does not create a collection, apply a discount, reserve stock, or make a product suitable for a customer. Confirm each destination and its contents. Keep text labels visible so that images are not the only way to understand a link.

KOBU features, current app plans, and KOBU collection display rules explain the supported setup.

Related tutorials

• Seasonal Collection Menu Setup Guide
• Mobile Navigation Menu Setup Guide
• Collection Circle Menu Setup Guide

Browse all KOBU tutorials. Read how the examples are made or report a correction.