Hi,
How do I add a “View Cart” text along with my cart icon on my Debut theme banner/header?
This is the debut theme:
I’d like to make it something like this (reference: supply theme):
Is it even possible? If it is, I would appreciate anyone who can give me a code.
Here’s my shop’s URL.
Thanks for taking the time! I’m pretty new to this, how am I supposed to add that to my theme? Do I just copy (which code) it and paste it on my theme? (Edit code > Asset > theme.css)?
Thanks again.
Hmm sorry Wellanie, this is not CSS/styling so you can’t just paste it on theme.css.
You need to edit it directly on the HTML structure of the header.liquid of your theme.
Control F (find) these line of code and you’ll see some codes similar below. And add a “View Cart” text just before the closing . Check the code below.
CartIf you’re not confident doing this, just pm me and I’ll provide you my email and you can add me as temporary staff to edit this code for you. No worries, it’s free. But I believe you can do this.
Note: duplicate your current theme for backup purposes.
Good luck!
I’m kind of having a problem recently when trying to find solutions, most answers are for theme.css.liquid. I dunno why, but my current debut theme doesn’t have that. I only have theme.css. Do I need a totally different code?
I have actually been seeing some suggestions that we can make a new folder (theme.css.liquid), but nothing have worked so far for me.
I think it’s under the “Templates” section or the “Snippets” section. Then you can see something name header liquid.
Wait I’ll install the debut theme and I’ll check where to find this line.
Okay I found it.
Just go to Sections > Header.liquid. Then search for these lines of code—CtrlF the word cart. Then, add a View Cart text just before .
It worked!
Thank you so much. 
Just a follow-up question if you don’t mind.
I tried to make it uniform since I made it for the Cart. I tried to do the same principle for the search and account icon. It works for account but not for search. Can you review if I put it on the right place?
Yes, you can make it smaller.
Just paste the code below at the bottommost of your assets > theme.css (this is where you paste/code styles of the website such as colors, margin, font weights, padding)
.site-header__account, .site-header__cart {
font-size: small;
}
You’re a lifesaver. Also for the added information about what is in assets theme.css. I’ll take note of it.
For the text beside Search icon, this worked for me. Just add the word Search before the closing tag.
I figured out my other problem! Since the thing worked for the cart icon when I put the text before , I thought it would be the same for account icon and search icon. Apparently it only worked for account icon, so while doing a trial and error I changed the position of the text “search”, I put it before . and it worked.
I think this looks better now, don’t you think so?
No problem. I’m glad I was able to help you.
Actually, I once have this problem regarding customization too last last week. Then some developers here offer to help me for an amount I can’t still afford since I’m crazily broke right now hahaha. So what I did is I focused all of my time last week to learn some HTML and CSS from free courses on youtube. And I happened to learn some of the basics hahaha.
