Hallo Liebe Community,
ich würde gerne bei meinem Onlineshop auf der Startseite 3 Buttons auf meinem Heldenbanner hinzufügen. Hat dafür irgendjemand zufällig einen passenden CSS Code oder etwas ähnliches.
(Theme: Sahara)
Vielen Danke im Voraus 
Topic summary
Ein Nutzer möchte drei Buttons auf dem Heldenbanner (Hero Banner) der Startseite seines Shopify-Shops hinzufügen und fragt nach passendem CSS-Code oder ähnlichen Lösungen. Das verwendete Theme ist Sahara.
Empfohlene Lösungsansätze:
- Bereitstellung eines befristeten Vorschaulinks würde die Analyse erleichtern
- Nutzung von Apps (z.B. Multi-Slider)
- Manuelle Implementierung mit HTML (Button-Markup) und CSS (Styling und Positionierung)
Wichtige Hinweise:
- Änderungen immer zuerst in einer Themekopie/Testumgebung testen
- Backup des Themes erstellen vor Code-Bearbeitung
- Theme-Code-Änderungen können Page Loading Speeds negativ beeinflussen und Theme-Updates ausschließen
- Bei komplexeren Anpassungen wird empfohlen, einen zertifizierten Shopify-Experten zu engagieren
Technische Details:
Beispiel-Code wurde bereitgestellt (HTML-Markup für Buttons, CSS für Styling mit Farben, Padding, Positionierung, Hover-Effekte). Der CSS-Code sollte in theme.scss.liquid oder theme.css eingefügt werden, das HTML in theme.liquid oder entsprechende Templates. Farben, Positionierung und Links müssen individuell angepasst werden.
Hey @Dome30
Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink zu einem Beispiel sehr hilfreich das schneller zu analysieren und eine “passenden CSS Code oder etwas ähnliches” anbieten zu können.
Um drei Buttons auf deinem Heldenbanner in deinem Shopify-Shop hinzuzufügen, gibt es Apps, oder man benötigt etwas HTML, um die Buttons zu definieren, und CSS, um sie zu stylen und zu positionieren. Unten ein einfaches Beispiel, wie du das machen könntest.
Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.
Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!
HTML-Code: Du musst diesen Code in dein Heldenbanner einfügen. Dieser Schritt hängt davon ab, welches Theme du verwendest und wie dein Shopify-Shop aufgebaut ist. Normalerweise würdest du diesen Code in dein index.liquid oder theme.liquid Template einfügen, oder in ein HTML-Element, wenn dein Theme es unterstützt.
Button 1
Button 2
Button 3
Dieser Code kann in die theme.scss.liquid oder theme.css Datei deines Shopify-Themes eingefügt werden, um die Buttons zu stylen und zu positionieren:
/* Heldenbanner Buttons Stil */
.hero-buttons {
position: absolute;
top: 50%; /* oder wo auch immer auf deinem Banner */
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.hero-button {
display: inline-block;
margin: 0 10px; /* Abstand zwischen den Buttons */
padding: 10px 20px; /* Innenabstand der Buttons */
color: #fff; /* Textfarbe */
background-color: #333; /* Hintergrundfarbe der Buttons */
text-decoration: none; /* Entfernt die Unterstreichung */
text-transform: uppercase;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.hero-button:hover {
background-color: #555; /* Hintergrundfarbe der Buttons beim Hover */
}
Stelle sicher, dass du die DEIN-LINK-1, DEIN-LINK-2 und DEIN-LINK-3 mit den URLs ersetzt, auf die die Buttons verlinken sollen. Ebenfalls musst du die Farben (#fff für weiß, #333 für dunkelgrau usw.) und Positionierungen (top und left Werte) anpassen, um sie an dein Design anzupassen.
Alle weiteren Fragen bitte an einen unserer zertifizierten Experten leiten. Die können einen besseren Deep-Dive in deinen Theme Code machen was wir ja von hier nicht machen können, wie du wahrscheinlich verstehen kannst…
Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.