Help! Debut Theme Product Images Open in the Same Window

New Member
2 0 3

I'm using the Debut Theme and loving it! Recently I've been having trouble with my product images - when I click on the thumbnails, the window switches over to a blank page showing only that image, and I need to click back to return to the listing. I want the thumbnail to simply show up enlarged in the same image area as the main picture.

My shop is at www.parademade.com. Help please!

2 Likes
New Member
2 0 3

The code from my product-template.liquid is here:


 

<div class="product-template__container page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true">
  <meta itemprop="name" content="{{ product.title }}">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: '800x' }}">

  {% comment %}
    Get first variant, or deep linked one
  {% endcomment %}
  {%- assign current_variant = product.selected_or_first_available_variant -%}
  {%- assign product_thumb_size = '160x' -%}
  {%- assign product_image_zoom_size = '1024x1024' -%}
  {%- assign enable_zoom = section.settings.enable_zoom -%}

  {% case section.settings.image_size %}
    {% when 'small' %}
      {%- assign product_image_width = 'medium-up--one-third' -%}
      {%- assign product_description_width = 'medium-up--two-thirds' -%}
      {%- assign product_thumbnail_width = 'medium-up--one-third' -%}
      {%- assign product_image_size = '345x' -%}
    {% when 'medium' %}
      {%- assign product_image_width = 'medium-up--one-half' -%}
      {%- assign product_description_width = 'medium-up--one-half' -%}
      {%- assign product_thumbnail_width = 'medium-up--one-quarter' -%}
      {%- assign product_image_size = '530x' -%}
    {% when 'large' %}
      {%- assign product_image_width = 'medium-up--two-thirds' -%}
      {%- assign product_description_width = 'medium-up--one-third' -%}
      {%- assign product_thumbnail_width = 'medium-up--one-fifth' -%}
      {%- assign product_image_size = '720x' -%}
    {% when 'full' %}
      {%- assign product_image_width = '' -%}
      {%- assign product_description_width = '' -%}
      {%- assign product_thumbnail_width = 'medium-up--one-eighth' -%}
      {%- assign product_image_size = '1090x' -%}
      {%- assign enable_zoom = false -%}
  {% endcase %}

  <div class="grid product-single">
    <div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
      {%- assign featured_img_src = current_variant.featured_image.src | default: product.featured_image.src -%}
      {%- assign featured_img_alt = current_variant.featured_image.alt | default: product.featured_image.alt -%}
      <div id="FeaturedImageZoom-{{ section.id }}" class="product-single__photo{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}" {% if enable_zoom %}data-zoom="{{ featured_img_src | img_url: product_image_zoom_size }}"{% endif %}>
        <img src="{{ featured_img_src | img_url: product_image_size }}" alt="{{ featured_img_alt }}" id="FeaturedImage-{{ section.id }}" class="product-featured-img{% if enable_zoom %} js-zoom-enabled{% endif %}">
      </div>

      {% if product.images.size > 1 %}
        {% if product.images.size > 3 %}
          {%- assign enable_thumbnail_slides = true -%}
        {% endif %}

        <div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}">
          {% if enable_thumbnail_slides == true %}
            <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">
              {% include 'icon-chevron-left' %}
              <span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
            </button>
          {% endif %}
          <ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}">
            {% for image in product.images %}
              <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item">
                <a
                  href="{{ image.src | img_url: product_image_size }}"
                    class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                    {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size }}"{% endif %}>
                    <img class="product-single__thumbnail-image" src="{{ image.src | img_url: product_thumb_size }}" alt="{{ image.alt | escape }}">
                </a>
              </li>
            {% endfor %}
          </ul>
          {% if enable_thumbnail_slides == true %}
            <button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">
              {% include 'icon-chevron-right' %}
              <span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
            </button>
          {% endif %}
        </div>
      {% endif %}
    </div>

    <div class="grid__item {{ product_description_width }}">
      <div class="product-single__meta">

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

        {% if section.settings.show_vendor %}
          <p itemprop="brand" class="product-single__vendor">{{ product.vendor }}</p>
        {% endif %}

        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
          <meta itemprop="priceCurrency" content="{{ shop.currency }}">

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

          <p class="product-single__price product-single__price-{{ section.id }}{% unless current_variant.available %} product-price--sold-out{% endunless %}">
            {% if current_variant.compare_at_price > current_variant.price %}
                <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
                <s id="ComparePrice-{{ section.id }}">{{ current_variant.compare_at_price | money }}</s>
                <span class="product-price__price product-price__price-{{ section.id }} product-price__sale product-price__sale--single">
                  <span id="ProductPrice-{{ section.id }}">{{ current_variant.price | money }}</span>
                  <span class="product-price__sale-label product-price__sale-label-{{ section.id }}">{{ 'products.product.on_sale' | t }}</span>
                </span>
            {% else %}
              <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
              <s id="ComparePrice-{{ section.id }}" class="hide">{{ current_variant.compare_at_price | money }}</s>
              <span class="product-price__price product-price__price-{{ section.id }}">
                <span id="ProductPrice-{{ section.id }}">{{ current_variant.price | money }}</span>
                <span class="product-price__sale-label product-price__sale-label-{{ section.id }} hide">{{ 'products.product.on_sale' | t }}</span>
              </span>
            {% endif %}
          </p>

          <form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}" data-section="{{ section.id }}">
            {% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
              {% for option in product.options_with_values %}
                <div class="selector-wrapper js product-form__item">
                  <label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
                    {{ option.name }}
                  </label>
                  <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
                    {% for value in option.values %}
                      <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                    {% endfor %}
                  </select>
                </div>
              {% endfor %}
            {% endunless %}

            <select name="id" id="ProductSelect-{{ section.id }}" data-section="{{ section.id }}" class="product-form__variants no-js">
              {% 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 }}
                  </option>
                {% else %}
                  <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
                {% endif %}
              {% endfor %}
            </select>
<div id="infiniteoptions-container"></div>
            {% if section.settings.show_quantity_selector %}
              <div class="product-form__item product-form__item--quantity">
                <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
                <input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*">
              </div>
            {% endif %}

            <div class="product-form__item product-form__item--submit">
              <button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
                <span id="AddToCartText-{{ section.id }}">
                  {% unless current_variant.available %}
                    {{ 'products.product.sold_out' | t }}
                  {% else %}
                    {{ 'products.product.add_to_cart' | t }}
                  {% endunless %}
                </span>
              </button>
            </div>
          </form>

        </div>

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

        {% if section.settings.show_share_buttons %}
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% if collection %}
  <div class="text-center return-link-wrapper">
    <a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
      {% include 'icon-arrow-left' %}
      {{ 'products.product.back_to_collection' | t: title: collection.title }}
    </a>
  </div>
{% endif %}

{% unless product.empty? %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
{% endunless %}

{% schema %}
  {
    "name": "Product pages",
    "settings": [
      {
        "type": "select",
        "id": "image_size",
        "label": "Image size",
        "options": [
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "medium",
            "label": "Medium"
          },
          {
            "value": "large",
            "label": "Large"
          },
          {
            "value": "full",
            "label": "Full-width"
          }
        ],
        "default": "medium"
      },
      {
        "type": "checkbox",
        "id": "show_quantity_selector",
        "label": "Show quantity selector",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_variant_labels",
        "label": "Show variant labels",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "label": "Show vendor",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "enable_zoom",
        "label": "Enable image zoom",
        "default": true
      },
      {
        "type": "checkbox",
        "id": "show_share_buttons",
        "label": "Show social sharing buttons",
        "default": true
      }
    ]
  }
{% endschema %}

 

1 Like
New Member
1 0 0

Bump

I'm am having this same exact issue and it seems that each time it has been resolved on this forum, it is because an employee had to jump in and fix the code.

I'd love to have someone take a look or help us out!

0 Likes
New Member
4 0 0

I'm also having this issue. Sometimes it works fine, I back out the product page, go back in and then itndoesnt work. Desperately need to fix this. Really don't want to have to change my whole theme because of this.

0 Likes
New Member
3 0 0

I am having the same issue, but it looks like this post is 9 months old. Has anyone solved on another thread?  Thanks.

0 Likes
New Member
2 0 1

Looks like you resolved the problem you were having, could you share how you did it?


0 Likes
New Member
2 0 1

I think I found the solution on another post:

https://community.shopify.com/c/Shopify-Design/Product-Thumbnails-opening-in-a-new-window/m-p/386287...

 

A very minor change made the world of difference, detail from link above pasted below for reference

 

Well, have you edited your product-template.liquid Section?

At the top of this file, there is a line similar to:

<div class="product-template__container page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true">

Important for us is data-section-type="product" part. In your theme it is data-section-type="products" (note the last s).

That's why it does not register with javascript.

 

 

1 Like
Shopify Partner
1665 51 185

@JackieAnderson was this in a current version of debut having this issue?

Problem Solved? ✔️Accept the solution so you can help others.
Confused? Busy? ? Get me to solve it paull.newton+shopifyforum@gmail.com.
Buy me a coffee? ☕ paypal.me/paulnewton or donate to eff.org
0 Likes