How do I move my account and cart icon to the announcement bar?

Solved
Highlighted
Tourist
25 0 3

How do I move my account and cart icon to the announcement bar? And how would I change the account icon from an image to text (Account)? I also would like to know how to increase the size of the cart icon since it's pretty small right now. I'm using debut. My website is www.thecollectorsalley.com

something.PNG

Thanks. 

0 Likes
Highlighted

This is an accepted solution.

Hello @TCA-USA 

Add this css at the bottom of

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

@media screen and (min-width: 1023px) {
.site-header__icon.site-header__cart {
	top: -70px;
}
.site-header__icon.site-header__account {
	top: -68px;
}
.icon.icon-cart {
	width: 30px;
	height: 30px;
	fill: #fff !important;
}
.site-header__account .icon__fallback-text {
	display: block;
	overflow: hidden;
	width: 70px;
	position: relative !important;
	color: #fff !important;
	float: left;
	height: 28px;
}
.icon.icon-login {
	display: none;
}
.site-header__search-toggle {
	display: block;
	float: right;
	position: relative;
	left: 125px;
}
}
@media screen and (max-width: 1022px) {
.site-header__icon.site-header__account {
	top: -82px;
}
.site-header__icon.site-header__cart {
	top: -85px;
}
}

Changes are shown like as attached screenshot, please check.

Header_The Collector's Alley.jpg

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

Hello @TCA-USA 

For replacing Login text as Account you can changes in header.liquid file

For reference please check attached screenshot.

account_The Collector's Alley.jpg

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
Tourist
25 0 3

Works! Thank you!

0 Likes
Highlighted
Tourist
25 0 3

@oscprofessional 

How would I fix this on mobile? 

thing14.PNG

0 Likes