CSS Probleme mit thumb Darstellung

<!-- /templates/product.liquid -->


<div itemscope itemtype="http://schema.org/Product">


  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">


  {% assign current_variant = product.selected_or_first_available_variant %}  
  <div class="grid product-single">
    <div class="grid__item large--seven-twelfths medium--seven-twelfths text-right">
      <div class="product-single__photos">
        {% assign featured_image = current_variant.featured_image | default: product.featured_image %}


        {% comment %}
          Display current variant image, or default first
        {% endcomment %}

          <img class="product-single__photo" id="ProductPhotoImg" src="{{ featured_image | img_url: '1024x1024' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ featured_image | img_url: 'master' }}"{% endif %} alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}"> 

        {% comment %}
          Display the product image gallery, if there are at least two images available
        {% endcomment %}
        {% if product.images.size > 1 %}
      <div class="product-single__gallery">
        {% for image in product.images %}
          {% assign image_variant = null %}

          {% for variant in image.variants %}
            {% assign image_variant = variant %}
              {% break %}
            {% endfor %}   

          <div class="product-single__gallery-item{% if image contains featured_image %} product-single__gallery-item--active{% endif %}"{% if image_variant %} data-image-variant="{{ image_variant.id }}"{% endif %}>
            <div class="product-single__gallery-image" style="background-image: url('{{ image.src | img_url: 'medium' }}')" data-size-large="{{ image.src | img_url: '1024x1024' }}" data-size-full="{{ image.src | img_url: 'master' }}"></div>
          </div>
         {% endfor %}
        </div>
        {% endif %}
      </div>
    </div>


    <div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">
      <div class="product-single__meta">
        <div class="product-single__meta-inner">
          {% if settings.product_vendor_enable %}
            <h2 class="product-single__vendor" itemprop="brand">{{ product.vendor }}</h2>
          {% endif %}


          <h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>


          <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            {% comment %}
              Optionally show the 'compare at' or original price of the product.
            {% endcomment %}


            {% if product.compare_at_price > product.price %}
              <span class="product-single__price--wrapper">
                <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
                <span id="ComparePrice" class="product-single__price--compare-at">
                  {{ product.compare_at_price | money }}
                </span>
                <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
              </span>
            {% endif %}


            <span id="ProductPrice" class="product-single__price{% if product.compare_at_price > product.price %} on-sale{% endif %}" itemprop="price">
              {{ current_variant.price | money }}
            </span>


            <hr class="hr--small">


            <meta itemprop="priceCurrency" content="{{ shop.currency }}">
            <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">


            <form action="/cart/add" method="post" enctype="multipart/form-data" class="product-single__form" id="AddToCartForm">
              <select name="id" id="ProductSelect" class="product-single__variants">
                {% for variant in product.variants %}
                  {% if variant.available %}
                    <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
                  {% else %}
                    <option disabled="disabled">
                      {{ variant.title }} - {{ 'products.product.sold_out' | t }}
                    </option>
                  {% endif %}
                {% endfor %}
              </select>


              {% comment %}
              <div class="product-single__quantity">
                <label for="Quantity" class="product-single__quantity-label js-quantity-selector">{{ 'products.product.quantity' | t }}</label>
                <input type="number" hidden="hidden" id="Quantity" name="quantity" value="1" min="1" class="js-quantity-selector">
              </div>
              {% endcomment %}


              <div class="product-single__add-to-cart">
                <button type="submit" name="add" id="AddToCart" class="btn">
                  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
                </button>
              </div>
            </form>


          </div>


          <div class="product-single__description rte" itemprop="description">
            {{ product.description }}
          </div>


          {% if settings.social_sharing_products %}
            {% include 'social-sharing' %}
          {% endif %}
          <div class="product-single__image-hover-container"></div>
        </div>
      </div>
      </div>
  </div>


  {% if collection %}
    <hr class="hr--clear">
    <div class="text-center">
      <a href="{{ collection.url }}" class="return-link">&larr; {{ 'products.general.collection_return' | t: collection: collection.title }}</a>
    </div>
  {% endif %}


</div>


{% comment %}


  *IMPORTANT:*
  This theme uses a customized version of `option_selection.js` to support using radio inputs for
  color and size variants. The custom version is in `variant_selection.js`.


  If you wish to enable the default dropdowns for size and color
  you can change the liquid asset tag below from:


  {{ 'variant_selection.js' | asset_url | script_tag }}


  to


  {{ 'option_selection.js' | shopify_asset_url | script_tag }}


  If you use the default `option_selection.js` the labels for the dropdowns will
  appear outside the dropdown.


  You will also need to change `.radio-wrapper` to `.selector-wrapper` below.


{% endcomment %}
{{ 'variant_selection.js' | asset_url | script_tag }}
<script>  
  var selectCallback = function(variant, selector) {
    timber.productPage({
      money_format: "{{ shop.money_format }}",
      variant: variant,
      selector: selector
    });


    if (variant && variant.featured_image && variant.featured_image.variant_ids) {      
      $('.product-single__gallery-item[data-image-variant]').each(function () {
          var $this = $(this);
        var variantId = parseInt($this.attr('data-image-variant'), 10);

        if (variant.featured_image.variant_ids.indexOf(variantId) !== -1) {
          $this.children().first().trigger('click');
          return false;
        }
      });      
    }
  };


  jQuery(function($) {
    var options = new Shopify.OptionSelectors('ProductSelect', {
      product: {{ product | json }},
      onVariantSelected: selectCallback,
      enableHistoryState: true
    });
    var variantSelectors = [];

    // disable unavailable options if there is only one variant
    $.each(options.selectors, function (selector) {      
      if (this.values.length > 1) {
        variantSelectors.push(this);
      }
    });

    if (variantSelectors.length === 1) {
      $(options.variantIdField).children().each(function (index) {
        if ($(this).attr('disabled')) {
          $(variantSelectors[0].element).find('input').eq(index).attr('disabled', 'disabled').next().addClass('disabled');
        }
      });
    }


    // Add label if only one product option and it isn't 'Title'. Could be 'Size'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
      $('.radio-wrapper:eq(0)').prepend('<label for="ProductSelect-option-0" class="single-option-radio__label">{{ product.options.first | escape }}</label>');
    {% endif %}
  });
</script>






und .product-grid-item.liquid:
<!-- /snippets/product-grid-item.liquid -->
{% comment %}


  This snippet is used to showcase each product during the loop,
  'for product in collection.products' in collection.liquid.


  A liquid variable (grid_item_width) is set just before the this
  snippet is included to change the size of the container.
  Once the variable is set on a page, all future instances of this
  snippet will use that width. Overwrite the variable to adjust this.


  Example
    - assign grid_item_width = 'large--one-quarter medium--one-half'


{% endcomment %}


{% unless grid_item_width %}
  {% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endunless %}


{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
{% endif %}


{% assign sold_out = true %}
{% if product.available %}
  {% assign sold_out = false %}
{% endif %}


{% assign new = false %}
{% if product.tags contains 'new' %}
  {% assign new = true %}
{% endif %}


{% comment %}
  Print first variant option if it is defined.
  Do not print variant options more than once.
  If a variant option occurs multiple times, do not make it disabled.
{% endcomment %}


{% assign variants = ',' %}
{% for variant in product.variants %}
  {% unless variant.option1 == blank or variant.option1 == '.' %}
    {% assign search = ',' | append: variant.option1 | append: '|' %}
    {% if variants contains search %}
      {% assign search = variant.option1 | append: '|false' %}
      {% assign replace = variant.option1 | append: '|true' %}
       {% assign variants = variants | replace_first: search, replace %}
    {% else %}
      {% assign variants = variants | append: variant.option1 | append: '|' | append: variant.available | append: '|' | append: variant.url | append: ',' %}
    {% endif %}
  {% endunless %}
{% endfor %}
{% assign variants = variants | remove_first: ',' %}
{% assign variants = variants | split: ',' %}


<div class="grid__item grid-product {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}{% if variants.size > 1 %} has-variants{% endif %}">
  <div class="grid-product__wrapper">
    <div class="grid-product__image-wrapper">
      <a class="grid-product__image-link" href="{{ product.url | within: collection }}" {% if settings.collection_products_grid == 'collage_edited' %}style="background-image: url('{{ product | img_url: '1024x1024' }}');"{% endif %}>
        {% if settings.collection_products_grid != 'collage_edited' %}<img src="{{ product | img_url: '1024x1024' }}" alt="{{ product.featured_image.alt | escape }}" class="grid-product__image">{% endif %}
      </a>
      {% if sold_out %}
        <div class="grid-product__sold-out">
          <p>{{ 'products.product.sold_out_html' | t }}</p>
        </div>
      {% elsif on_sale %}
        <div class="grid-product__on-sale">
          {% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money }}{% endcapture %}
          <p>{{ 'products.general.save_html' | t: saved_amount: saved_amount }}</p>
        </div>
      {% elsif new %}
        <div class="grid-product__tag grid-product__tag--has-image grid-product__tag--new">
          <svg class="grid-product__tag-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path fill="none" stroke="#000" vector-effect="non-scaling-stroke" d="M24.995 12.93A12.368 12.368 0 0 0 14.445 7C7.93 7 2.74 12.216 2.074 19.41c-.05.316-.267 1.986.39 4.712.95 3.932 2.38 6.6 6.065 10.305C11.974 37.893 24.996 47 24.996 47s13.02-9.11 16.466-12.573c3.684-3.705 5.115-6.373 6.064-10.31.66-2.725.46-4.395.39-4.714C47.25 12.216 42.052 7 35.56 7a12.37 12.37 0 0 0-10.565 5.93z"/></svg>
          <p>{{ 'products.product.new' | t }}</p>
        </div>
      {% endif %}
    </div>


    <a href="{{ product.url | within: collection }}" class="grid-product__meta">
      <span class="grid-product__title">{{ product.title }}</span>
      <span class="grid-product__price-wrap">
        <span class="long-dash">—</span>
        <span class="grid-product__price">
          {% if product.price_varies %}
          {% unless product.compare_at_price_min == 0 %}<span id="ComparePrice" class="product-single__price--compare-at"> {{ product.compare_at_price_min | money_without_trailing_zeros }} </span>{% endunless %}<span class="product-single__price--new">{{ product.price_min | money_without_trailing_zeros }}</span>
            <span class="icon-fallback-text">
              <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
              <span class="fallback-text">+</span>
            </span>
          {% else %}
          {% unless product.compare_at_price_min == 0 %}<span id="ComparePrice" class="product-single__price--compare-at"> {{ product.compare_at_price | money_without_trailing_zeros }} </span>{% endunless %}<span class="product-single__price--new">{{ product.price | money_without_trailing_zeros }}</span>
          {% endif %}
        </span>
      </span>
      {% if settings.product_vendor_enable %}
        <p class="grid-product__vendor">{{ product.vendor }}</p>
      {% endif %}
    </a>

    {% if variants.size > 1 %}
      <ul class="grid-product__variants">
        {% for variant in variants %}
          {% assign variant_data = variant | split: '|' %}

          <li class="grid-product__variant {% if variant_data[1] == 'false' %}is-disabled{% endif %}">
            {% if variant_data[1] == 'false' %}
            <span class="grid-product__variant-inner">{{ variant_data[0] }}</span>
            {% else %}
            <a class="grid-product__variant-inner" href="{{ variant_data[2] }}">{{ variant_data[0] }}</a>
            {% endif %}
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  </div>
</div>