To add a drop-down menu to your main menu, it will create a menu on your navigation page. This article will guide you through the process.
A limited portion of your header is reserved for navigation. If your links exceed the allocated width, your navigation will automatically convert into a hamburger button, which opens a slide-out menu.
This behavior isn’t entirely avoidable, but keeping the number of links in your main menu to four or five will help maintain control. To fit more links, you can:
Use a narrower font. To do this, modify the “Accent Text” under Typography in your theme customization page.
Use fewer characters for each link (e.g., change “FAQs” to “FAQ,” “Contact Us” to “Contact,” “Catalog” to “Shop,” and replace “and” with “&”).
Note:
Having too many navigation items may be a bad idea from a usability perspective. With fewer menu items, visitors’ eyes won’t scan past important options as easily. Challenge yourself to limit navigation to four or five items. Use drop-down menus if you need to provide access to more than five pages.
A common mistake is linking numerous collections directly in the main menu. A better approach is to list them under a drop-down menu (e.g., under “Shop” or “Catalog”) or group them into categories with separate drop-down menus. You can also use product tags to create subcategories.
If you must use many links in your main menu and want to disable the hamburger menu behavior, follow this customization guide. Disabling this feature is not officially supported by Shopify.
The color of your top navigation links is tied to the Text settings under Colors in your theme customization:
You can choose any color—it doesn’t have to be black or white.
Did you know?
On all pages, the text color matches your navigation links and store name (unless you use a logo). The text color is controlled by the Theme Settings > Colors > Text option.
However, on your homepage, if you use a hero slider, your navigation links (and all text on the slider) will appear either white or black, depending on whether the current slide’s text color is set to “Light” or “Dark.” This ensures readability against the slide’s background.
Light text (white) is used for dark slides.
Dark text (black) is used for light slides.
To move your navigation above the hero slider (instead of overlaying it), you’ll need to customize your theme:
From your Shopify admin, go to Online Store > Themes.
Click … on your theme, then Edit HTML/CSS.
Under Snippets, open hero.liquid and find this line:
{% assign hero_full_height = true %}
Either delete it or set hero_full_height to false.
Save the file.
When using a hero slider, your logo may become unreadable on dark slides. To fix this:
Go to Theme Customization > Header.
Check “Use inverted logo” and upload a light-colored version (ideally white).
The inverted logo will appear on slides with “Light” text.
If you don’t have a light logo, leave the option unchecked.
The slider images in the Brooklyn demo store are 1200px wide × 800px tall. For consistency, use the same dimensions for all slides.
Some cropping on the sides (mobile) or bottom (desktop) is expected. Learn more here.
This is intentional. On mobile, sliders fill the screen from edge to edge, requiring left/right cropping. On large screens, they adjust to browser width, often cropping the bottom.
Use high-resolution images (1024×1024 to 2048×2048).
Square (1:1) aspect ratio works best.
Ideally, use a flat (solid) background color around the product edges.
Match the Product Background Color in theme settings to your image’s background for seamless blending.
Go to Theme Customization > Colors and set Product Background Color to transparent.
Set a higher Compare at Price for product variants. If the discount is configured correctly, the badge will appear automatically.
Go to Online Store > Themes > Edit Languages.
Search for “Featured” and modify/delete the translation.
The grid alternates larger/smaller items based on their order (positions 1, 6, 7, 12, etc., are larger). To disable this, change Grid Style from Collage to Grid in theme settings.
Assign a featured image to the collection.
Use the collection.image template (ensure the image is wide enough to avoid stretching).
To display subcategories (e.g., product tags), enable “Show collection tags” in theme settings.
For products with one option (e.g., just size or color), sold-out variants are automatically crossed out. For multiple options (e.g., size + color), the “Add to Cart” button disables instead.
If the product description is short, selecting a variant triggers a smooth scroll to its image. For long descriptions, the image swaps instantly.
Follow this guide to add/remove payment icons.
The first image in a blog post becomes its thumbnail. To use a different image, set it in the post’s excerpt.
Add a video thumbnail to the excerpt to show it on the blog landing page.
Brooklyn is compatible with multi-currency displays. Before enabling it, edit product-grid-item.liquid to replace all instances of:
money_without_trailing_zeros
with:
money
Warning: Adding a currency switcher requires advanced customization (not officially supported).
Was this article helpful?
😊 Yes | 😕 No
How can we improve it?
Submit Feedback
The original text contained fragmented sentences and unclear phrasing. The translation has been edited for clarity and conciseness while preserving key instructions.
Placeholder links (#) should be replaced with actual URLs where applicable.
Some technical terms (e.g., Liquid code snippets) are kept in their original form.
The tone is adjusted to match Shopify’s standard help documentation style.
Apply for your exclusive plan for free