abbrechen
Suchergebnisse werden angezeigt für 
Stattdessen suchen nach 
Meintest du: 

Mouseover für Produktfotos im Theme Narrative

Neues Mitglied
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.

0 Likes
Shopify Expert
723 68 183

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

Mario Rader [he] ★ If you want to achieve greatness, stop asking for permission. ★ Studio Mitte
• Meine Antwort war hilfreich? Hinterlass bitte ein Like.
• Meine Antwort hat Dein Problem behoben? Bitte akzeptiere sie als Lösung.
• Ich hab dir etwas erspart? Ich freue ich mich immer über eine kleine Aufmerksamkeit
• Ja, ich biete Shopify-Services & -Entwicklung und freue mich von Dir zu hören!
• Bitte teile einen Link zu der Seite, deren Problem Du in deinem Beitrag beschreibst!

• Yes, I provide Shopify-services & -development. Feel free to get in touch!
• Please share a link to the site, which you refer to in your problem description. This incredibly increases the chances of you receiving a useful answer!
• My answer was useful? Please leave a Like.
• My answer solved your issue? Please accept it as the solution.
• I saved you time or money? I'm always happy to receive a little thank you.
0 Likes
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>