Liquid, JavaScript, Themes
Hallo
Ich hade da ein Problem und zwar möchte ich ein Bild was ich erstellt habe "mit Icon´s und Text" auf meine Startseite einfügen. Nun habe ich etwas rum probiert und habe dafür die Slideshow genommen, hier wurde mir das Bild am besten angezeigt. Nun ist mir der Abstand von der Slideshow zu meiner Kategorienliste etwas zu viel das möchte ich gerne verringern. Ich habe bei beiden (Kategieliste und Slideshow) das Padding bereits auf 0 gesetzt aber der Abstand passt trotzdem nicht.
Wie und wo kann ich den Abstand verringern?
Oder gibt es sogar eine andere Lösung?
Hey @Joschi
Danke für die Angaben und an dieser Stelle wirst du einen Experten konsultieren müssen denn dein Theme Code ist mittlerweile stark geändert und jegliche weitere Änderungen können dein Theme komplett zerschießen.
Trotzdem mit einem Rechts-klick auf die genaue Stelle -> "Inspect" -> in der Developer console -> Elements Tab, wirst du die genaue Stelle im HTML und auch im CSS finden und da kannst du das Padding reduzieren um zu sehen ob das klappt.
Wir empfehlen Themes nicht mehr im Code anzupassen sondern stattdessen nur im neuen Benuzterdefinierten CSS Block. Auf diesem Weg werden jegliche Anpassungen 1) die Page Loading Speeds NICHT negativ beeinflussen und 2) dein Theme NICHT aus den Theme Updates ausschließen.
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
Hallo @Gabe
@danke für deine Antwort. Was meinst du mit mein Theme Code ist stark verändert? Ich habe nichts an den Codes geändert.
Das vom Screenshot ist nur das Slideshow Element wo ich das Padding rechts in den Einstellungen reduziert hatte.
dann würde ich das benutzerdefinierte CSS natürlich bevorzugen? Wie kann ich das denn umsetzen das ist dieses Bild oben einsetzen kann?
Alleine in diesem Leitfaden hast du einige Code Änderungen vorgenommen. Dann gibt es ca. 5 weitere Leitfaden wo du nach Empfehlungen für Codeänderung gefragt und umgesetzt hast. Oder sehe ich das falsch?
Wenn du in der Developer Console -> Inspect auf dieses Container Element klickst dann wirst du etwas wie die folgende <div class> finden:
<div class="slideshow__media banner__media media"><img src="//cdn.shopify.com/s/........v=1679423563&width=3840 3840w" height="103" loading="lazy" sizes="100vw">
</div>
Dieser Container ist der wo deine Logos enthalten sind. Unterhalb diesen Container wirst du einen weiteren Container finden der ggf. leer ist und etwas wie die folgende Div Class aussieht:
<div class="slideshow__text-wrapper banner__content banner__content--middle-center page-width banner--desktop-transparent">
<div class="slideshow__text banner__box content-container content-container--full-width-mobile color-background-1 gradient slideshow__text--center slideshow__text-mobile--center"></div>
</div>
Im Grunde ist dieser Container leer und kann man ggf. ganz entfernen/löschen (aber immer zuerst in einer Kopie des Theme testen). Kann ich dir gerne zeigen wenn du mir einen befristeten Vorschaulink sendest.
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
Achso ja da hattet ich nach Anleitung den Code geändert. Dachte du meinst die Codes aus diesem Thread hier, sorry.
also muss ich den Support anschreiben damit die meine Theme Codes kontrollieren?
Dann werde ich das mit der Slideshow wohl lassen wenn mir das zu kompliziert wird.
Gibt es denn eine andere Möglichkeit oder App wo ich dieses Bild mit Icon und Schrift dort einsetzen kann?
Welches theme ist das?
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
Ride
Ok du hast somit 60-Min Design Time also sende bitte eine E-Mail an unseren Support hier (https://bit.ly/3cwO7ym) von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, können sie dir weiterhelfen.
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
Ok danke und da schreibe ich was?
das meine Codierung im Theme nicht mehr stimmen?
sorry kenne mich damit nicht so aus.
Ok sende denen dein Bild und frage ob sie als Teil deines Design Time den Abstand von der Slideshow zu deiner Kategorienliste verringern können. Nur das.
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
Achso ok und was ist mit den anderen Codes? Du hattest geschrieben das die evtl mein Theme zerschießen?
Wenn dein Theme funzt dann ist alles ok. Ich dachte mehr dass du weitere Änderungen zum Theme machen wolltest was riskant ist.
Der Support kann für dich aber auch andere Dinge anschauen die du gerne gemacht haben möchtest solange sie Teil der oben-verlinkten Design Richtlinie sind.
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
Hallo @Gabe ich habe nun den Support angeschrieben, vielen Dank für dein Mühe.
Mein Shop ist ja noch nicht online, erst zum 01.04.23 aber in der Vorschau des Theme sieht alles normal aus. Denke also das alles noch funktioniert.
Super die werde das hoffentlich heute im Laufe des Tages anschauen. Dieser Code ist wie gesagt der Logo Container:
<div class="slideshow__media banner__media media"><img src="//cdn.shopify.com/s/........v=1679423563&width=3840 3840w" height="103" loading="lazy" sizes="100vw">
</div>
Und dieser ist der leere Container direkt darunter der, wenn man in der Dev Console auf "Delete Element" klickt, komplett verschwindet es so wie du es haben möchtest denke ich mal:
<div class="slideshow__text-wrapper banner__content banner__content--middle-center page-width banner--desktop-transparent">
<div class="slideshow__text banner__box content-container content-container--full-width-mobile color-background-1 gradient slideshow__text--center slideshow__text-mobile--center"></div>
</div>
Somit kann man diesen Code im Liquid einfach auskommentieren mit:
{% comment %}
<div class="slideshow__text-wrapper banner__content banner__content--middle-center page-width banner--desktop-transparent">
<div class="slideshow__text banner__box content-container content-container--full-width-mobile color-background-1 gradient slideshow__text--center slideshow__text-mobile--center"></div>
</div>
{% endcomment %}
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
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