Slideshow abschnitt Höhe ändern

Deutsch Diskussion Technische Fragen & Antworten
,

Topic summary

  • Problem: Der Abstand zwischen Slideshow und Kategorienliste auf der Startseite ist zu groß, obwohl Padding bereits auf 0 gesetzt wurde.

  • Vorgehen: Per Rechtsklick > Inspect in der Developer Console das verantwortliche Container-Element finden und CSS testen. Empfehlung, Anpassungen im Benutzerdefinierten CSS Block vorzunehmen, um Ladezeiten und Theme-Updates nicht zu beeinträchtigen.

  • Technische Spur: Unter dem Logo-/Slideshow-Bereich existiert offenbar ein leerer Container, der den zusätzlichen Abstand verursacht. Dieser kann testweise in DevTools entfernt oder im Theme (Liquid) auskommentiert werden ({% comment %} … {% endcomment %}).

  • Hinweise/Risiken: Es gab bereits mehrere Codeänderungen in der Vergangenheit; weitere manuelle Eingriffe können riskant sein. Deshalb möglichst keine direkten Theme-Code-Edits.

  • Support-Option: Theme „Ride“ berechtigt zu 60 Minuten Design Time. Support mit myshopify-URL und dem Bild kontaktieren und konkret um „Abstand Slideshow zu Kategorienliste verringern“ bitten.

  • Status: Nutzer hat den Support kontaktiert; Shop-Launch ist am 01.04.23 geplant, Vorschau wirkt normal. Ergebnis steht noch aus. (Screenshots und Code-Snippets sind zentral für das Verständnis.)

Summarized with AI on January 30. AI used: gpt-5.
1

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?

Screen.JPG
Screen.JPG1204×485 53.1 KB

2

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.

52512143-1d34-40a9-9389-d03a4d240c51.default.png
52512143-1d34-40a9-9389-d03a4d240c51.default.png288×322 16.4 KB

3

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?

4

@Joschi

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

finden:

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:

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.

5

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?

6

@Joschi

Welches theme ist das?

7

Ride

8

@Joschi

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.

9

Ok danke und da schreibe ich was?

das meine Codierung im Theme nicht mehr stimmen?

sorry kenne mich damit nicht so aus.

10

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.

11

Achso ok und was ist mit den anderen Codes? Du hattest geschrieben das die evtl mein Theme zerschießen?

12

@Joschi

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.

13

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.

14

Super die werde das hoffentlich heute im Laufe des Tages anschauen. Dieser Code ist wie gesagt der Logo Container:

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:

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 %}