Shopify themes, liquid, logos, and UX
How do I change the header icons into text and have a reasonable gap between them once its changed? (Dawn theme)
Basically from this
To this:
Also it would be nice that the the amount of items that are in the bag, appears on the right side.
I already tried many scripts on different forums and none of them worked properly.
Solved! Go to the solution
This is an accepted solution.
Hello @LDLC_Shop
Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.
.header__icon {
display: flex;
align-items: center;
justify-content: center;
margin: 0 5px;
text-decoration: none;
}
.header__icon .svg-wrapper {
display: none !important;
}
.header__icon--cart::after {
content: "Cart";
font-size: 14px;
color: #000;
}
.header__icon--account::after {
content: "Login";
font-size: 14px;
color: #000;
}
.header__icon--search::after {
content: "Search";
font-size: 14px;
color: #000;
}
Hello there @LDLC_Shop You should try the codes shared in this previous community thread where the poster had the exact same issue as this and in the same theme https://community.shopify.com/c/shopify-design/how-to-change-header-icons-to-display-text/td-p/28724...
Hello @LDLC_Shop
Thank you for submitting your query to the Shopify community. I’d be happy to assist you. Could you please provide the store URL and password (if it’s password-protected) so I can review and get back to you with an update?
Hello Devcoders,
Thank you for reaching out!
The website: https://longdistanceloveclub.com/
The password: edimar123
I would add additionally that if it changes to Mobile View (Only the search and Cart, as the account disappears), it would switch back to normal icons. I'm not sure if its too much to ask for, but I'm still at the very beginning of coding.
This is an accepted solution.
Hello @LDLC_Shop
Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.
.header__icon {
display: flex;
align-items: center;
justify-content: center;
margin: 0 5px;
text-decoration: none;
}
.header__icon .svg-wrapper {
display: none !important;
}
.header__icon--cart::after {
content: "Cart";
font-size: 14px;
color: #000;
}
.header__icon--account::after {
content: "Login";
font-size: 14px;
color: #000;
}
.header__icon--search::after {
content: "Search";
font-size: 14px;
color: #000;
}
It works perfectly, thank you so much!
One more thing, is there a possibility to make it in such way, when you go to mobile UI, it changes back to icons?
Hello @LDLC_Shop
You're very welcome! I'm thrilled to hear that you're pleased with the outcome. Don't hesitate to reach out if you need further assistance.
like and accepting the All solution. Thank you!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025