Change cart icon into text in Debut theme

[labkar]

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)

[MarcoReleasit]

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:

            {% include 'icon-cart' %}
            {{ 'layout.cart.title' | t }}
            

              {{ cart.item_count }}
              {{ 'layout.cart.items_count' | t: count: cart.item_count }}
            

          

and replace it with the following code:

            {{ 'layout.cart.title' | t }}
            {% include 'icon-cart' %}
            

              {{ cart.item_count }}
              {{ 'layout.cart.items_count' | t: count: cart.item_count }}
            

          

4. For the Search icon locate the following piece of code:

and replace it with this code:

5. For the Login icon locate this piece of code:

{% if shop.customer_accounts_enabled %}
            {% if customer %}
              
                {% include 'icon-login' %}
                {{ 'layout.customer.account' | t }}
              
            {% else %}
              
                {% include 'icon-login' %}
                {{ 'layout.customer.log_in' | t }}
              
            {% endif %}
          {% endif %}

and replace it with this code:

{% if shop.customer_accounts_enabled %}
            {% if customer %}
              
                {% comment %}{% include 'icon-login' %}{% endcomment %}
                {{ 'layout.customer.account' | t }}
              
            {% else %}
              
                {% comment %}{% include 'icon-login' %}{% endcomment %}
                {{ 'layout.customer.log_in' | t }}
              
            {% 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]

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

[MarcoReleasit]

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]

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

[MarcoReleasit]

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]

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)

[labkar]

This is the link for the website :

https://www.uncommonplayground.com/

[MarcoReleasit]

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]

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

[MarcoReleasit]

Hi @labkar

Regarding the font of the 3 buttons here is the code:

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:

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

[labkar]

Thank you very much Marco for your help!