Change cart icon into text in Debut theme

labkar
Tourist
7 0 3

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
103 11 29

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!

labkar
Tourist
7 0 3

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
103 11 29

Hi Labkar

Glad my answer was helpful!

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

labkar
Tourist
7 0 3

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
103 11 29

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!

labkar
Tourist
7 0 3

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)Capture d’écran, le 2021-08-03 à 13.54.36.png

labkar
Tourist
7 0 3

This is the link for the website : 

https://www.uncommonplayground.com/

0 Likes
MarcoReleasit
Shopify Partner
103 11 29

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!

labkar
Tourist
7 0 3

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

Capture d’écran, le 2021-08-07 à 13.22.23.pngCapture d’écran, le 2021-08-07 à 13.22.30.pngCapture d’écran, le 2021-08-07 à 13.27.05.png