Solved

Add Call to action button or link to fill space in header - Dawn Theme

KateD199
Tourist
11 0 0

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?

 

header.png

Accepted Solution (1)

TerenceKEANE
Shopify Partner
511 86 78

This is an accepted solution.

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>

 

 

 

shopify.head.jpg

 

 

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;
  }
}

 

 

 

TerenceKEANE_0-1716448916145.png

 

 

Terence

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

View solution in original post

Replies 11 (11)

AnneLuo
Shopify Partner
616 125 127

Hi, @KateD199 

I can help you with it. So I need to access your store as a collaborator if possible. 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

sophy2
Shopify Partner
2 0 1

Yeah sure, am once in your shoes but a Shopify professional helped me out so I would suggest you to have one and if you're finding it difficult in getting one, I can help you ask the one that helped me if he's available how about tha? Cool?

Sophy
KateD199
Tourist
11 0 0

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.

 

KateD199_0-1716434813016.png

 

TerenceKEANE
Shopify Partner
511 86 78

This is an accepted solution.

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>

 

 

 

shopify.head.jpg

 

 

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;
  }
}

 

 

 

TerenceKEANE_0-1716448916145.png

 

 

Terence

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
KateD199
Tourist
11 0 0

You're amazing, this worked like a charm!! Thanks so much!

KateD199
Tourist
11 0 0

The only thing is it still appears on mobile view, is there a way to change this? Thanks!

TerenceKEANE
Shopify Partner
511 86 78

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?

 

TerenceKEANE_0-1716539604413.png

 

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
KateD199
Tourist
11 0 0

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!

 

KateD199_0-1716936175100.png

 

TerenceKEANE
Shopify Partner
511 86 78

I think I'm confused.  🙂 Will this button be visible on mobile as well, or only on the desktop version?

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites
KateD199
Tourist
11 0 0

I just wanted it to be visible on desktop - which it is, just for some reason when I click mobile view when customizing the theme on shopify is still shows, but on actual mobile it doesnt come up. So it works perfectly - thank you again! 🙂

TerenceKEANE
Shopify Partner
511 86 78

You are welcome.. It was just a small thing for me. 🙂

 

I'm not sure what level of assistance you're looking for here, but if you're seeking affordable, monthly, or long-term advanced help, we can also offer you the 'Shopify Premium Support' service that we provide to many others here. Our service is not hourly or per project, it's monthly. You can request as much assistance as you need.  We can customize your theme according to your requirements.

 

There is no limit as a support request!

 

Generally, we provide superficial assistance here. The detailed help is provided to our clients through 'Premium Support.'

 

If you have an e-commerce store or website, working with someone who can provide continuous assistance will always be better for you.

 

In addition to quick solutions, we provide:

  • Fast Turnaround
  • Dedicated Advanced Front-End Coding Assistance with CSS and Javascript
  • Animated Coding Support
  • Free Advanced Apps ( 9 Apps)
  • Comprehensive On-Site and Off-Site SEO Reports ( and competitors' advertising keywords)
  • Expert Consulting
  • Unique Mobile Premium Features
  • Design and Frontend Management
  • Free Business Email

and much more...

 

Maybe you're tired of constantly seeking help here, so I wanted to write this. Assistance on the Shopify community is usually quite superficial.

 

If you're interested, you can check out the link in my signature. Feel free to reach out via private message or email if you have any questions. 🙏

 

Terence...

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
If my support was a lifeline for you, The COFFEE  
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites