FROM CACHE - de_header

Feature aus Free Theme in Paid Theme integrieren

Jaywe
Tourist
9 0 3

Hallo,

 

ich verstehe leider nicht sehr viel in Sachen Code, aber ich hätte mal eine grundsätzliche Frage, die bei mir sehr viele Fragen aufwirft. 

Ich habe mir vor ca. einer Woche das 'Spark' Theme gekauft und bin davon ausgegangen, dass Paid Themes auf Free Themes sozusagen aufbauen und sie einfach mit anderen features erweitern. Is anscheinend nicht so...

 

Ich habe leider sehr viele Produktbilder und man muss viel zu lange nach unten scrollen, um bei der mobile Version überhaupt zum Buy-Button zu kommen, da im Spark Theme jedes Thumbnail unter dem Main Image anzeigt.

Ich brauche also ein Thumbnail Carousel wie in den Free Themes. 

Shopify Support hat mich an den Theme Entwickler verwiesen, weil sie sich anscheinend mit Paid Themes nicht befassen und die haben mich dann an Shopify Experts und Freelancer verwiesen. Beide Kosten nochmal ordentlich.

 

Jetzt meine Frage: Ist es tatsächlich so schwer ein Feature wie das 'Thumbnail-Carousel' in ein anderes Theme zu integrieren? Ich meine es ist ja bestimmt nicht einfach Copy Paste, aber den Grundaufbau sollte man doch sicherlich übertragen können. Es beinhaltet ja immerhin kein JS und so komplex scheint es mir jetzt auch nicht. Vielleicht kennt jemand einen Guide oder kann mir die Problematik an der Sache erklären.

4 ANTWORTEN 4

Simonsron
Shopify Partner
699 87 122

En effet, si une rotation des images de produits est impliquée, elle sera conçue pour être liée aux variantes, car la plupart des affichages d'images de produits suivent les images de variantes.

 

Par exemple, l'affichage initial sera la première image du produit et lorsque vous cliquez sur une variante, l'image principale de cette variante s'affichera, c'est ce qui pose problème.

 

Que vous établissiez un lien vers une variante ou non, l'écriture d'une rotation distincte fera également appel à JavaScript.

banned
Jaywe
Tourist
9 0 3

Thank you for your reply.

I get that it wouldn't be an easy task if you would have to create such function from scratch. But the liquid code for this feature is accessible to everyone using shopify. Everyone can see and interact with the code in the code editor of e.g. the Dawn theme. Ultimately they all connect to the same Image library and variant pictures. 

Gabe
Shopify Staff
16797 2659 3935

Hey @Jaywe 

 

Da das hier der deutsche Technische-Fragen Leitfaden ist, werde ich hier auf Deutsch antworten.

 

Du möchtest also deine Varianten Bilder deines Spark Themes etwas effizienter mit einem Bilderkarussell auf Mobile anzeigen, um das viele Scrollen für deine Kunden zu reduzieren und somit die UX deines Shops zu verbessern. Das Spark Theme ist auch ein super Theme und damit wirst du ein tolles Shop aufbauen! Sehr zu empfehlen...

 

Und du sagst du brauchst ein "Thumbnail Carousel" wie in den Free Themes, sprich, Produkte nebeneinander (mit einem Pfeil?) anstatt untereinander zu platzieren. Also mit links-rechts Pfeile auf Handy anstatt das viele runterscrollen um die Bilder anzusehen. Wenn das nicht in deinen Theme Einstellungen geht -> hast du die Theme Einstellungen durchgekämmt (manchmal gibt es das aber man muss es finden...)?

 

Um einen Produktbilder Karussell im Theme für "Mobile Only" einzubauen wird eine größere Programmierung verlangen und wir haben Experten die dir dabei helfen können. Eine App die das viele schneller und reibungsloser für dich machen kann siehst du hier.

 

DIY im Code machen - ohne Gewähr und bitte nur in einer Testumgebung testen mit einen Experten, nicht im Live-Theme:

Es kann schwierig sein, ein Feature wie das Thumbnail-Carousel in ein Theme selber zu integrieren, da jedes Theme anders aufgebaut ist und unterschiedliche Technologien verwendet. Es gibt auch verschiedene Arten von Thumbnail-Carousels, die unterschiedliche Codierungsanforderungen haben können.

 

Wenn das benötigte Feature nicht im Theme enthalten ist, muss man es manuell hinzufügen oder von einem Entwickler hinzufügen lassen (siehe Link ganz unten). Wenn du nicht über die erforderlichen technischen Maßnahmen verfügst, ist es ratsam, einen Shopify-Expert oder einen Freelancer zu engagieren, um das Feature einzubauen.

 

Es ist auch wichtig zu beachten, dass jeder zusätzliche Code, potenziell die Ladezeit der Website erhöht und sich auf die Leistung auswirken kann. Daher ist es wichtig, sicherzustellen, dass der Code effizient und optimiert ist. Es kann außerdem dein Theme aus den Theme Updates ausschließen. 

 

Hier ist ein Beispiel für HTML-Code, um ein Thumbnail-Carousel zu erstellen:

 

<div class="thumbnail-carousel">
  <div class="main-image">
    <img src="main-image.jpg" alt="Main Image">
  </div>
  <div class="thumbnails">
    <div class="thumbnail-item">
      <img src="thumbnail1.jpg" alt="Thumbnail 1">
    </div>
    <div class="thumbnail-item">
      <img src="thumbnail2.jpg" alt="Thumbnail 2">
    </div>
    <div class="thumbnail-item">
      <img src="thumbnail3.jpg" alt="Thumbnail 3">
    </div>
  </div>
</div>

 

Die "thumbnail-carousel" ist der Container, der sowohl das Hauptbild als auch die Miniaturansichten enthält. Die "main-image" Class zeigt das Hauptbild an, während die "thumbnails" Class den Container für die Miniaturansichten darstellt. Die "thumbnail-item" ist das Element, das jede Miniaturansicht enthält.

 

Hier ist ein Beispiel für CSS-Code, um das Thumbnail-Carousel zu stylen:

 

.thumbnail-carousel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
}

.main-image img {
  max-width: 100%;
  height: auto;
}

.thumbnails {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.thumbnail-item {
  margin: 0 10px;
  cursor: pointer;
}

.thumbnail-item img {
  max-width: 100%;
  height: auto;
  opacity: 0.6;
  transition: opacity 0.3s ease-in-out;
}

.thumbnail-item.active img {
  opacity: 1;
}

 

Man kann diese CSS-Regeln anpassen, um das Aussehen des Carousels an das Theme anzupassen.

 

Und hier ist ein Beispiel für JavaScript-Code, um das Thumbnail-Carousel funktionsfähig zu machen:

 

$('.thumbnail-item').click(function() {
  var img_src=$(this).find('img').attr('src');
  $('.main-image img').attr('src', img_src);
  $('.thumbnail-item').removeClass('active');
  $(this).addClass('active');
});

 

Der Javascript verwendet jQuery, um auf Klick-Ereignisse zu reagieren. Wenn ein Benutzer auf eine Miniaturansicht klickt, wird das entsprechende Bild im Hauptbildbereich angezeigt und die aktive Klasse auf das geklickte Element angewendet.

 

Hinweis:

Die obigen Snippets sind ohne Gewähr und nur Beispiele um euch in die richtige Richtung zu lenken und muss je nach Theme-Anforderungen angepasst werden. Es wird auch empfohlen, den Code in einer separaten JavaScript-Datei zu speichern und in das Theme von da aus einzubinden.

 

Wie gesagt, einen Experten kann dir dabei helfen und wenn du deine Frage in unserer privaten FB Gruppe hier postest dann wird sich einer melden.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Jaywe
Tourist
9 0 3

Hi @Gabe,

vielen Dank für deine ausführliche Antwort. Ich habe tatsächlich bereits einen Expert dazu beauftragt dieses Feature zu implementieren. Es war aber leider etwas zu 'fancy' und komplex für meine Begriffe. Ich fand dass es nicht in die 'optische Landschaft' meines Themes gepasst hat. Ich weiss aber dass er sich sehr viel Zeit dafür genommen hat und ich habe auch einen fairen Preis bekommen, deswegen will ich mich nicht beschweren. Er hat sehr gute Arbeit geleistet. Aber 3 oder 4 neue JS libraries und bounce back Effekte usw. war mir etwas zu viel für ein einziges feature und tut sicherlich auch der Performance meiner Website nicht so gut wie du schon gesagt hast.

Deswegen wollte ich mich hier im Forum mal umhören ob sich hier jemand mit features aus den free themes vielleicht auskennt und weiss wie diese hauptsächlich JS technisch aufgebaut sind.