Shopify themes, liquid, logos, and UX
Hi,
I would like to change the icons of the shopping cart, search and login. I'm currently using the Debut theme.
I want to replace the icons with text. Where and how specifically can I do this?
Thank you in advance
Karelle
(What I have vs What Im looking for)
Hello Labkar
Follow these instructions:
1. Open the theme code editor by going to Online store -> Themes -> Actions -> Edit code
2. Open the header.liquid file in the Sections folder
3. For the Cart icon locale the following piece of code:
<a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
{% include 'icon-cart' %}
<span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
<div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %} critical-hidden" data-cart-count-bubble>
<span data-cart-count>{{ cart.item_count }}</span>
<span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
</div>
</a>
and replace it with the following code:
<a href="{{ routes.cart_url }}" class="site-header__icon site-header__cart">
<span class="">{{ 'layout.cart.title' | t }}</span>
{% include 'icon-cart' %}
<div id="CartCount" class="site-header__cart-count{% if cart.item_count == 0 %} hide{% endif %} critical-hidden" data-cart-count-bubble>
<span data-cart-count>{{ cart.item_count }}</span>
<span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
</div>
</a>
4. For the Search icon locate the following piece of code:
<button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top" data-predictive-search-open-drawer>
{% include 'icon-search' %}
<span class="icon__fallback-text">{{ 'layout.navigation.search' | t }}</span>
</button>
and replace it with this code:
<button type="button" class="btn--link site-header__icon site-header__search-toggle js-drawer-open-top" data-predictive-search-open-drawer>
{% comment %}{% include 'icon-search' %}{% endcomment %}
<span class="">{{ 'layout.navigation.search' | t }}</span>
</button>
5. For the Login icon locate this piece of code:
{% if shop.customer_accounts_enabled %}
{% if customer %}
<a href="{{ routes.account_url }}" class="site-header__icon site-header__account">
{% include 'icon-login' %}
<span class="icon__fallback-text">{{ 'layout.customer.account' | t }}</span>
</a>
{% else %}
<a href="{{ routes.account_login_url }}" class="site-header__icon site-header__account">
{% include 'icon-login' %}
<span class="icon__fallback-text">{{ 'layout.customer.log_in' | t }}</span>
</a>
{% endif %}
{% endif %}
and replace it with this code:
{% if shop.customer_accounts_enabled %}
{% if customer %}
<a href="{{ routes.account_url }}" class="site-header__icon site-header__account">
{% comment %}{% include 'icon-login' %}{% endcomment %}
<span class="">{{ 'layout.customer.account' | t }}</span>
</a>
{% else %}
<a href="{{ routes.account_login_url }}" class="site-header__icon site-header__account">
{% comment %}{% include 'icon-login' %}{% endcomment %}
<span class="">{{ 'layout.customer.log_in' | t }}</span>
</a>
{% endif %}
{% endif %}
You can edit the text for each element in your theme translations.
Let me know if this works for you! If you have problems please share a link to your website so that I can have a look there!
Hi MarcoReleasit
Thank you for your time and accurate advice!
Here is the result 🙂
I would like to change the font though, where and what code should I add? If per example I was using Times New Roman. And do I have to specify the font size?
(I am in my early stages but I am enjoying it!)
Thanks a lot, I appreciate it
Karelle
Hi Labkar
Glad my answer was helpful!
Do you need to change only the font of the 3 buttons or of the entire website?
Hi Marco,
Only the font of the 3 buttons would be very cool :).
I also seek to add a capital letter to the language ''French''. I tried to do so in the preferences and languages of the store but I have the impression that the French is listed with a lowercase letter and English with a capital letter. A small detail but that improves the experience 🙂
Thank you in advance 🙂
Hi @labkar !
Yes it's possible! Can you send me a link to your store so that I can give you the snippet to add to the theme files?
Also do you already know the font you would like to use for the buttons? You should choose between fonts available for free here: https://fonts.google.com/ so that we can easily add them to your store!
Hi Marco,
Here is the link to the site:
I'm meeting with the graphic designer tonight to finalize the details of the site, including the font for the three options on the right (log in, shopping cart and search). She will decide on the font 🙂
And finally, for real (I promise) is it possible to center the texts of the pages with the second menu in footer?
Then, the whole thing will be finished and ready to launch! :)))
A huge thank you Marco!
Translated with www.DeepL.com/Translator (free version)
Hi @labkar
I will need the store password to be able to view the site.
Regarding your request about centering the text on that page with the second footer menu I don't think it's possible but I will have a look once I have access to the site!
Hello Marco,
Thanks for your quick feedback! Sorry for the delay in answering. I am launching the site on Monday the 9th so I am very busy.
Here is the password: askuld
Also, I would like to know if it is possible to add menus that scroll in the pages of product descriptions. (see picture 1 and 2 - vs picture 3 (what i have right now)
And if it is finally possible to put down the "add to cart" and "buy now" button below the product description.
A huge thank you for your help. I am a little discouraged and this is my first experience with Shopify.
Karelle
labonteblanchardkarelle@gmail.com
Hi @labkar
Regarding the font of the 3 buttons here is the code:
<style>
.site-header .site-header__icon {
font-family: FONT-FAMILY-NAME-HERE;
}
</style>
You will have to add this code to your theme.liquid file
You also need to chose a font from Google Fonts or other font libraries, add the Google Fonts code to your theme.liquid file and insert the name of the font on the piece of code.
To capitalize the languages you need to add this piece of code to your theme.liquid file:
<style>
#localization_form, #localization_form button {
text-transform: capitalize;
}
</style>
Regarding all your other requests I suggest you hire a Shopify Expert https://experts.shopify.com/ who can help you customize your website based on your requirements. The forums here are helpful if you need to make a one-time simple customization by yourself.
Have a great day!
Marco
Thank you very much Marco for your help!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024