Change cart icon into text in Debut theme

labkar
New Member
3 0 0

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) 

Capture d’écran, le 2021-07-09 à 14.56.42.pngCapture d’écran, le 2021-07-09 à 14.57.08.png

 

0 Likes
MarcoReleasit
Shopify Partner
55 6 9

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!

0 Likes
labkar
New Member
3 0 0

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 


Capture d’écran, le 2021-07-13 à 13.48.38.png

0 Likes
MarcoReleasit
Shopify Partner
55 6 9

Hi Labkar

Glad my answer was helpful!

Do you need to change only the font of the 3 buttons or of the entire website?

0 Likes
labkar
New Member
3 0 0

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  

 

Capture d’écran, le 2021-07-26 à 19.32.06.png

0 Likes
MarcoReleasit
Shopify Partner
55 6 9

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!

0 Likes