FROM CACHE - de_header

Add to Cart Button + Menge zentrieren

tropicaloffice
Besucher
2 0 0

Hi,

 

wie kann ich die Menge und den Add to Cart button zentrieren, sodass die Payment Logos schön zentriert darunter liegen. (Nur für Desktop)

 

Payment Logos sind mit der App Vitals eingefügt.

 

Danke 🙂

5 ANTWORTEN 5

Finer
Shopify Expert
2071 438 742

@tropicaloffice Das kommt darauf an, welches Theme du verwendest.

Abgesehen davon, wirst du auch Anpassungen im Code bzw. in der CSS-Datei machen müssen. 

 

Welches Theme verwendest du denn gerade?

Kannst du einen Link zu deinem Shop zur Verfügung stellen?

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
Gabe
Shopify Staff
18047 2853 4197

Hey @tropicaloffice 

 

Wie @Finer sagt kommt das auf dein Theme drauf an.

 

Das kann man beispielsweise mit einem Code Snippet machen aber wie gesagt, ohne Gewähr (und immer zuerst in einer Theme Kopie vorher testen). Jegliche Änderungen schlagen sich meist auf die Desktop Version nieder und nicht auf die Mobile Ansicht.

 

Gehe zum Asset->/css.liquid-> füge ein Code wie das folgende ganz unten im Code ein und speichern. Da der Mengenbutton und der Add to Cart Button teil des Product description Grid sein kann, würde ein Code wie das folgende verwendet werden. Der wichtige Attribute ist hier width: auto falls du das in deinem code selber findest:

 

.product__description {
    width: auto;
}

ODER

.product_form {
margin: 0 auto;
width: auto;
}

 

Du musst halt die Class des Button div suchen so dass dies nicht alles andere durcheinander bringt. Oder suche, wo der Button Code product.liquid oder product-template.liquid auftritt und füge eine neue Class, oder div wie "product_add_btn" oder etwas Ähnliches und füge dann diesen style da ein. Die 250px ist deswegen, dass das Ganze nicht zu groß aussieht. 

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

tropicaloffice
Besucher
2 0 0

Ja ich weiss, sollte keine große Sache sein. Vllt hat jemand einen Code ?

 

Ich benutze das Out of the sandbox Theme Flex.

 

Hier die Produktseite, um die es geht. Auf Mobile ist alles gut, geht nur um Desktop.

 

https://leamer.de/products/leamer

 

 

Gabe
Shopify Staff
18047 2853 4197

Die andere weniger eingreifende Methode wäre es die Payment Icons auch links mit dem Rest des ganzen Grids auszurichten. Das würde dann wie folgt aussehen und, wie gesagt, keinen allzu grossen Eingriff in den Code verlangen:

 

image.png

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

Finer
Shopify Expert
2071 438 742

@tropicaloffice Im Grunde musst du nur folgenden Code nutzen, ohne dass die mobile Ansicht darunter leidet.

@media only screen and (min-width: 798px) {
 .purchase-details, .purchase-details__buttons {
   justify-content:center;
 }
}

 

ABER: Aus gestalterischen Gründen würde ich dir eher dazu raten, die Payment-Icons genauso wie alle anderen Elemente (Titel, Preis, Buttons, Auswahlfelder, etc...) linksbündig anzuordnen. Das sieht wesentlich aufgeräumter aus, als wenn du einige Elemente zentrierst und die anderen nicht. Daher wäre mein Tipp, dass du die Gestaltung und die Anordnung einheitlich hältst. Wie @Gabe bereits erwähnt hat, würde das ggf. weniger aufwand machen.

 

Hier wäre der Code, um die Payment-Buttons linksbündig anzuordnen. Da die Icons vermutlich über eine externe App eingebunden sind, müsste es die Möglichkeit geben innerhalb der Design-Settings die Position einzustellen. Alternativ gibt es eventuell eine Custom CSS Box, wo du den CSS Code eintragen kannst.

@media only screen and (min-width: 798px) {
.vtl-pl-main-widget {
text-align:left!important;
}
}

 

Ich hoffe, das hilft dir weiter.

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency