What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Site Navigation Menu Issue- Random Text Displayed

Site Navigation Menu Issue- Random Text Displayed

xiaopei
Tourist
19 0 2

We have recently noticed random text being displayed in the drop down menus of our website (Numeral 4 outlined) as well as the bottom of our footer (ADMPV outlined).  We cannot diagnose where this is coming from.  We have not made any changes to our site since July and this issue has seemed to crop up more recently.  Any help would be appreciated.  Photos attached for reference.FooterIssue.JPGNavigationIssue.JPG

Replies 5 (5)

gina-gregory
Shopify Partner
742 51 213

Looks like there's supposed to be font files that includes icons for the theme but these font files are missing. If they still exist in the theme Assets folder, you may need to update the links to these files. These font URLs may be hard-coded instead of using liquid asset_url filter.

xiaopei
Tourist
19 0 2

We have found that the #4 used to be a down arrow icon, the bracket in the add to cart used to be a shopping cart icon, and the text letters at the bottom were credit card icons.

We are running a the Supply theme in Shopify, not sure how these files are missing since we have not added or removed anything.

Forgive my naivety on the subject, but how would I go about updating the links to the files if running a blanket theme with Shopify?

gina-gregory
Shopify Partner
742 51 213

Look in the 'timber-mini.css' file. At the top there are URLs for the icon fonts. If the file is a '.liquid' file, you can update the hard-coded URLs to this format:

{{ "icons.eot" | asset_url }}

{{ "icons.woff" | asset_url }}

etc.

 

If it's not a '.liquid' file, you can take this font-face declaration out of that file and put it into an inline <style> tag in theme.liquid

xiaopei
Tourist
19 0 2
I have this code in timber.css.liquid

 

/*================ Typography ================*/

/*============================================================================
  Get font-families from theme settings
==============================================================================*/
{% if settings.type_base_family contains 'Google' %}
  {% assign type_base_parts = settings.type_base_family | split: '_' %}
  {% assign type_base_name = type_base_parts[1] %}
  {% capture base_family %}"{{ type_base_name | split: ':' | first | replace: '+', ' ' }}"{% if type_base_parts.last == 'serif' %}, serif {% else %}, "HelveticaNeue", "Helvetica Neue", sans-serif{% endif %}{% endcapture %}
{% else %}
  {% assign base_family = settings.type_base_family %}
{% endif %}

{% if settings.type_header_family contains 'Google' %}
  {% assign type_header_parts = settings.type_header_family | split: '_' %}
  {% assign type_header_name = type_header_parts[1] %}
  {% capture header_family %}"{{ type_header_name | split: ':' | first | replace: '+', ' ' }}"{% if type_header_parts.last == 'serif' %}, serif {% else %}, "HelveticaNeue", "Helvetica Neue", sans-serif{% endif %}{% endcapture %}
  {% assign header_weight = type_header_parts[2] %}
{% else %}
  {% assign header_family = settings.type_header_family %}
  {% assign header_weight = 700 %}
{% endif %}

{% if settings.type_accent_family contains 'Google' %}
  {% assign type_accent_parts = settings.type_accent_family | split: '_' %}
  {% assign type_accent_name = type_accent_parts[1] %}
  {% capture accent_family %}"{{ type_accent_name | split: ':' | first | replace: '+', ' ' }}"{% if type_accent_parts.last == 'serif' %}, serif {% else %}, "HelveticaNeue", "Helvetica Neue", sans-serif{% endif %}{% endcapture %}
  {% assign accent_weight = type_accent_parts[2] %}
{% else %}
  {% assign accent_family = settings.type_accent_family %}
  {% assign accent_weight = 500 %}
{% endif %}

// Header Font
$headerFontStack: {{ header_family }};
$headerFontWeight: {{ header_weight }};

// Body Font
$bodyFontStack: {{ base_family }};
$baseFontSize: {{ settings.type_base_size }};

// Navigation and Button Font
$accentFontStackBold: {{ accent_family }};
$accentFontWeight: {{ accent_weight }};

// Icons
@font-face {
  font-family: "icons";
  src: url(' {{ "icons.eot" | asset_url }} ');
  src: url(' {{ "icons.eot" | asset_url }}?#iefix ') format("embedded-opentype"),
       url(' {{ "icons.woff" | asset_url }} ') format("woff"),
       url(' {{ "icons.ttf" | asset_url }} ') format("truetype"),
       url(' {{ "icons.svg" | asset_url }}#timber-icons ') format("svg");
  font-weight: normal;
  font-style: normal;
}
$socialIconFontStack: 'icons';
gina-gregory
Shopify Partner
742 51 213

Looks like you were able to resolve this?