Shopify-Themes, Liquid, Logos und ähnliche Themen
hallo community!
ich nutze das theme DEBUT und möchte, wenn auf der produktseite VERSANDKOSTEN geklickt wird, sich diese information auf der gleichen seite öffnet - quasi als popup, analog wie im checkout, wenn einer der links (impressum, datenschutz etc) im footer angeklickt wird.
ich vermute das sich die lösung u.a. im product-template.liquid finden lässt um die zeile 120 habe ich entsprechende einträge gefunden, kann diese jedoch nicht so umbasteln, dass ich das gewünschte ergebnis auch erhalte - freue mich über lösungsansätze 🙂
danke & gruß aus'm ruhrpott
Hi @J-G
Gabe aus Shopify hier.
Kann ich auch voll verstehen da man will ja nicht, dass der Besucher von der Produktseite weggeleitet wird wenn er auf "zzgl. Versandkosten" klickt. Da wäre ein Pop-up oder Lightbox viel besser.
Diese Verlinkung betrifft aber leider das Core System und ist deshalb etwas komplizierter. Schicke doch ein Ticket an uns hier und wir können das gerne anschauen.
VG,
Gabe
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
Hallo zusammen,
wurde das Thema zwischenzeitlich angegangen und gelöst? Habe hier leider gerade dasselbe Problem.
Danke und Grüße!
Hey @bast
Darf ich fragen, was genau du erzielen möchtest und wo? Hast du ein Screenshot vielleicht?
Falls du den Versand Link von einem _self
link zu einem _blank
Attribute ändern möchtest dann gibt es ein paar Dinge zuerst zu beachten:
_blank
Attribute verwenden möchtest, da auf Handy die Browser Tabs nicht immer leicht sichtbar sind.So kann es schwierig sein, zurück zur Warenkorb Registerkarte zu gelangen, wenn der Zurück-Button nicht sichtbar oder verfügbar ist. Da mittlerweile über 70% des E-Commerce über Handy abgewickelt wird, könnte dies zu erheblich Absprungraten und Umsatzeinbußen führen. Also ggf. eine Bad Idea für deine Conversions?
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
Hey @Gabe,
vielen Dank für deine Rückmeldung.
Es geht in der Tat um ein Popup. Egal, ob auf der PDP oder im Checkout. Der Kunde wird aktuell aus seinem Kaufprozess gerissen, wenn er auf den Versandkosten-Link klickt, indem er auf eine neue Seite geschickt wird.
Hier ein Beispiel, wie ich es mir vorstelle: https://www.campz.de/campz-fleece-beanie-M470927.html Bei Klick auf den Link "zzgl. Versandkosten" geht eine Lightbox auf.
Ist das möglich?
Danke und Grüße!
Ich sehe was du meinst und ich habe deine Seite auf meinem Handy getestet und das ist in der Tat eine verbesserte Erfahrung da hast du recht.
Vielleicht können unsere Techniker dir dabei helfen da das ein Shopify Theme ist und du auf einem bezahlten Plan -> dann können wir das ggf. anschauen als Teil deiner 60-Min Design Time. Schicke uns eine E-Mail hier und füge bitte alle Details und Screenshot mit anbei.
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
Hi @Gabe,
ich habe das gleiche Problem - es wäre sinnvoller, wenn der Käufer nicht von der Produktseite auf die Versandkosten weitergeleitet würde, sondern ein Popup Fenster auf der Produktseite aufgehen würde. Ich verwende Impulse. Sollte ich mich da an den Anbieter wenden oder würdet Ihr das auch machen via Ticket?
Danke und ein schönes Wochenende.
Shopify supported das nicht. Du findest im Web einige Javascript Libraries mit denen du das Popup selber bauen kannst (in einer Theme Kopie), ist aber nicht einwandfrei. Hier der Diego, einer unserer top experten, zum Thema.
Einfachster Weg - App wie diese Demo hier, oder diese hier mit effektiven Popup Tool Tips beim Mouseover.
Super, danke für die rasche Antwort.
Ich habe das so gelöst (kein JS erforderlich):
In der theme.liquid ganz am Ende vor dem </body>:
{% if shop.shipping_policy %}
<div id="shipping" class="overlay">
<div class="popup">
<h1>{{ shop.shipping_policy.title }}</h1>
<a class="close" href="#">×</a>
<div class="content">
{{ shop.shipping_policy.body }}
</div>
</div>
</div>
{% endif %}
CSS (bei mir in einer eigenen Datei):
/* Content Modal */
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 9999;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
background-color: #fefefe;
margin: 5% auto;
padding: 2vw;
border: 10px solid rgb(255, 201, 0);
position: relative;
max-width: 90%;
width: 750px;
}
.popup .close {
position: absolute;
top: 0px;
right: 30px;
transition: all 200ms;
font-size: 45px;
font-weight: bold;
text-decoration: none;
color: #aaa;
}
.popup .close:hover {
color: #dd1d1d;
}
.popup .content {
max-height: 70vh;
overflow: auto;
}
.popup h1 {
margin: 1rem 0;
}
@media screen and (max-width: 749px) {
.popup {
width: 90%;
}
}
Dann die Standard-Theme-Texte bearbeiten:
Hier den Link anpassen:
<a href="#shipping">Versand</a>
Das wars. Hoffe es klappt bei euch auch.
Wie du eine intuitive und ansprechende Online-Shopping-Experience für deine Kunden au...
By Gabe Apr 1, 2024Shopify unterstützt die weltweit innovativsten Marken und Unternehmer:innen. Um Unterne...
By SarahF_Shopify Mar 25, 2024Was ist ein kleines Element eines Shopify Shops mit großer Wirkung? Ein Element ganz we...
By Kai Mar 14, 2024