Add Call to action button or link to fill space in header - Dawn Theme
Hello, I am wanting to fill this white space in our header with something like a contact CTA button or move the search bar across to the middle here. I'm not sure how to do this, please advise?
I am using Dawn theme version 14. Website is not live yet, link is:
https://5b1cfb-2.myshopify.com/
password is Blues2020
I also want to change the white background for the search bar to light blue if possible?
Hi,
The following code snippets should do the trick. The button only works on resolutions above 1200. If you encounter any issues again, feel free to write, I'll help.
1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.
2) Paste the following code below the '<head>' tag. Please refer to the attached screenshot for guidance.
Note: you can change the button link and text from the following location.
<script>
window.onload = function() {
if (window.innerWidth >= 1200) {
var ctoButton = document.createElement("a");
ctoButton.href = "https://novajetsoft.com/premium/";
ctoButton.textContent = "Call To Action";
ctoButton.className = "cto-button";
ctoButton.style.position = "absolute";
ctoButton.style.left = "50%";
ctoButton.style.top = "11%";
ctoButton.style.transform = "translate(-50%, -35%)";
ctoButton.style.background = "#154770";
ctoButton.style.padding = "1px 20px";
ctoButton.style.color = "white";
ctoButton.style.borderRadius = "10px";
ctoButton.style.textDecoration = "unset";
ctoButton.style.outline = "3px solid #15477091";
var announcementBar = document.querySelector("div#shopify-section-sections--17716337541364__announcement_bar_zemeGH");
var firstChild = announcementBar.firstChild;
if (firstChild) {
announcementBar.insertBefore(ctoButton, firstChild.nextSibling);
} else {
announcementBar.appendChild(ctoButton);
}
}
};
</script>
Navigate to the 'Edit Code' option in your theme settings, then search for “base.css” in the search bar and add below codes.
input.search__input.field__input {
background: #154770;
}
input.search__input.field__input + .field__label {
color: white;
}
button.search__button.field__button {
color: white;
}
@media (max-width: 1200px){
.cto-button{
display: none!important;
}
}
Terence
Thank you so much for this, only I don't have the sections/settings you're talking about!
I only have the below sections and when I click on the header section the only things I can change there are the desktop menu position, what menu to use and what type, mobile layout for logo and then language and region selectors.
Hi,
The following code snippets should do the trick. The button only works on resolutions above 1200. If you encounter any issues again, feel free to write, I'll help.
1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.
2) Paste the following code below the '<head>' tag. Please refer to the attached screenshot for guidance.
Note: you can change the button link and text from the following location.
<script>
window.onload = function() {
if (window.innerWidth >= 1200) {
var ctoButton = document.createElement("a");
ctoButton.href = "https://novajetsoft.com/premium/";
ctoButton.textContent = "Call To Action";
ctoButton.className = "cto-button";
ctoButton.style.position = "absolute";
ctoButton.style.left = "50%";
ctoButton.style.top = "11%";
ctoButton.style.transform = "translate(-50%, -35%)";
ctoButton.style.background = "#154770";
ctoButton.style.padding = "1px 20px";
ctoButton.style.color = "white";
ctoButton.style.borderRadius = "10px";
ctoButton.style.textDecoration = "unset";
ctoButton.style.outline = "3px solid #15477091";
var announcementBar = document.querySelector("div#shopify-section-sections--17716337541364__announcement_bar_zemeGH");
var firstChild = announcementBar.firstChild;
if (firstChild) {
announcementBar.insertBefore(ctoButton, firstChild.nextSibling);
} else {
announcementBar.appendChild(ctoButton);
}
}
};
</script>
Navigate to the 'Edit Code' option in your theme settings, then search for “base.css” in the search bar and add below codes.
input.search__input.field__input {
background: #154770;
}
input.search__input.field__input + .field__label {
color: white;
}
button.search__button.field__button {
color: white;
}
@media (max-width: 1200px){
.cto-button{
display: none!important;
}
}
Terence
You're welcome, Kate 🙂
The code I wrote always works. Adding a button without editing JS or HTML is difficult. In the screenshot below, the button does not appear on mobile. What phone are you viewing it on exactly?
Ah ok my apologies - I didn't test it on an actual phone just in the mobile view on shopify and it still shows up so I just assumed (as screenshot below). I checked on my mobile and its not coming up so thats great, thanks so much again!
Community Blog Articles
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025
Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025