How to Remove Cart Icon and Replace with Phone Number Narrative Theme 6/28/20

[drose22004]

Hi!

I have searched for an answer on this and haven't found anything that will work for me: How to Remove Cart Icon and Replace with Phone Number Narrative Theme 6/28/20  

Can someone help please?  The site is biopurevolusia.com

Thank you!

David

[oscprofessional]

Hello @drose22004,

You have to do changes in header.liquid file

[drose22004]

Thanks for responding!  Yes I am aware of this, but what exactly do I need to change in the header file?

[oscprofessional]

Hello @drose22004 

Replace following code in header.liquid file which is shown in attached screenshot please check

<div class="site-header__section site-header__section--button call-us">
<a href="tel:0123456789" 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">0123456789</span>
              </a>
</div>

FYI: < svg> is used for phone icon which is shown in header

Hope this will work for you.
Thanks!

[drose22004]

Thanks so much.  I did this and the cart icon is gone but there is no phone number showing or phone icon.  Any ideas or how to fix?  

[oscprofessional]

Hello @drose22004 

Please share your site url.

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

Thanks...

[drose22004]

https://biopurevolusia.com/ Thanks!

[oscprofessional · Accepted solution]

Hello @drose22004 

Add this css at the bottom of

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

.site-header__callus svg {
	height: 20px;
	width: 25px;
	float: left;
	padding-right: 5px;
	top: 2px;
	position: relative;
}
.call-us .icon__fallback-text {
	position: relative !important;

}
.site-header__icon.site-header__callus {
	text-decoration: none;
}
.site-header__section.site-header__section--button.call-us {
	width: 20%;
	display: inline-block;
}

Hope this will work for you.
Thanks!

[drose22004]

That worked!  Thank you so much!

[Azrajby]

Hi, Can we replace this with login button or icon as well.