Vorgestellte Kategorie Größe

[wardbooks]

Hi, 

also ich versuche die Größe der Vorgestellte Kategorie im Karussell zu ändern, sodass nicht nur zwei Produkte im Porträt Bildverhältnis zu sehen sind sondern drei neben einander (verkleinert) ohne es nach rechts oder links wischen zu müssen. Wie kann man auch unter den Produkten den Zähler entfernen? Und den Autorotieren des Karussells, also wie man das bei der Slideshow machen kann, aber nur ohne Zähler unten? 

[Gabe]

Hey @wardbooks 

Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller zu analysieren.

Das Thema Slide Zähler aus diesem Abschnitt ausblenden haben wir bereits mehrmals besprochen und vielleicht hilft dir dieser Thread dazu hier.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

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.

[wardbooks]

Hi, 

danke es hat mit den Zähler geklappt. 
hier ist den Link: 

https://t2ijdg7qcyxq9lrf-79703998797.shopifypreview.com

Hier ist ein Beispiel wie ich es meine: 

https://ketabklbabk.com

also, dass die vorgestellte Kategorie kleiner wird und von sich alleine verschiebt. 
Ich habe es mit den Codes versucht, aber leider hat es nicht funktioniert. Haben Sie vielleicht Tipps wie ich es machen kann? 

[Gabe]

Was hälst du von diesen Templates ? Ich würde sie nicht von alleine verschieben lassen denn das kann den Kunden verwirren wenn dieser in ein Produkt klicken möchte und es auf einmal sich alles automatisch verschiebt. Kann zu einer Reibung in der UX führen.

[wardbooks]

Gibt es nichts was man in der CSS Schreiben könnte, um die Kategorie kleiner zu machen?

[Gabe]

Hey @wardbooks 

Schwierig, aber lass uns das hier weiter 👀. Und welchen Code hast du bereits ausprobiert und wo hast du diesen her?

CSS bedeutet soviel wie Stylesheet, sprich, den Stil oder Look der einzelnen Page Elemente gestalten, wie Farben, Font usw. oder bestimmte Dinge ausblenden. In diesem Fall möchtest du das ganze Product Grid in der Größe ändern was ja in das Theme ge-hardcodet ist und was das CSS überfordern oder an dessen Grenze schieben würde. 

Du müsstest somit CSS in Kombi mit JS verwenden, wie z. B. die Größe der verschiedenen Elemente innerhalb des Karussells anpassen, wie drei Spalten nebeneinander (wenn das nicht in den Theme Einstellungen geht), mit einem CSS wie:

/* CSS für das Karussell anpassen */
.grid--5-col-desktop {
  grid-template-columns: repeat(3, 1fr); /* Anzahl der Spalten auf 3 setzen */
  gap: 10px; /* Optional: Abstand zwischen den Produkten anpassen */
}

.slider__slide {
  width: calc(100% / 3); /* Breite jedes Produkts auf ein Drittel des Karussells setzen */
}

Wenn der Zähler unter den Produkten angezeigt wird, kannst du ihn durch CSS ausblenden:

/* CSS, um den Zähler auszublenden */
.slider__pagination {
  display: none;
}

Um das Karussell automatisch scrollen zu lassen, ein wenig JavaScript hinzufügen, um das Karussell automatisch von Slide zu Slide wechseln, ohne dass der Benutzer wischen muss:

// JavaScript für automatische Rotation des Karussells
document.addEventListener('DOMContentLoaded', function () {
  const slider = document.querySelector('#Slider-template--23291932475725__8e3fbdab-78e6-49f7-bb05-e72c6645c7d5');
  let index = 0;
  const slides = slider.querySelectorAll('.slider__slide');
  const totalSlides = slides.length;

  function autoRotate() {
    slides[index].classList.remove('active');
    index = (index + 1) % totalSlides;
    slides[index].classList.add('active');
    slider.scrollTo({
      left: slides[index].offsetLeft,
      behavior: 'smooth'
    });
  }

  setInterval(autoRotate, 3000); // Alle 3 Sekunden wechseln
});

Wenn du sicherstellen möchtest, dass keine Pfeile oder Zähler angezeigt werden, kannst du dies durch folgende CSS-Regel tun:

.slider__arrows,
.slider__dots {
  display: none;
}

Dann um sicher zu stellen, dass die Responsive UI für alle Bildschirmgrößen, wie Desktop und Mobile, korrekt funktioniert mit etwas Media Query:

@media (max-width: 990px) {
  .grid--5-col-desktop {
    grid-template-columns: repeat(2, 1fr); /* Auf Tablets 2 Spalten */
  }

  .slider__slide {
    width: calc(100% / 2); /* Breite auf Tablets anpassen */
  }
}

@media (max-width: 750px) {
  .grid--5-col-desktop {
    grid-template-columns: 1fr; /* Auf Mobilgeräten nur eine Spalte */
  }

  .slider__slide {
    width: 100%; /* Volle Breite auf Mobilgeräten */
  }
}

Aber stelle deine Frage in unseren Experten Design Forum hier, auf Englisch und mit einem Beispiel und deinen obigen Links, und es wird dir eine Programmierer bestimmt helfen können.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉