Shopify-Themes, Liquid, Logos und ähnliche Themen
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 🙂
@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?
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
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
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:
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 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.
Teil 2 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 16, 2024Teil 1 - Wie die Prinzipien des UX-Designs dir dabei helfen können einen großartigen Shop ...
By Kai Sep 9, 2024Anpassungen des benutzerdefinierten Codes an Shopify-Themes (CSS) leicht gemachtIn diesem...
By Gabe Aug 28, 2024