FROM CACHE - de_header
Diese Community hat auf Peer-to-Peer-Support umgestellt. Der Shopify Support wird diese Community nicht mehr betreuen. Wir empfehlen dir, dich mit anderen Händler:innen und Partner:innen in Verbindung zu setzen, um Unterstützung zu erhalten und Erfahrungen auszutauschen. Bitte melde weiterhin alles, was gegen unseren Verhaltenskodex verstößt, oder Inhalte, die deiner Meinung nach entfernt werden sollten.

Mouseover für Produktfotos im Theme Narrative

Mouseover für Produktfotos im Theme Narrative

ouisa
Besucher
3 0 1

Hallo,

ist es möglich im Theme Narrative ein Mouseover bei den Produktfotos anzulegen, so das beim drüber fahren ein zweites Foto erscheint?

Danke vorab für die Hilfe.

2 ANTWORTEN 2

r8r
Shopify Partner
2555 327 944

Ouisa,

meines Wissens ist das kein Standardfeature der aktuellen Narrative-Version. Nachträglich ergänzen kann man so eine Funktionalität durch entsprechenden Programmieraufwand natürlich schon.

Liebe Grüße, Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte

snenji
Tourist
8 0 2

Hallo!

Also erster gehst du bei Online Shop auf Code bearbeiten und dann gibts ja 7 Überkategorien Layout Templates usw. du gehst zu Assets und dann auf theme.scss.liquid 

und dann scrollst du ganz am ende und fügst diesen Code hinzu 

Spoiler

/* ===============================================

// Reveal module

// =============================================== */

.has-secondary.grid-view-item__link img.secondary{

 display:none;

}

 

.has-secondary.grid-view-item__link:hover img.secondary{

 display:block;

}

 

.has-secondary.grid-view-item__link:hover img.grid-view-item__image{

 display:none;

}

 

@media screen and (min-width:767px){

.has-secondary.grid-view-item__link img.secondary{

 display:none;

}

 

.has-secondary.grid-view-item__link:hover img.secondary{

 display:block;

}

 

.has-secondary.grid-view-item__link:hover img.grid-view-item__image{

 display:none;

}

}

 

@media screen and (max-width:767px){

.has-secondary.grid-view-item__link img.secondary{

 display:none;

}

}

 

2.

{% unless grid_image_width %}

  {%- assign grid_image_width = '600x600' -%}

{% endunless %}

<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">

  <a class="grid-view-item__link {% if product.images.size > 1 %} has-secondary{% endif %}" href="{{ product.url | within: collection }}">

    <img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}">

    {% if product.images.size > 1 %}

     <img class="secondary" src="{{ product.images.last | img_url: grid_image_width }}" alt="{{ product.images.last.alt | escape }}">

    {% endif %}

    <div class="h4 grid-view-item__title">{{ product.title }}</div>

    {% if section.settings.show_vendor %}

      <div class="grid-view-item__vendor">{{ product.vendor }}</div>

    {% endif %}

    <div class="grid-view-item__meta">

      {% include 'product-price', variant: product %}

    </div>

  </a>

</div>