In this blog post, we’ll walk you through how to add a clickable button to the header menu of your Shopify website. This guide has been tested using the Shopify Horizon theme, although the approach may be adaptable to other themes with similar structures.
Placing a prominent call-to-action (CTA) in your header can be incredibly effective—particularly if you offer services rather than run a traditional eCommerce store. Whether it's a “Book Now”, “Contact Us”, or “Get a Quote” button, making this action clearly visible can drastically improve your conversion rate.
We often see websites where such actions are buried behind dropdowns or several clicks away. Over time, this small oversight can result in lost opportunities or potential clients who give up before reaching out.
Before You Begin
Before editing any code, it is essential to duplicate your theme. This acts as a backup in case anything goes wrong, allowing you to revert to the original without losing progress.
We also recommend implementing this change on a draft version of your theme. That way, you can test everything thoroughly before publishing the changes live on your storefront.
⚠️ Important Notes:
For this method to work correctly, the search icon must be turned off in the header settings.
The button will not appear on mobile by default, as it’s set to be hidden for mobile views in this implementation.
How to Add a Button to the Header Menu
Step 1: From your Shopify admin, go to: Online Store > Themes
Step 2: Duplicate your current theme. Click the three dots next to the Customise button and select Duplicate. Once duplicated, choose Edit code on the copied version.
Step 3: In the code editor, locate the file named search.liquid. You can use the search bar in the left sidebar to find it quickly.
Step 4: At the top of the search.liquid file, paste the following code. Be sure to update the href URL to the destination of your choice and customise the button text if needed. Then press save.
<a class="button button--primary hide-on-mobile" href=pages/contact>
Email Us Today
</a>
<style>
@media only screen and (max-width: 768px) {
.hide-on-mobile {
display: none;
}
}
</style>
Step 5: Preview your theme to ensure the button appears correctly in the header.
If the button appears twice, it’s likely that the default search icon is still active. To resolve this:
Online Store > Customise > Header > Toggle the "Search Icon" off > Save.
The button should now appear only once.
Troubleshooting Tips
If you’re having trouble implementing the button, here are a few common issues to double-check:
- Incomplete Code: Ensure the code is pasted exactly as shown. Missing even a single closing tag (like </style>) can cause issues such as your logo disappearing or the button failing to display.
- Menu Spacing: If your header contains several menu items, there might not be enough space for the button to display correctly. Try reducing menu items or adjusting button size.
- Previous Code Edits: If your theme has been customised in the past, existing modifications might conflict with the new code. You may need to troubleshoot by isolating conflicts or consulting with a developer.
We’ve also recorded a video walkthrough demonstrating the full process. You can watch it below:
👉 https://bit.ly/digi-creative-CTA-button
Need Help with Your Shopify Site?
We hope this technical guide has helped you improve your Shopify site’s navigation and user experience. If you’re looking for expert assistance in building or optimising your Shopify website for success, we’d be delighted to help.
📧 Email us or send us a message via WhatsApp to get started today.
Leave a comment