Breadcrumbs Checkout / Fortschrittsbalken

[D-PG]

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:

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

[Gabe · Accepted solution]

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.

[Gabe · Accepted solution]

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.

[D-PG]

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 · Accepted solution]

@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! 😉

[D-PG]

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]

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!