FROM CACHE - de_header
Gelöst

Breadcrumbs Checkout / Fortschrittsbalken

D-PG
Shopify Partner
53 2 11

Hi zusammen, 

 

wer kann helfen? Wir peppen gerade soweit es geht unseren Checkout auf. 

 

Nun bin ich auf die Breadcrumbs gestoßen, welche ja vom Standard recht klein und nicht sehr überschaubar sind... 

 

Folgendes habe ich entdeckt, weiß aber gerade nicht so recht dieses zu implementieren:

 

 

DPG_0-1675887055904.jpeg

 

 

 

Auf den folgenden Links einige Codes und Beisp.:

 

https://jadepuma.com/blogs/shopify-tutorials/custom-breadcrumbs-in-a-shopify-plus-checkout 

 

https://shopify.github.io/liquid-code-examples/example/breadcrumb-navigation 

 

https://codepen.io/sahibjot/pen/JWmrEe 

 

Hat jemand einen Plan, eine Idee; wie man diesen Fortschrittsbalken ändern kann?

 

Viele Grüße

DPG

2 AKZEPTIERTE LÖSUNGEN

Gabe
Shopify Staff
17394 2754 4063

Erfolg.

Hey @D-PG 

 

Danke für die Bilder und ich sehe ihr wollt eure Kundenerfahrung im Checkout mit einer tollen "Progress Bar" verbessern (eine Breadcrumb Trail ist eher die mit Titel und Bindestriche)! Apropos Codepen finde ich super als Code Ressource! 

 

Derzeit wird das in einem Nicht-Plus Shop nur mit einer App machbar sein (da der checkout.liquid ja gesperrt ist) aber vielleicht könnt ihr das über unseren neuen Checkout Extensibility Feature erreichen (siehe mehr dazu in unserem Englischen Blog hier).

 

Ein Python Code dass Plus Shops im checkout.liquid implementieren können wäre eins wie das folgende:

 

<div class="progress-bar">
  <ol class="progress-steps">
    <li class="progress-step {{ steps.contact_information.completed ? 'completed' : steps.contact_information.is_current ? 'current' : '' }}">
      Contact Information
    </li>
    <li class="progress-step {{ steps.shipping_method.completed ? 'completed' : steps.shipping_method.is_current ? 'current' : '' }}">
      Shipping Method
    </li>
    <li class="progress-step {{ steps.payment_method.completed ? 'completed' : steps.payment_method.is_current ? 'current' : '' }}">
      Payment Method
    </li>
  </ol>
</div>

 

So dass die Kunden dann oben auf der Kassenseite diesen Fortschrittsbalken sehen können, müsste man einen CSS wie das folgende in die Theme Stylesheet ergänzen:

 

.progress-bar {
  margin-bottom: 20px;
}

.progress-steps {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

.progress-step {
  font-size: 14px;
  text-align: center;
  width: 33.33%;
  position: relative;
}

.progress-step:before {
  content: '';
  height: 5px;
  width: 100%;
  background-color: #eaeaea;
  position: absolute;
  top: 20px;
  left: 0;
}

.progress-step.completed:before {
  background-color: #2baade;
}

.progress-step.current:before {
  background-color: #2baade;
  height: 10px;
}

 

Um dir den Aufwand zu reduzieren, habe ich für dich ein paar Apps hier aber die meisten können im Checkout leider nicht greifen da es gesperrt ist.

 

-----
Habt ihr schon über Ostern nachgedacht? Warum nicht etwas "Easter Egg Gamification" im Vorfeld Osterns in den Shop einbauen? Man kann z. B. eine Annonce auf der Homepage zeigen, dass Oster Eier im Shop versteckt sind und wenn diese gefunden werden, werden sie automatisch als Geschenk zum Warenkorb ergänzt. Gerne können wir hier weiter darüber plaudern!

Lass wissen, wenn du weitere Fragen hast zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

giphy

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

Gabe
Shopify Staff
17394 2754 4063

Erfolg.

@D-PG 

 

Die kommen alles über die nächsten Wochen. Der Checkout ist ein komplexer, wichtiger Teil der Merchant und User Experience und um dieses Erlebnis noch besser zu machen, überarbeiten wir derzeit den Shopify Checkout von einem dreiseitigen Checkout zu einem einseitigen Checkout.

 

Es wird zuerst einen Winter Editions Early Access Programm für bestimmte Händler geben (ab mitte Q1) und danach wird der neue Checkout gestaffelt als GA (general availability) an alle Shops ausgerollt.

 

Mehr Infos habe ich derzeit nicht aber halte bitte Ausschau in unserem Changelog (https://changelog.shopify.com/).

 

Hoffe das hilft! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

5 ANTWORTEN 5

Gabe
Shopify Staff
17394 2754 4063

Erfolg.

Hey @D-PG 

 

Danke für die Bilder und ich sehe ihr wollt eure Kundenerfahrung im Checkout mit einer tollen "Progress Bar" verbessern (eine Breadcrumb Trail ist eher die mit Titel und Bindestriche)! Apropos Codepen finde ich super als Code Ressource! 

 

Derzeit wird das in einem Nicht-Plus Shop nur mit einer App machbar sein (da der checkout.liquid ja gesperrt ist) aber vielleicht könnt ihr das über unseren neuen Checkout Extensibility Feature erreichen (siehe mehr dazu in unserem Englischen Blog hier).

 

Ein Python Code dass Plus Shops im checkout.liquid implementieren können wäre eins wie das folgende:

 

<div class="progress-bar">
  <ol class="progress-steps">
    <li class="progress-step {{ steps.contact_information.completed ? 'completed' : steps.contact_information.is_current ? 'current' : '' }}">
      Contact Information
    </li>
    <li class="progress-step {{ steps.shipping_method.completed ? 'completed' : steps.shipping_method.is_current ? 'current' : '' }}">
      Shipping Method
    </li>
    <li class="progress-step {{ steps.payment_method.completed ? 'completed' : steps.payment_method.is_current ? 'current' : '' }}">
      Payment Method
    </li>
  </ol>
</div>

 

So dass die Kunden dann oben auf der Kassenseite diesen Fortschrittsbalken sehen können, müsste man einen CSS wie das folgende in die Theme Stylesheet ergänzen:

 

.progress-bar {
  margin-bottom: 20px;
}

.progress-steps {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

.progress-step {
  font-size: 14px;
  text-align: center;
  width: 33.33%;
  position: relative;
}

.progress-step:before {
  content: '';
  height: 5px;
  width: 100%;
  background-color: #eaeaea;
  position: absolute;
  top: 20px;
  left: 0;
}

.progress-step.completed:before {
  background-color: #2baade;
}

.progress-step.current:before {
  background-color: #2baade;
  height: 10px;
}

 

Um dir den Aufwand zu reduzieren, habe ich für dich ein paar Apps hier aber die meisten können im Checkout leider nicht greifen da es gesperrt ist.

 

-----
Habt ihr schon über Ostern nachgedacht? Warum nicht etwas "Easter Egg Gamification" im Vorfeld Osterns in den Shop einbauen? Man kann z. B. eine Annonce auf der Homepage zeigen, dass Oster Eier im Shop versteckt sind und wenn diese gefunden werden, werden sie automatisch als Geschenk zum Warenkorb ergänzt. Gerne können wir hier weiter darüber plaudern!

Lass wissen, wenn du weitere Fragen hast zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

giphy

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

D-PG
Shopify Partner
53 2 11

Hey @Gabe , 

 

ich denke mit dem "Winter-Update" hat sich alles erledigt ;). 

 

Schon eine Ahnung, wann es eingespielt wird? Insbesondere der One-Page Checkout?

 

VG

DPG

Gabe
Shopify Staff
17394 2754 4063

Erfolg.

@D-PG 

 

Die kommen alles über die nächsten Wochen. Der Checkout ist ein komplexer, wichtiger Teil der Merchant und User Experience und um dieses Erlebnis noch besser zu machen, überarbeiten wir derzeit den Shopify Checkout von einem dreiseitigen Checkout zu einem einseitigen Checkout.

 

Es wird zuerst einen Winter Editions Early Access Programm für bestimmte Händler geben (ab mitte Q1) und danach wird der neue Checkout gestaffelt als GA (general availability) an alle Shops ausgerollt.

 

Mehr Infos habe ich derzeit nicht aber halte bitte Ausschau in unserem Changelog (https://changelog.shopify.com/).

 

Hoffe das hilft! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

D-PG
Shopify Partner
53 2 11

Hey @Gabe 

Grandios ;)... klingt super. Dann nimm uns mal bitte gerne unter die "bestimmten Händler" für das Early Access Programm mit auf 😋

 

VG 

DPG

Gabe
Shopify Staff
17394 2754 4063

Würde ich gerne aber das wird von unserem Product Team gezielt gemacht und da haben wir leider keinen Einfluss. Das ganze wird aber bald an alle ausgerollt!

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog