Changing header icons into Text

Solved

Changing header icons into Text

LDLC_Shop
Tourist
14 0 8

How do I change the header icons into text and have a reasonable gap between them once its changed? (Dawn theme)

 

Basically from this

LDLC_Shop_0-1738456928951.png

To this:

LDLC_Shop_1-1738456967777.png

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.

 

Accepted Solution (1)
devcoders
Shopify Partner
1009 129 266

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;
}

 

 

devcoders_0-1738499551569.png

 

 

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!

View solution in original post

Replies 6 (6)

Bundler-Manuel
Trailblazer
687 31 79

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

Emmanuel
Please let me know if it works by marking it as a solution!
Bundler - Product Bundles app, a great bundle app for Shopify, with glowing user testimonials and a free plan.

devcoders
Shopify Partner
1009 129 266

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?

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!
LDLC_Shop
Tourist
14 0 8

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.  

devcoders
Shopify Partner
1009 129 266

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;
}

 

 

devcoders_0-1738499551569.png

 

 

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!
LDLC_Shop
Tourist
14 0 8

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?

devcoders
Shopify Partner
1009 129 266

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!

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!