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:
- 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.
- Locate the Header File: Navigate to Online Store → Themes → Actions → Edit Code. You'll typically be looking for
header.liquidorsections/header.liquid. Some themes might have a slightly different structure, but these are the most common places for header-related code. - Find the Navigation Code: Within that file, search for where your main navigation menu is rendered. You'll likely see a
ortag that contains your menu links. Look for something that referencesmain-menuor a similar ID/class. - Insert the Button HTML: Once you've found the right spot (usually right after the closing tag of your main navigation list or a relevant ), you can drop in your button's HTML. Joshetech suggested something like this:
Get A QuoteAnd eva_greene provided a similar, slightly more styled version:
Get A QuoteI'd recommend using a class like
header__quote-buttonas eva_greene suggested, as it gives you a clean way to target it with CSS.- Create Your 'Get A Quote' Page: If you don't have one already, create a page for your quote requests. Go to Online Store → Pages → Add Page. Name it something like "Get A Quote" and add any necessary content or a contact form. The URL handle for this page will likely be
/pages/get-a-quote, which is what we used in thehrefattribute.- Style with CSS: Now for the styling! You'll want to make this link look like a button and position it correctly. Go to your theme's CSS file, often named
base.css,theme.css, orassets/theme.scss.liquid. Add CSS rules for your.header__quote-buttonclass. Here's a basic example to get you started:.header__quote-button { display: inline-block; padding: 10px 20px; background-color: #007bff; /* Your brand color */ color: #ffffff; text-decoration: none; border-radius: 5px; margin-left: 15px; /* Adjust spacing from menu */ transition: background-color 0.3s ease; } .header__quote-button:hover { background-color: #0056b3; }You'll need to adjust the
padding,background-color,color,border-radius, and especiallymargin-leftto match your theme's design and ensure it sits nicely next to your menu items. You might also need to add some flexbox properties to the parent container of your navigation and button to get the alignment just right.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!
- Create Your 'Get A Quote' Page: If you don't have one already, create a page for your quote requests. Go to Online Store → Pages → Add Page. Name it something like "Get A Quote" and add any necessary content or a contact form. The URL handle for this page will likely be
