Shopify Horizon Theme: Adding a 'Get A Quote' Button Right Next to Your Navigation (Community Guide)

Hey everyone! As a Shopify expert who spends a lot of time diving into the community forums, I often come across discussions that really hit home for store owners. Recently, there was a great thread started by Majdeline_M about adding a 'Get A Quote' button to the Horizon theme, specifically right next to the navigation menu.

It's a common need, especially for businesses that offer custom products, services, or B2B sales where a standard 'Add to Cart' just doesn't cut it. But getting that button exactly where you want it – not just tucked away in an announcement bar – can be a bit tricky. Let's break down what the community had to say and how you can achieve this on your own store.

The Challenge: Button Placement in Horizon Theme

Majdeline_M's core question was clear: how to place a 'Get A Quote' button directly within the menu section of the header, rather than as a separate block that might appear in a less prominent spot. As Majdeline_M put it, "I am aware that you can add a block to the header section, but I want the button to be next to the menu." This is a crucial distinction, and it's where the standard theme settings often fall short.

Our fellow community member, devcoders, initially asked for a screenshot to clarify the desired placement, which is always a smart first step. Here's the kind of default menu placement that devcoders showed, which wasn't quite what Majdeline_M was after:

This illustrates the common issue: theme settings often place custom elements in pre-defined areas, not necessarily inline with the main navigation.

Community Solutions: Going Beyond Basic Settings

The community quickly rallied with some solid advice. The consensus was that for precise placement like this, you'll likely need to dip your toes into the theme's code – specifically the Liquid files that control your header.

Option 1: The Theme Settings Approach (with a caveat)

xixify kicked things off by outlining a few options, starting with the easiest: checking theme settings. Many themes have a "Custom Links" or "Menu Links" setting under Online Store → Customize → Header Section → Menu. If your theme supports it, you might be able to add a button-style link here. However, as Joshetech wisely pointed out, "the block approach in the header settings won’t give you the placement you’re after, it usually drops it in the utility bar or announcement area, not right next to the nav links." So, while it's worth a look, don't be surprised if it doesn't give you the exact inline placement you're after.

Option 2: Direct Liquid File Editing (The Most Control)

This is where you get the most granular control. Both Joshetech and eva_greene elaborated on editing the header section’s Liquid file. This involves finding where your navigation menu is rendered and inserting your button's HTML directly there.

Here’s how you can approach it, combining the best advice from the thread:

  1. Backup Your Theme: Before making any code changes, seriously, duplicate your theme! Go to Online Store → Themes, find your current theme, click Actions → Duplicate. This is your safety net.
  2. Locate the Header File: Navigate to Online Store → Themes → Actions → Edit Code. You'll typically be looking for header.liquid or sections/header.liquid. Some themes might have a slightly different structure, but these are the most common places for header-related code.
  3. Find the Navigation Code: Within that file, search for where your main navigation menu is rendered. You'll likely see a

Option 3: Link to a Shopify Form App

xixify also reminded us that if you don't have a "Get A Quote" page set up, you can easily create one and embed a form using a free app like Inquiry Form or Contact Form from the Shopify App Store. This is a great way to manage your quote requests without needing to build a custom form from scratch.

A Few Final Thoughts

As eva_greene rightly pointed out, "If unfamiliar with code, consider a developer for safe edits." While these steps are generally straightforward, working directly with Liquid and CSS can sometimes be intimidating. If you're not comfortable, or if your theme has a particularly complex structure (as Joshetech mentioned, some themes with compiled/minified Liquid can be trickier), bringing in a Shopify expert is always a smart move to ensure everything works flawlessly and your site remains stable.

Ultimately, getting that 'Get A Quote' button perfectly placed can significantly improve your user experience and conversion rates for specific types of products or services. By leveraging insights from the community, we can see that a direct code edit combined with careful CSS styling is often the most effective path to achieving that ideal inline placement in themes like Horizon. Happy customizing!

Share:

Start with the tools

Explore migration tools

See options, compare methods, and pick the path that fits your store.

Explore migration tools