Hey @TillBa
Tolles Theme, das Focal Theme, aber wenn es das nich that was du mit dem Button haben möchtest, dann wird das wesentlich mehr als ein einfaches CSS verlangen, sprich, ein ziemlich komplexes Coding sogar.
Um den "In den Warenkorb" Button neben der Mengenauswahl zu platzieren, ähnlich wie im Beispielshop mit dem Focal Theme, benötigst du spezifisches CSS und eventuell auch Änderungen am HTML-Layout deines Shops. Ich kann dir hier einen allgemeinen Ansatz beschreiben, den du dann an deinen spezifischen Fall anpassen musst.
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-Struktur analysieren: Zuerst solltest du die HTML-Struktur des Bereichs um die Mengenauswahl und den Warenkorb-Button herum überprüfen. Eventuell musst du die Struktur so anpassen, dass das Mengenauswahl-Element und der Button nebeneinander liegen können.
-
CSS Flexbox oder Grid verwenden: Moderne Layouts werden oft mit Flexbox oder Grid umgesetzt, da diese es einfacher machen, Elemente nebeneinander anzuordnen. Zum Beispiel:
.parent-element {
display: flex;
align-items: center; /* Dies zentriert die Elemente vertikal */
justify-content: space-between; /* Dies sorgt für Abstand zwischen den Elementen */
}
.quantity-selector,
.add-to-cart-button {
flex: 1; /* Hiermit nehmen beide Elemente den verfügbaren Platz ein */
}
-
Responsive Design beachten: Achte darauf, dass die Anordnung auch auf kleineren Bildschirmen gut aussieht. Eventuell musst du hierfür media queries verwenden, um das Layout auf mobilen Geräten anders zu gestalten.
-
Testen: Nachdem du die Änderungen vorgenommen hast, teste sie in verschiedenen Browsern und auf verschiedenen Geräten, um sicherzustellen, dass alles wie gewünscht funktioniert.
CSS Flexbox verwenden:
- Füge deinem
main.min.css Datei folgenden CSS Code hinzu, um den Button neben die Mengenauswahl zu setzen und die Elemente vertikal zu zentrieren:
.single-product-content .cart.nt_full {
display: flex !important;
align-items: center;
}
.add_to_cart_button {
margin-top: 0 !important;
}
Absolute Positionierung:
- Eine weitere Methode ist die Verwendung von absoluter Positionierung, um die Elemente genau zu positionieren. Der folgende Code kann als Beispiel dienen, wobei du die Werte entsprechend deines Layouts anpassen musst:
.product-form__quantity {
position: absolute;
top: 440px; /* oder ein anderer Wert, der für dein Layout passt */
}
.product-form__buttons {
width: calc(100% - 154px);
float: right;
margin-top: 15px;
}
@media (max-width: 749px) {
.product-form__quantity {
top: 407px !important;
}
}
Solltest du dich mit diesen Änderungen unwohl fühlen, ist es ratsam, einen Entwickler oder eine Agentur zu beauftragen, die sich auf Shopify-Themes spezialisiert hat. Diese können den Code deines spezifischen Themes prüfen und die nötigen Anpassungen vornehmen.
Quellen:
Hoffe das hilft dir weiter - lass wissen falls nicht! 😉
---
Habt ihr auch den Shop auf den Valentinstag 🫶 umgestellt? Jetzt ist die Zeit wo Online Shopper nach 🎁 für ihre ❤️ 👀!
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.
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
