Erfolgreich
Schaltfläche
Erstellen Sie eine flexible Call-to-Action-Schaltfläche mit anpassbarem Stil, Symbol, Link und Optionen für die mobile Anzeige.
Verwenden Sie diesen Block, um innerhalb eines Abschnitts oder Blocks einen klaren Call-to-Action hinzuzufügen. Sie können es mit Text und einem Link einfach halten oder es mit einem Symbol, alternativen Stilen und gerätespezifischen Anzeigeoptionen visueller gestalten.
Grundeinstellungen
Abschnitt betitelt „Grundeinstellungen“Beginnen Sie mit dem Schaltflächentext und dem Link und passen Sie dann den visuellen Stil an, damit er zur gewünschten Hervorhebung der Aktion passt. Kräftigere Stile eignen sich am besten für primäre Aktionen, während schlichte oder sekundäre Stile zu unterstützenden Links und weniger hervorgehobenen Aktionen passen.
Sie können ein Emoji oder einen unterstützten Symbolnamen hinzufügen, um der Schaltfläche einen schnellen visuellen Hinweis zu geben. In den meisten Fällen sollte das Symbol die Beschriftung unterstützen und sie nicht ersetzen.
Das Layout steuert, wo das Symbol angezeigt wird oder ob die Schaltfläche nur das Symbol anzeigt. Schaltflächen nur mit Symbol funktionieren am besten, wenn die Bedeutung aus dem umgebenden Inhalt klar ist oder das Symbol allgemein bekannt ist.
Wenn Sie ein Layout nur mit Symbol verwenden, stellen Sie sicher, dass die Aktion auf einen Blick weiterhin leicht verständlich ist. Textbeschriftungen sind in der Regel klarer und barriereärmer.
Verwenden Sie die kleinere oder größere Größenvariante, wenn die Standard-Schaltfläche im Verhältnis zum umgebenden Inhalt zu groß oder zu klein wirkt. Große Stile können dazu beitragen, dass eine hervorgehobene Promotion auffällt, während kleine Stile besser in kompakten Layouts funktionieren.
Die mobile Option mit voller Breite macht die Schaltfläche auf kleineren Bildschirmen leichter antippbar. Das ist besonders nützlich in gestapelten Layouts oder Promotionsbereichen, in denen eine schmale Inline-Schaltfläche leicht übersehen werden könnte.
Wenn die Schaltfläche auf ein externes Ziel verweist, kann das Öffnen des Links in einem neuen Tab Kundinnen und Kunden helfen, ihre Position beizubehalten. Bei internen Zielen wirkt das Öffnen im selben Tab in der Regel natürlicher.
Standard-Block-Einstellungen
Abschnitt betitelt „Standard-Block-Einstellungen“Sichtbarkeitseinstellungen
Abschnitt betitelt „Sichtbarkeitseinstellungen“Sichtbarkeitseinstellungen ermöglichen es Ihnen, diesen Block auf dem Desktop oder auf Mobilgeräten ein- oder auszublenden. Das ist hilfreich, wenn Sie für verschiedene Bildschirmgrößen unterschiedliche Schaltflächenvarianten verwenden oder ein überfülltes mobiles Layout vereinfachen möchten. Informationen zum entsprechenden Verhalten im Theme-Editor finden Sie in der Shopify-Dokumentation zum Anpassen von Abschnitten
Siehe Sichtbarkeitseinstellungen für das gemeinsame Verhalten dieser Steuerelemente.
Nutzungshinweise
Abschnitt betitelt „Nutzungshinweise“- Verwenden Sie klaren Aktionstext. Wählen Sie Beschriftungen, die Kundinnen und Kunden genau sagen, was als Nächstes passiert, zum Beispiel Jetzt einkaufen, Mehr erfahren oder Einen Termin buchen.
- Passen Sie die Hervorhebung an die Priorität an. Reservieren Sie kräftigere oder größere Stile für die Hauptaktion und verwenden Sie dezentere Stile für sekundäre Links.
- Halten Sie Symbole unterstützend. Fügen Sie Symbole hinzu, um die Bedeutung zu verstärken, aber verlassen Sie sich nicht nur darauf, außer der Kontext macht die Aktion eindeutig erkennbar.
- Optimieren Sie für mobile Antippvorgänge. Aktivieren Sie die Anzeige in voller Breite, wenn die Schaltfläche mehr Präsenz oder leichteres Antippen auf kleinen Bildschirmen benötigt.
- Prüfen Sie Stil-Fallbacks. Lassen Sie Farben und visuelle Überschreibungen ungesetzt, wenn die Schaltfläche die Fallback-Formatierung des umgebenden Bereichs übernehmen soll; fügen Sie explizite Formatierungen nur hinzu, wenn sich die Schaltfläche von ihrem Container abheben soll.
- Prüfen Sie ausgeblendete Zustände. Wenn Sie den Block auf dem Desktop oder auf Mobilgeräten ausblenden, stellen Sie sicher, dass dieselbe Aktion auf diesem Gerät weiterhin an anderer Stelle verfügbar ist.