FROM CACHE - de_header

"Add to cart" Button neben Mengenauswahl

"Add to cart" Button neben Mengenauswahl

TillBa
Tourist
21 0 2

Hallo liebe Shopify Community,

 

ich bräuchte einmal eure Hilfe in Form von CSS Kenntnissen. Ich möchte in meinem Shop aufgrund einer besseren Nutzerfreundlichkeit bzw. einfacheren Bedienung den "Add to Cart" Button neben der Mengenauswahl platzieren. Leider komme ich mit meinen CSS Kenntnissen nicht weiter und dachte, bevor ich eine Agentur dafür beauftrage, erstmal euch zu fragen.

 

Ich habe einen Store gefunden, der dies umgesetzt hat und ebenfalls das Focal Theme verwendet, siehe hier: https://www.nativeunion.com/products/reclear-case-for-iphone-15?variant=41577457614987

Anbei habe ich euch zwei Screenshots beigefügt, die sowohl die aktuelle Variante als auch das gewünschte Design beinhalten.

 

Shop_1.pngScreenshot 2024-02-03 115531.png

Mein Shop: https://baumann-weine.de

Verwendetes Theme: Focal

 

Vielen Dank!

1 ANTWORT 1

Gabe
Shopify Staff
18475 2895 4263

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!

 

  1. 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.

  2. 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 */
}

 

  1. 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.

  2. 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