Bilder auf Produktseite größer darstellen

Deutsch Diskussion Shopify-Diskussionen
1

Hallo, ich verwende das Kalles Theme und würde gerne meine Bilder auf der Produkseite/Artikeldetailseite größer darstellen.

Ist das irgendwie möglich?

Lieben Dank

2

Hey @mayson1

Leider kenne ich das “Kalles” Theme gar nicht (Themeforest?) und es wird scheinbar auch nicht von uns unterstützt.

The4 scheinen das Theme zu unterstützen. Haben deren Entwickler dir helfen können? Wenn man Sachen ändern möchte, wie die Bildergrößen, muss man schauen, dass es v. a. auf Handy dann auch ok aussieht. Um das zu machen muss man in den Code eingreifen und hier werden meist fortgeschrittene Coding Skills verlangt. Das macht man auch meistens in der Themekopie zuerst und nicht im Live Theme.

DIY

Wenn du das aber lieber selber probieren (do-it-yourself) möchtest dann ab ins Code aber, wie gesagt in einer Theme Kopie zuerst testen! Siehe ein paar Leitfäden die dir vielleicht helfen können hier.

Du kannst z. B. den folgenden Code im .css einfügen, aber ohne Gewähr denn jedes Theme ist ja etwas anders in der Code Struktur:

.large--one-quarter {
 width: 60%;
}

Das obige Code ist aber wie man sieht nicht responsive und die folgenden 2 Codebeispiele sind Beispiele wie man das mit responsive im .css machen kann (aber, wie gesagt, ohne Gewähr):

@media screen and (max-width: 760px) {
  .grid--uniform>.grid__item {
     padding-left: 10px;
  }
  .grid--uniform {
     margin-left: -10px;
  }
}

@media screen and (max-width: 760px) {
  .grid.grid--uniform {
    margin-left: -40px;
    position: relative;
    left: 15px;
  }
  .main-content {
    overflow: unset!important;
  }
} 

SCSS-Support in Themes ist jetzt auch veraltet also wandelt man die .scss und .scss.liquid Dateien für eine bessere Leistung des Onlineshops und Theme-Editors in .css oder .css.liquid Dateien um. Die Produktbilder kann man auch in der Galerieansicht größer darstellen. Folgendes Code:

{% assign grid_item_width = 'wide--one-fifth large--one-quarter medium-down--one-half' %}

In das hier ändern:

{% assign grid_item_width = 'wide--one-third large--one-third medium-down--one-half' %}

Allerdings sind da die Bilder nur in der Desktop Ansicht größer. Damit muss man selber basteln bis es klappt.