Theme Prestige - Account icon bei Mobiler Darstellung

[franz-messner]

Hallo! 

Weiß jemand wo man das Icon Account für die Mobile Darstellung aktivieren kann? 
Es erscheint zwar in der Desktop, Tablet Darstellung, aber in Mobile sehe das ICON für das Kundenkonto nicht..

Hat jemand für eine Idee in welcher datei es sich aktivieren lässt? 

Danke und LG

Franz

[r8r]

Hallo Franz,

ich hab aktuell keine aktive Presige Installation hier, aber bist Du sicher, dass in der mobile-Ansicht das Icon sichtbar sein sollte? In den Demos gibt's den Account-Login nicht als Icon, sondern als letzten Punkt "Account" im Off-Canvas Menü. Siehe z.B. https://themes.shopify.com/themes/prestige/styles/vogue/preview .

Grundsätzlich wär's ansonsten recht einfach möglich, dieses Icon per Code zu ergänzen. Ich war so frei und hab das mal zu Demozwecken gemacht – aber das Design "zwickt" bei dem dritten Icon schon ordentlich. Meine Vermutung wäre, dass die Designer*innen sich daher gegen ein solches entschieden haben.

Liebe Grüße,
Mario

[franz-messner]

Hallo Mario! 

Danke für die Rückmeldung! 

Ich habe das Search Symbol ausgeblendet, da es für dieses Fall wo ich wenige Produkte habe sowieso nicht notwendig ist. 

[href="/search"]{ display: none;}

jedoch habe ich im header.liquid nachgesehen:

    
      
       {%- if shop.customer_accounts_enabled and section.settings.show_icons or use_sidebar_menu -%}
        <a href="{{ routes.account_url }}" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable hidden-phone">
          {%- render 'icon' with 'account' -%}
        </a>
      {%- endif -%}
      

aber wenn ich die prüfung des if statements account.enabled wegnehme tut sich nix. ich will ja dass es auch bei geringeren auflösung dargestellt wird.

platz hab ich ja, da ich das search icon weggenommen habe. Ich finde es ist auch von der benutzbarkeit besser als im menü zu suchen. also zumindest spricht für mich nicht, dass es beide gibt...

Wo hast du die Änderung vorgenommen? 

im theme.css

@media screen and (max-width: 640px) {
  .hidden-phone {
    display: none !important;
  }
   
usw.

Danke für deine Hilfestellung ...

LG

Franz

[r8r]

Hi @franz-messner 

danke für die Erläuterung.

Ersetze diesen Block

{%- if shop.customer_accounts_enabled and section.settings.show_icons or use_sidebar_menu -%}
  <a href="{{ routes.account_url }}" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable hidden-phone">
    {%- render 'icon' with 'account' -%}
  </a>
{%- endif -%}

doch testweise einfach mal durch

<a href="{{ routes.account_url }}" class="Header__Icon Icon-Wrapper Icon-Wrapper--clickable">
  {%- render 'icon' with 'account' -%}
</a>

und schau, ob das icon angezeigt wird!

Das if-Statement solltest Du dann wieder ergänzen – aber jedenfalls hast Du damit verifiziert, dass die Ausgabe klappt.

> Wo hast du die Änderung vorgenommen?

Ich war so frei und hab das in den Browser Dev-Tools hingeprototypt 😉

LG und keine Ursache, Mario

[franz-messner]

hallo Mario!

also wars die klasse 

hidden-phone

mhhh, ... muss ich mir jetzt genau anschauen was die macht...

danke nochmals für deine Hilfestellung! 

Jetzt gehts dann noch weiter zu schauen was mal alles so optimieren kann hinsichtlich ladezeiten...da ich hier noch einiges entdeckt habe (TTFB, etc...)

LG 

Franz 

[r8r]

Hallo @franz-messner 

ja, das ist eine typische Utilty-Klasse, wie sie häufig bei responsive Frontends eingesetzt wird.

Im Detail findest Du sie in der theme.css:

TTFB ist bei Shopify sehr schwierig (wenn überhaupt) zu beeinflussen – aber lass es mich gerne wissen, falls Du ein probates Mittel findest!

LG, Mario