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

Solved
Highlighted
Tourist
9 0 1

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

0 Likes
Highlighted

Hello @drose22004,

You have to do changes in header.liquid file

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
Tourist
9 0 1

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

0 Likes
Highlighted

Hello @drose22004 

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

header- Edit-Narrative.jpg

<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!

 

 

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
1 Like
Highlighted
Tourist
9 0 1

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?  

0 Likes
Highlighted

Hello @drose22004 


Please share your 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
Tourist
9 0 1
Highlighted

This is an 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!

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
1 Like
Highlighted
Tourist
9 0 1

That worked!  Thank you so much!

0 Likes