How to add phone number and email to top header in theme "debut"

Solved
Highlighted
Explorer
60 0 7

Hello everyone, 

I already asked for help to add a phone number and email to my first shop and select the right colors. 

I had to add a code inside "timber.scss.liquid" (aswell as other codes )

On my second shop I tried to do the same but I am not able to find the "timber.scss.liquid" to paste the code. 

link for the old post: https://community.shopify.com/c/Shopify-Design/How-to-change-top-header-character-size-and-color-and...

 

have a great day

0 Likes
Highlighted

Hello @JohnWayne 

Please share your store URL and reference site URL.

So that I can check and let you know the exact solution for this.

Thanks...

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Explorer
60 0 7

@oscprofessional  mp sent

0 Likes
Highlighted
Shopify Partner
7469 1032 2593
<li class="phone" style="font-size:26px;"> <img src="URL" alt="phone"

style=“width:30px;height:30px;">

<a href="tel:8001235555"> Call Us: (800) 123-5555</a></li>

please update this code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted

Hello @JohnWayne 

As per your requirement you need to change in header.liquid then add following code for your reference and check attached screenshot.

announce-bar.jpg

<div class="announcement-bar">
<a href="/collections/all" class="announcement-bar-link announcement-bar--link">
              <span class="announcement-bar__message">Sell online with Shopify</span>
    </a>
<ul class="call_sub_menu">
            <li class="menu_list_item">
          <a href="tel:8001235555" class="site-header__icon site-header__callus" aria-describedby="a11y-external-message">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 513.64 513.64" style="enable-background:new 0 0 513.64 513.64;" xml:space="preserve"><g><g><path d="M499.66,376.96l-71.68-71.68c-25.6-25.6-69.12-15.359-79.36,17.92c-7.68,23.041-33.28,35.841-56.32,30.72 c-51.2-12.8-120.32-79.36-133.12-133.12c-7.68-23.041,7.68-48.641,30.72-56.32c33.28-10.24,43.52-53.76,17.92-79.36l-71.68-71.68 c-20.48-17.92-51.2-17.92-69.12,0l-48.64,48.64c-48.64,51.2,5.12,186.88,125.44,307.2c120.32,120.32,256,176.641,307.2,125.44 l48.64-48.64C517.581,425.6,517.581,394.88,499.66,376.96z"></path></g></g></svg>
                <span class="icon__fallback-text">8001235555</span>
              </a>
              </li>
            <li class="menu_list_item">
          <a href="mailto:info@info.com" class="site-header__icon site-header__mail" aria-describedby="a11y-external-message">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><g><path d="M10.688,95.156C80.958,154.667,204.26,259.365,240.5,292.01c4.865,4.406,10.083,6.646,15.5,6.646 c5.406,0,10.615-2.219,15.469-6.604c36.271-32.677,159.573-137.385,229.844-196.896c4.375-3.698,5.042-10.198,1.5-14.719 C494.625,69.99,482.417,64,469.333,64H42.667c-13.083,0-25.292,5.99-33.479,16.438C5.646,84.958,6.313,91.458,10.688,95.156z"></path><path d="M505.813,127.406c-3.781-1.76-8.229-1.146-11.375,1.542c-46.021,39.01-106.656,90.552-152.385,129.885 c-2.406,2.063-3.76,5.094-3.708,8.271c0.052,3.167,1.521,6.156,4,8.135c42.49,34.031,106.521,80.844,152.76,114.115 c1.844,1.333,4.031,2.01,6.229,2.01c1.667,0,3.333-0.385,4.865-1.177c3.563-1.823,5.802-5.49,5.802-9.49V137.083 C512,132.927,509.583,129.146,505.813,127.406z"></path><path d="M16.896,389.354c46.25-33.271,110.292-80.083,152.771-114.115c2.479-1.979,3.948-4.969,4-8.135 c0.052-3.177-1.302-6.208-3.708-8.271C124.229,219.5,63.583,167.958,17.563,128.948c-3.167-2.688-7.625-3.281-11.375-1.542 C2.417,129.146,0,132.927,0,137.083v243.615c0,4,2.24,7.667,5.802,9.49c1.531,0.792,3.198,1.177,4.865,1.177 C12.865,391.365,15.052,390.688,16.896,389.354z"></path><path d="M498.927,418.375c-44.656-31.948-126.917-91.51-176.021-131.365c-4-3.26-9.792-3.156-13.729,0.24 c-9.635,8.406-17.698,15.49-23.417,20.635c-17.563,15.854-41.938,15.854-59.542-0.021c-5.698-5.135-13.76-12.24-23.396-20.615 c-3.906-3.417-9.708-3.521-13.719-0.24c-48.938,39.719-131.292,99.354-176.021,131.365c-2.49,1.792-4.094,4.552-4.406,7.604 c-0.302,3.052,0.708,6.083,2.802,8.333C19.552,443.01,30.927,448,42.667,448h426.667c11.74,0,23.104-4.99,31.198-13.688 c2.083-2.24,3.104-5.271,2.802-8.323C503.021,422.938,501.417,420.167,498.927,418.375z"></path></g></g></g></svg>
            <span class="icon__fallback-text">info@info.com</span>
              </a>
            </li>    
			</ul>
			</div>

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

.announcement-bar {
	background-color: #7796a8;
	position: relative;
	width: 100%;
	display: block;
	overflow: hidden;
}
.announcement-bar--link {
	display: block;
	width: 70%;
	float: left;
	text-align: center;
}
.call_sub_menu {
	width: 25%;
	display: inline-block;
	flex-wrap: wrap-reverse;
}
.menu_list_item {
	float: left;
	width: 50%;
	top: 10px;
	position: relative;
}
.site-header__icon {
	float: left;
}
.announcement-bar .site-header__icon svg {
	vertical-align: middle;
	fill: #3d4246;
	position: relative;
	height: 20px;
	width: 20px;
	fill: #fff;
	float: left;
}
.announcement-bar .icon__fallback-text {
	display: block;
	color: #fff;
	position: relative !important;
	height: auto;
	width: auto;
	padding-left: 5px;
	display: block;
}

Hope this will work for you.
Thanks!

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Explorer
60 0 7

@oscprofessional 

do I need to delete the top_header section I created? because your solution uses the header.liquid 

0 Likes

Hello @JohnWayne 

Please share your store URL and reference site URL.

So that I can check and let you know the exact solution for this.

Thanks...

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Explorer
60 0 7

@oscprofessional  website url sent via mp

0 Likes
Highlighted
Explorer
60 0 7

update: still looking for a solution

0 Likes
Highlighted

@JohnWayne 

As per your requirement you need to change in header.liquid then add following code

<div class="announcement-bar">
<a href="/collections/all" class="announcement-bar-link announcement-bar--link">
              <p class="announcement-bar__message">Summer Sale: 40% Off and free shipping!☀️</p>
    </a>
<ul class="call_sub_menu">
            <li class="menu_list_item">
          <a href="tel:+17193127447" class="site-header__icon site-header__callus" aria-describedby="a11y-external-message">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 513.64 513.64" style="enable-background:new 0 0 513.64 513.64;" xml:space="preserve"><g><g><path d="M499.66,376.96l-71.68-71.68c-25.6-25.6-69.12-15.359-79.36,17.92c-7.68,23.041-33.28,35.841-56.32,30.72 c-51.2-12.8-120.32-79.36-133.12-133.12c-7.68-23.041,7.68-48.641,30.72-56.32c33.28-10.24,43.52-53.76,17.92-79.36l-71.68-71.68 c-20.48-17.92-51.2-17.92-69.12,0l-48.64,48.64c-48.64,51.2,5.12,186.88,125.44,307.2c120.32,120.32,256,176.641,307.2,125.44 l48.64-48.64C517.581,425.6,517.581,394.88,499.66,376.96z"></path></g></g></svg>
                <span class="icon__fallback-text">Call Us: +17193127447</span>
              </a>
              </li>
            <li class="menu_list_item">
          <a href="mailto:info@hawkfocal.com" class="site-header__icon site-header__mail" aria-describedby="a11y-external-message">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"><g><g><g><path d="M10.688,95.156C80.958,154.667,204.26,259.365,240.5,292.01c4.865,4.406,10.083,6.646,15.5,6.646 c5.406,0,10.615-2.219,15.469-6.604c36.271-32.677,159.573-137.385,229.844-196.896c4.375-3.698,5.042-10.198,1.5-14.719 C494.625,69.99,482.417,64,469.333,64H42.667c-13.083,0-25.292,5.99-33.479,16.438C5.646,84.958,6.313,91.458,10.688,95.156z"></path><path d="M505.813,127.406c-3.781-1.76-8.229-1.146-11.375,1.542c-46.021,39.01-106.656,90.552-152.385,129.885 c-2.406,2.063-3.76,5.094-3.708,8.271c0.052,3.167,1.521,6.156,4,8.135c42.49,34.031,106.521,80.844,152.76,114.115 c1.844,1.333,4.031,2.01,6.229,2.01c1.667,0,3.333-0.385,4.865-1.177c3.563-1.823,5.802-5.49,5.802-9.49V137.083 C512,132.927,509.583,129.146,505.813,127.406z"></path><path d="M16.896,389.354c46.25-33.271,110.292-80.083,152.771-114.115c2.479-1.979,3.948-4.969,4-8.135 c0.052-3.177-1.302-6.208-3.708-8.271C124.229,219.5,63.583,167.958,17.563,128.948c-3.167-2.688-7.625-3.281-11.375-1.542 C2.417,129.146,0,132.927,0,137.083v243.615c0,4,2.24,7.667,5.802,9.49c1.531,0.792,3.198,1.177,4.865,1.177 C12.865,391.365,15.052,390.688,16.896,389.354z"></path><path d="M498.927,418.375c-44.656-31.948-126.917-91.51-176.021-131.365c-4-3.26-9.792-3.156-13.729,0.24 c-9.635,8.406-17.698,15.49-23.417,20.635c-17.563,15.854-41.938,15.854-59.542-0.021c-5.698-5.135-13.76-12.24-23.396-20.615 c-3.906-3.417-9.708-3.521-13.719-0.24c-48.938,39.719-131.292,99.354-176.021,131.365c-2.49,1.792-4.094,4.552-4.406,7.604 c-0.302,3.052,0.708,6.083,2.802,8.333C19.552,443.01,30.927,448,42.667,448h426.667c11.74,0,23.104-4.99,31.198-13.688 c2.083-2.24,3.104-5.271,2.802-8.323C503.021,422.938,501.417,420.167,498.927,418.375z"></path></g></g></g></svg>
            <span class="icon__fallback-text">info@hawkfocal.com</span>
              </a>
            </li>    
</ul>
			</div>

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

#shopify-section-top_header {
	display: none;
}
.announcement-bar {
	background-color: #7796a8;
	position: relative;
	width: 100%;
	display: block;
	overflow: hidden;
}
.announcement-bar--link {
	display: block;
	width: 70%;
	float: left;
	text-align: center;
}
.call_sub_menu {
	width: 25%;
	display: inline-block;
	flex-wrap: wrap-reverse;
}
.menu_list_item {
	float: left;
	width: 50%;
	top: 10px;
	position: relative;
}
.site-header__icon {
	float: left;
}
.announcement-bar .site-header__icon svg {
	vertical-align: middle;
	fill: #3d4246;
	position: relative;
	height: 20px;
	width: 20px;
	fill: #fff;
	float: left;
}
.announcement-bar .icon__fallback-text {
	display: block;
	color: #fff;
	position: relative !important;
	height: auto;
	width: auto;
	padding-left: 5px;
	display: block;
}

Hope this will work for you.
Thanks!

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes