:spreadshop: Tipps und Tricks: Die besten Lifehacks

Deutsch Spreadshop
, , , , ,
3

Bild auf der Startseite austauschen

Das ist viel einfacher mit Javascript und der Javascript-Integration des Spreadshops, aber es geht auch umständlich über CSS:

Vorher:

08
08600×786 167 KB

Nachher:

23
23626×686 230 KB

Code:

.sprd-startpage-product-preview__preview:nth-of-type(1) .sprd-img-spinner__image {
  content: url('https://image.spreadshirtmedia.net/image-server/v1/products/136584081/views/1,width=500,height=500,appearanceId=366,crop=list,modelId=85')
}

Erklärung:

  • nth-of-type(1) bedeutet: nehme das erste Element 1 von allen Bildern der Startseite. Wenn man nur das zweite Bild austauschen möchte wäre es 2,…
  • content:url('') bedeutet: Ersetze den Pfad des vorherigen Bildes mit dem neuen. In der Regel reicht es schon den Link des alten Motivs (XXL-Shirt) zu nehmen und die modelId und appearanceId zu ändern. Hier gebe ich aber gerne Hilfestellung :slight_smile:

55
552398×822 361 KB

Wichtig:
Es muss ein Bild vom Spreadshirt-Server sein, dass heißt ihr könnt auch ein x-beliebiges Bild nehmen, solltet es aber vorher auf Spreadshirt hochladen. Also Beispielsweise ein anderes Vorschaubild, Mockup, Design oder Rechnungslogo. Leider kann man keine eigenen Bilder mehr hochladen :frowning:
Das ganze sieht natürlich anders aus, wenn ihr den Shop per Javascript einbindet :wink:

4 Likes
Tipps und Tricks: Die besten Lifehacks Q&A