ℹ️ Note: Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team.

Möchten Sie, dass Ihre Free Shipping Bar perfekt zum Branding Ihres Shops passt? 🎨

Während der Design-Tab umfangreiche Styling-Steuerelemente enthält, Custom CSS bietet zusätzliche Flexibilität für erweiterte visuelle Anpassung.

Egal, ob Sie Typografie anpassen, Abstand verfeinern, Animationen hinzufügen, mobile spezifische Layouts erstellen oder themenspezifische Stylingkonflikte lösen, Custom CSS gibt Ihnen eine größere Kontrolle darüber, wie Ihre Free Shipping Bar auf der Storefront erscheint.

⚠️ Bevor Sie beginnen

Vor der Verwendung von Custom CSS:

• Stellen Sie sicher, dass Sie bereits ein Free Shipping Upsell-Setup erstellt haben.
• Stellen Sie sicher, dass Sie Zugang zum Design Tab.
• Haben Sie ein grundlegendes Verständnis von CSS oder Zugang zu einem Entwickler.

⚠️ Wichtig:

Custom CSS ist für alle unterstützten Platzierungstypen verfügbar, außer Checkout Seite Platzierungen.

Unterstützte Placements umfassen:

• Produktseite
• Warenkorbseite
• Warenkorbschublade
• Banner (oben und unten)

🛠️ Schritt 1 - Öffnen Sie den Design Tab

Offen Hoppy Free Shipping App und navigieren Sie zum Free Shipping Upsell-Setup, das Sie anpassen möchten.

Dann:

➡️ Klicken Sie Design Tab.

Scrollen Sie nach unten, bis Sie die Custom CSS Schnitt.

Dieser Abschnitt befindet sich normalerweise unter den Konfigurationseinstellungen Typografie, Fortschrittsleiste, Schaltfläche und Upsell.

🎨 Schritt 2 - Öffnen Sie den Custom CSS Editor

Innerhalb der Custom CSS Abschnitt finden Sie:

• Ein CSS Editor
• A View Guide Taste
• An Beantragen Taste
• Ein Starter CSS Template

Die Vorlage enthält häufig verwendete Selektoren, die angepasst werden können, ohne dass Storefront-Elemente manuell inspiziert werden müssen.

🎯 Schritt 3 - Verstehen Sie die verfügbaren Selektoren

Die Startervorlage enthält mehrere Selektoren, die auf verschiedene Free Shipping Bar-Elemente abzielen.

Verfügbare Selektoren

Auswahl

Beschreibung

.futureblink-free-shipping

Gesamter freier Versandbar-Container

.futureblink-message

Fortschrittsmeldung

.futureblink-icon

Icon wird mit der Nachricht angezeigt

.futureblink-cta-button

Call-to-Action-Button

.futureblink-price-text

Hervorgehobener Preis oder Fortschrittswert

Mobile Selektoren

Für mobile-spezifische Styling, verwenden Sie die .mobile Variation.

Auswahl

Beschreibung

.futureblink-free-shipping.mobile .futureblink-message

Mobile Fortschrittsmeldung

.futureblink-free-shipping.mobile .futureblink-icon

Mobiles Icon

.futureblink-free-shipping.mobile .futureblink-cta-button

Mobiler CTA-Button

.futureblink-free-shipping.mobile .futureblink-price-text

Mobiler Preis/Progress Text

💡 Sie müssen nur die Selektoren anpassen, die für Ihre Designanforderungen relevant sind.

✍️ Schritt 4 - Fügen Sie Ihr benutzerdefiniertes CSS hinzu

Geben Sie Ihre CSS-Regeln im Editor ein.

Beispiel 1 — Passen Sie die Fortschrittsnachricht an

.futureblink-free-shipping .futureblink-message {
font-size: 18px;
color: #ff6600;
}

Beispiel 2 — Anpassen der CTA-Taste

.futureblink-free-shipping .futureblink-cta-button {
background-color: #000000;
color: #ffffff;
border-radius: 20px;
}

Beispiel 3 — Mobile-Specific Styling

.futureblink-free-shipping.mobile .futureblink-message {
font-size: 14px;
}

💡 Beginnen Sie zuerst mit kleinen Styling-Änderungen und erweitern Sie dann Ihr CSS nach Bedarf.

✅ Schritt 5 - Wenden Sie Ihr CSS an

Nach Eingabe Ihres CSS:

➡️ Klicken Beantragen.

Die Vorschau wird automatisch aktualisiert, sodass Sie die Stylingänderungen sofort überprüfen können.

Wenn Sie Ihr benutzerdefiniertes Styling entfernen möchten:

➡️ Klicken Zurücksetzen.

Dadurch wird die Standardvorlage wiederhergestellt und das benutzerdefinierte CSS deaktiviert.

👀 Schritt 6 - Überprüfen Sie die Vorschau

Nach der Anwendung Ihres CSS:

➡️ Überprüfen Sie die Vorschau innerhalb der App.

Prüfen Sie, ob

• Text wird korrekt angezeigt.
• Knöpfe erscheinen wie erwartet.
• Icons bleiben ausgerichtet.
• Farben und Abstand passen zu Ihrem Branding.

Falls Anpassungen erforderlich sind:

➡️ Aktualisieren Sie das CSS.

➡️ Klicken Beantragen noch einmal.

Die Vorschau wird nach jeder Änderung automatisch aktualisiert.

💾 Schritt 7 — Speichern und Veröffentlichen

Sobald Sie mit dem Design zufrieden sind:

➡️ Klicken Sparen.

➡️ Klicken Veröffentlichen.

⚠️ Sparen allein aktualisiert die Storefront nicht.

Das Free Shipping Upsell Setup muss ebenfalls veröffentlicht werden, bevor Kunden die Änderungen sehen können.

⚠️ Wichtige Hinweise

Automatisches !wichtiges Handling

Wenn Stile auf der Storefront gerendert werden, fügt die App automatisch hinzu !important Vorrang vor CSS-Deklarationen.

Dies hilft sicherzustellen, dass Ihre benutzerdefinierten Stile Vorrang vor Theme Styling haben.

Wenn Stile nicht erscheinen

In seltenen Fällen, in denen Themenstile dominant bleiben, können Sie manuell hinzufügen !important Im Editor.

Beispiel:

.futureblink-free-shipping .futureblink-message
Schriftgröße: 18px !wichtig;
Farbe: #ff6600 !wichtig;
}

Automatisches mobiles Handling

Jeder Selektor, der die .mobile Variation wird automatisch in eine mobile Medienabfrage eingewickelt, wenn sie auf der Storefront gerendert wird.

Sie müssen keine Responsive Breakpoints für diese Selektoren manuell erstellen.

Checkout Page Limitation

Custom CSS ist nicht für Checkout Page Platzierungen verfügbar, weil Shopify schränkt benutzerdefinierte CSS-Injektion in Checkout-Umgebungen ein.

CSS-Validierung

Der Editor validiert keine CSS-Syntax.

Wenn ein Stil nicht korrekt angewendet wird:

➡️ Überprüfen Sie Selektornamen.

➡️ Prüfen Sie Zahnspangen und Semikolons.

➡️ Überprüfen Sie das CSS auf Syntaxfehler.

❓ Fehlerbehebung

Wenn Ihre Styles nicht korrekt erscheinen:

➡️ bestätigen, dass Beantragen wurde angeklickt.

➡️ Überprüfen Sie, ob das Setup wurde Gerettet und Veröffentlicht.

➡️ Überprüfen Sie, ob die Selektornamen genau mit der bereitgestellten Vorlage übereinstimmen.

➡️ Testen Sie in einem Incognito- oder Private-Browserfenster.

➡️ Erfrischen Sie die Storefront, um zwischengespeicherte Stile zu löschen.

🎉 Endergebnis

✅ Ihre kostenlose Versandleiste kann über die Standard-Designeinstellungen hinaus angepasst werden.

✅ Desktop- und mobile Erlebnisse können unabhängig gestaltet werden.

✅ Benutzerdefinierte Typografie, Abstand, Farben und Animationen werden vollständig unterstützt.

✅ Die Free Shipping Bar kann enger an das Branding Ihres Shops angepasst werden.

Benutzerdefiniertes CSS bietet zusätzliche Flexibilität, wenn die eingebauten Design-Steuerelemente nicht ausreichen, und hilft, ein polierteres und konsistenteres Storefront-Erlebnis zu schaffen. ✨

Aktualisiert am: 10/09/2026