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

Varianten Bilder ausblenden

Gelöst
timdraut
Neues Mitglied
3 0 0

Hi Zusammen,

ich meine zu lesen, dass Lösung 5+6 lediglich die Ansteuerung der Varianten Bilder ermöglich, nicht aber das Verbergen.

Gibt es hierzu nun eine Lösung, oder @SILICASE hast Du das customised bekommen und es ist hier nur im Post nicht mehr dokumentiert?

Danke für eine Info dazu!

Tim

0 Likes
Gabe
Shopify Staff
Shopify Staff
3821 435 884

Hey @timdraut 

Tutorials 5 und 6 sind keine finale Lösungen sondern können ggf. als Ansätze verwendet werden den Code auch anderweitig zu gestalten oder tweaken. Ansonsten haben wir ein paar Experten hier in der Community die helfen können gegen etwas Entgelt (wie @r8r oder @tewe). Taskhusky.com leistet auch eine super Arbeit.

Ggf. wenn das ein Shopify Theme ist und du auf einem bezahlten Plan dann können wir das anschauen als Teil deiner 60-Min Design Time. 

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

timdraut
Neues Mitglied
3 0 0

Hi Gabe, danke für die Tips!

Ich nutze kein direktes Shopify Theme, doch eines aus Eurem Shop.

ich bin mir nicht sicher, wofür die Design-Time gilt? Bekomme ich sie oder nicht?

Und klar - ich habe einen bezahlten Plan.

Viele Grüße

Tim

0 Likes
Gabe
Shopify Staff
Shopify Staff
3821 435 884

Erfolg.

Hi Tim! @timdraut 

Gut danke für die Angaben und da du ein drittanbieter Theme aus unserem Theme Store verwendest, lass uns mal hier weiter nach Lösungen suchen. Die 60-Min Shopify Design Time sind derzeit nur für die Free Themes erhältlich. Nicht vergessen, wenn du deine Shop URL hier postest kann ich gerne mal ein Blick reinwerfen und Tipps abgeben.

Mit dem Design Time kann unser Team z. B. so was wie den folgenden Checkbox zum Theme Editor für die Product Page hinzufügen:

image.png

Wie oben dargestellt kann man im Produkt-Seiten-Abschnitt des Editors so ein Feature einbauen. Das kann auch ein Experte für dich gerne machen. Ein typischer Code hier wäre etwas wie:

Spoiler
 {% comment %}
    Get first variant in stock, or deep linked one
  {% endcomment %}
  {% assign current_variant = product.selected_or_first_available_variant %}
  {%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

  <div class="grid product-single">

    <div class="grid__item medium-up--one-half">
      {% for image in product.images %}
        {% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
        {% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
        {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

        {% include 'image-style' with image: image, width: 720, height: 600, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}

        <div id="{{ wrapper_id }}" class="product-single__featured-image-wrapper supports-js{% unless featured_image == image %} hidden{% endunless %}" data-image-id="{{ image.id }}">
          <div class="product-single__photos" data-image-id="{{ image.id }}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
            <img id="{{ img_id }}"
                 class="product-single__photo lazyload{% unless featured_image == image %} lazypreload{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} lightbox{% endif %}"
                 {% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024' }}"{% endif %}
                 src="{{ image | img_url: '200x200' }}"
                 data-src="{{ img_url }}"
                 data-widths="[180, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
                 data-aspectratio="{{ image.aspect_ratio }}"
                 data-sizes="auto"
                 alt="{{ image.alt | escape }}">
          </div>
          {% if product.compare_at_price_max > product.price %}
            <span class="badge badge--sale"><span>{{ 'products.product.on_sale' | t }}</span></span>
          {% endif %}
        </div>
      {% endfor %}

Dann ist hier die IF Statement die verwendet werden kann:

Spoiler
{% if product.images.size > 1 and section.settings.show_thumbnails %}
        <ul class="product-single__thumbnails grid grid--uniform" id="ProductThumbs">

          {% case product.images.size %}
            {% when 2 %}
              {% assign thumbnail_width = 'small--one-half medium-up--push-one-sixth medium-up--one-third' %}
            {% when 4 %}
              {% assign thumbnail_width = 'small--one-half medium-up--one-quarter' %}
            {% else %}
              {% assign thumbnail_width = 'small--one-third medium-up--one-third' %}
          {% endcase %}

          {% for image in product.images %}
            <li class="grid__item {{ thumbnail_width }}">
              <a href="{{ image.src | img_url: 'grande' }}" class="product-single__thumbnail" data-image-id="{{ image.id }}">
                <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
              </a>
            </li>
          {% endfor %}

Als zusätzliche Anmerkung: Das primäre Bild wird immer noch auf das relevante Bild aktualisiert, wenn eine Variante aus dem Dropdown ausgewählt wird!

An erster Stelle wollte ich fragen, ob du noch mit dem Experten Thomas ( @tewe ) in Kontakt bist? Ggf. kann dieser helfen eine Programmierung in das Theme zu coden.

Dann habe ich eine App gefunden (für ca. €6/Monat) die u. a. da folgende ermöglicht und sehr gute Bewertungen bekommt:

image.png

Wäre das ein Ansatz? Dann habe ich ein paar Code-Beispiele gefunden die vielleicht etwas getweakt werden sollten für dein drittanbieter Theme. Der Folgende Code im theme.scss kann die Varianten Bilder verstecken:

.product-single__thumbnails {   display: none;}

 Dann kann man die Variable image.attached_to_variant verwenden. Das Code kann man im product-template.liquid ggf. finden und dann die Bedingung in der Variantenschleife prüfen.

{% unless image.attached_to_variant? %}
//your thumb image code goes here 
{% endunless %}

Suche einfach nach{% for image in product.images %}

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

0 Likes