Button auf banner ändern

Deutsch Diskussion Shopify Design
,
1

Hallo zusammen. Ich habe mir von einem anderen theme ein Abschnitt kopiert und in meinem aktuellen theme eingefügt . Das Problem ist das der Button jetzt so durchsichtig aussieht und größer als bei dem anderen . Ich möchte den gerne auch so klein haben und füllig an Farben . Welchen css Code kann ich wo anwenden ? Ich bedanke mich recht, herzlich im Voraus.

IMG_3921.jpeg
IMG_3921.jpeg1179×953 71.8 KB

IMG_3920.jpeg
IMG_3920.jpeg1179×962 67.8 KB

2

Hey @SINRELLA

Danke für die Bilder und das habe ich jetzt in meinem eigene Testshop in der Dev Console getestet und folgender CSS hat in meinem Theme jegliche Transparenz im Button entfernt und auch den Button kleiner gemacht.

Um den Button vollständig undurchsichtig (nicht transparent) zu machen, setze die opacity-Eigenschaft auf 1. Wenn der Button eine Hintergrundfarbe hat, die teilweise transparent ist (z.B. RGBA), stelle sicher, dass die Alpha-Komponente auch auf 1 gesetzt ist.

Die Größe des Buttons kannst du durch Anpassung der padding, font-size, und eventuell border Eigenschaften steuern. Dies hängt von deinem gewünschten Aussehen des Buttons ab. Hier ein Beispiel CSS Code:

.banner-text .theme_buttons.banner_btn_t {
    opacity: 1; /* Entfernt die Transparenz */
    background-color: #ff0000; /* Setze bevorzugte Button-Farbe */
    color: #ffffff; /* Textfarbe des Buttons */
    padding: 10px 20px; /* Verkleinert den Button durch weniger Innenabstand */
    font-size: 14px; /* Kleinere Schriftgröße */
    border: none; /* Entfernt den Rahmen, falls vorhanden */
    /* Optional: Füge Übergänge für Hover-Effekte hinzu */
    transition: background-color 0.3s ease-in-out;
}
/* Hover-Effekt für den Button */
.banner-text .theme_buttons.banner_btn_t:hover {
    background-color: #e60000; /* Dunklere Farbe beim Darüberfahren */
}

Um eine spezifische Farbe oder Größe anzuwenden, die Werte der Elemente background-color, padding, und font-size entsprechend anpassen.

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:

Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd :hatching_chick: in das Shop einbauen, um deinen Kunden etwas Gamification und Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

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.

1 Like
3

Hey ich danke dir.. dürfte ich den Code auch bekommen und die Stelle, wo er eingefügt wird? Theme ist Ride. Ich danke dir

4

Hey, entschuldige. Der wurde mir gerade nicht angezeigt. Ich teste das mal umgehend und halte dich auf dem Laufenden.

5

Ich nochmal . Wo genau füge ich diesen ein ? Lg

6

@SINRELLA

Das kannst du wie folgt einfügen - unsere Anleitung erklärt das hier: Hinzufügen von benutzerdefiniertem CSS zu deinem Theme.

Und nicht vergessen, dass wir das ggf. :eyes: können als Teil deiner 60-Min Design Time dass du mit einem Shopify Free Theme bekommst, wenn du das an uns sendest.

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:

1 Like