Change cart icon into text in Debut theme

labkar
Tourist
7 0 4

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

 

Replies 11 (11)

MarcoReleasit
Shopify Partner
314 24 60

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!

Install Releasit Cash On Delivery for free here: https://apps.shopify.com/cash-on-delivery-fee
Add a fee to Cash on Delivery and limit COD based on any condition (order total, location, products, collections, etc.)
labkar
Tourist
7 0 4

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

MarcoReleasit
Shopify Partner
314 24 60

Hi Labkar

Glad my answer was helpful!

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

Install Releasit Cash On Delivery for free here: https://apps.shopify.com/cash-on-delivery-fee
Add a fee to Cash on Delivery and limit COD based on any condition (order total, location, products, collections, etc.)
labkar
Tourist
7 0 4

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

MarcoReleasit
Shopify Partner
314 24 60

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!

Install Releasit Cash On Delivery for free here: https://apps.shopify.com/cash-on-delivery-fee
Add a fee to Cash on Delivery and limit COD based on any condition (order total, location, products, collections, etc.)
labkar
Tourist
7 0 4

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 4

This is the link for the website : 

https://www.uncommonplayground.com/

MarcoReleasit
Shopify Partner
314 24 60

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!

Install Releasit Cash On Delivery for free here: https://apps.shopify.com/cash-on-delivery-fee
Add a fee to Cash on Delivery and limit COD based on any condition (order total, location, products, collections, etc.)
labkar
Tourist
7 0 4

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

 

MarcoReleasit
Shopify Partner
314 24 60

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

Install Releasit Cash On Delivery for free here: https://apps.shopify.com/cash-on-delivery-fee
Add a fee to Cash on Delivery and limit COD based on any condition (order total, location, products, collections, etc.)
labkar
Tourist
7 0 4

Thank you very much Marco for your help!