Vorgestellte Kategorie Größe

Deutsch Diskussion Shopify Design
6

Hey @wardbooks

Schwierig, aber lass uns das hier weiter :eyes: . 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.

20-00-e1iwf-tlvn5.png
20-00-e1iwf-tlvn5.png3494×1550 699 KB

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! :wink:

1 Like