Remove extra images from product page

Highlighted
New Member
3 0 0

Hello, I'm trying to edit my shop but I'm not able to remove the extra images and it's starting to clutter my page.

The image on the left cycles between the different types of watches while the image on the right is just taking up space

<div itemscope itemtype="http://schema.org/Product" data-section-id="{{ section.id }}" data-section-type="product" data-history-state>

  {% comment %}
    Get first variant, or deep linked one
  {% endcomment %}
  {% assign current_variant = product.selected_or_first_available_variant %}

  {% comment %}
    Get first image
  {% endcomment %}
  {% assign featured_image = current_variant.featured_image | default: product.featured_image %}

  {% comment %}
    Get the text and link for the back button
  {% endcomment %}
  {% assign back_url = '/' %}
  {% assign back_text = 'products.product.back' | t %}
  {% if collection %}
    {% assign back_url = collection.url %}
    {% assign back_text = collection.title %}
  {% endif %}

  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ featured_image | img_url: 'grande' }}">
  <meta itemprop="name" content="{{ product.title }}{% if product.variants.size > 1 and product.selected_variant %} - {{ current_variant.title }}{% endif %}">

  <div class="product grid grid--uniform grid--no-gutters" itemprop="offers" itemscope itemtype="http://schema.org/Offer">

    {% assign first_image = featured_image %}

    {% if product.images.size > 1 and section.settings.skip_first_product_image and first_image == product.featured_image %}
      {% assign first_image = product.images[1] %}
    {% endif %}

    {% comment %}
      Set variables for product image grid
    {% endcomment %}
    {% if section.settings.product_image_type == 'portrait' %}
      {% if product.images.size == 1 %}
        {% assign grid_item_width = '' %}
      {% elsif product.images.size == 2 and section.settings.skip_first_product_image %}
        {% assign grid_item_width = '' %}
      {% else %}
        {% assign grid_item_width = 'medium-up--one-half' %}
      {% endif %}
      {% assign is_portrait_image = true %}
    {% else %}
      {% assign grid_item_width = '' %}
    {% endif %}

    {% if product.images.size > 0 %}
      <div class="product__photo grid__item {{ grid_item_width }}">
        {% for image in product.images %}
          {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
          <div data-image-id="{{ image.id }}" class="product__photo--single product__photo--variant-wrapper
          {% if product.images.size > 1 and section.settings.skip_first_product_image %}
            fade-in
            {% if forloop.first == true %} hide{% endif %}
            {% if forloop.index != 2 %} hide{% endif %}
          {% else %}
            {% unless featured_image == image %} hide{% endunless %}
          {% endif %}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
            <img class="product__photo--variant lazyload"
              src="{{ image | img_url: '300x' }}"
              data-src="{{ img_url }}"
              data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
              data-aspectratio="{{ image.aspect_ratio }}"
              data-sizes="auto"
              alt="{{ image.alt | escape }}">
          </div>
        {% endfor %}

        <noscript>
          <img class="product__photo--variant" src="{{ first_image | img_url: '2048x2048' }}" alt="{{ image.alt | escape }}">
        </noscript>
      </div>

      {% comment %}
        Counting images shown on the page
      {% endcomment %}
      {% assign index = 1 %}

      {% comment %}
        If we have portrait images, we show two per row, so let's get a second image.
        That image will be moved down below the description on mobile, hence why we'll use
        `small--hide`. The image moved down is stored in the variable `duplicate_image`.
      {% endcomment %}

      {% if is_portrait_image %}
        {% for image in product.images %}
          {% unless image == first_image %}
            {% unless section.settings.skip_first_product_image and image == product.featured_image %}
              <div class="product__photo grid__item small--hide {{ grid_item_width }}">
                <noscript>
                  <img src="{{ image | img_url: '2048x2048' }}" alt="{{ image.alt | escape }}">
                </noscript>
                {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                <div class="product__photo--single" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
                  <img class="lazyload"
                    src="{{ image | img_url: '300x' }}"
                    data-src="{{ img_url }}"
                    data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
                    data-aspectratio="{{ image.aspect_ratio }}"
                    data-sizes="auto"
                    alt="{{ image.alt | escape }}">
                </div>
              </div>
              {% assign index = index | plus: 1 %}
              {% assign index_offset = forloop.index %}
              {% assign duplicate_image = image %}
              {% break %}
            {% endunless %}
          {% endunless %}
        {% endfor %}
      {% endif %}

    {% endif %}

    <div class="product__details grid__item">
      <div class="grid grid--no-gutters product__details-content">
        <div class="grid__item {% if section.settings.product_form_width == 'large' %}medium-up--three-twelfths medium-up--push-one-fifth{% else %}large-up--two-twelfths large-up--push-two-twelfths medium-up--three-twelfths medium-up--push-one-twelfth{% endif %}">
          {% if section.settings.show_vendor %}
            <p class="product-item__vendor small--text-center">{{ vendor }}</p>
          {% endif %}
          <h2 itemprop="name">{{ product.title }}</h2>
          <link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">
          <form id="AddToCartForm-{{ section.id }}" action="/cart/add" method="post" enctype="multipart/form-data" class="product__form add-to-cart__form{% if section.settings.product_form_width == 'large' %} product__form--full-width{% endif %}">
            {% comment %}
              Select element hidden when JS initializes. Safeguard for JS-disabled.
            {% endcomment %}
            <select name="id" id="ProductSelect-{{ section.id }}">
              {% for variant in product.variants %}
                <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} {% unless variant.available %} disabled="disabled" {% endunless %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }} - {% if variant.available %}{{ variant.price | money_with_currency }}{% else %}{{ 'products.product.sold_out' | t }}{% endif %}</option>
              {% endfor %}
            </select>

            {% if section.settings.show_quantity_selector %}
              <div class="product__quantity quantity-wrapper">
                <label for="Quantity" class="product__quantity-label">{{ 'products.product.quantity' | t }}</label>
                <input type="number" id="Quantity"
                  class="quantity-input"
                  name="quantity" value="1" min="1">
              </div>
            {% endif %}

            {% assign price = current_variant.price | money_without_trailing_zeros %}
            <p class="product__price">
              <meta itemprop="priceCurrency" content="{{ shop.currency }}">
              <meta itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
              {% if product.compare_at_price_max > product.price %}
                <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
                <span class="product__price--reg">{{ current_variant.compare_at_price | money_without_trailing_zeros }}</span>
                <span class="product__price--sale">{{ 'products.general.now_price_html' | t: price: price }}</span>
              {% else %}
                <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
                <span class="product__price--reg js-price">
                  {{ price }}
                </span>
              {% endif %}
            </p>

            {% if product.available %}
              <button id="AddToCart-{{ section.id }}" type="submit" name="add" class="btn add-to-cart">
                <span class="add-to-cart__text">{{ 'products.product.add_to_cart' | t }}</span>
              </button>
            {% else %}
              <button type="button" class="btn add-to-cart btn--disabled" disabled="disabled">
                {{ 'products.product.sold_out' | t }}
              </button>
            {% endif %}

          </form>
        </div>
        <div class="grid__item {% if section.settings.product_form_width == 'large' %}medium-up--four-twelfths medium-up--push-three-tenths{% else %}large-up--one-half large-up--push-three-twelfths medium-up--six-twelfths medium-up--push-two-twelfths{% endif %}">
          <div class="product-single__errors"></div>
          <div class="product-single__description rte" itemprop="description">
            {{ product.description }}
          </div>
          {% if section.settings.social_sharing_products %}
            {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
          {% endif %}
        </div>
      </div>
    </div>

    {% comment %}
      Show second product photo after description on mobile if
      image setting style is 'portrait'
    {% endcomment %}
    {% if is_portrait_image and product.images.size > 1 %}
      <div class="product__photo grid__item medium-up--hide {{ grid_item_width }}">
        <noscript>
          <img src="{{ duplicate_image | img_url: '2048x2048' }}" alt="{{ duplicate_image.alt | escape }}">
        </noscript>
        {% assign img_url = duplicate_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
        <div class="product__photo--single" style="padding-top:{{ 1 | divided_by: duplicate_image.aspect_ratio | times: 100}}%;">
          <img class="lazyload"
            src="{{ duplicate_image | img_url: '300x' }}"
            data-src="{{ img_url }}"
            data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
            data-aspectratio="{{ duplicate_image.aspect_ratio }}"
            data-sizes="auto"
            alt="{{ duplicate_image.alt | escape }}">
        </div>
      </div>
    {% endif %}

    {% comment %}
      Show other product images below product info if there's any left to show
    {% endcomment %}
    {% if index < product.images.size %}
      {% for image in product.images offset:index_offset %}
        {% unless image == first_image %}
          {% unless section.settings.skip_first_product_image and image == product.featured_image %}
            <div class="product__photo grid__item {{ grid_item_width }}">
              <noscript>
                <img src="{{ image | img_url: '2048x2048' }}" alt="{{ image.alt | escape }}">
              </noscript>
              {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
              <div class="product__photo--single" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
                <img class="lazyload"
                  src="{{ image | img_url: '300x' }}"
                  data-src="{{ img_url }}"
                  data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
                  data-aspectratio="{{ image.aspect_ratio }}"
                  data-sizes="auto"
                  alt="{{ image.alt | escape }}">
              </div>
            </div>
          {% endunless %}
        {% endunless %}
      {% endfor %}
    {% endif %}
  </div>
  <div class="back-button grid">
    <div class="grid__item"></div>
      <a href="{{ back_url }}" class="btn back-button__link">
        <span class="icon icon-arrow-left" aria-hidden="true"></span>
        <span>{{ back_text }}</span>
      </a>
    </div>
  </div>
</div>

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

{% schema %}
  {
    "name": "Product",
    "settings": [
      {
        "type": "checkbox",
        "id": "skip_first_product_image",
        "label": "Skip first product image",
        "info" : "Make the first image for each product only appear on the collections page of your store. [Learn more](https://docs.shopify.com/manual/more/official-shopify-themes/boundless#skip-first-product-image-opti...)."
      },
      {
        "type": "select",
        "id": "product_image_type",
        "label": "Image style",
        "options": [
          {
            "value": "portrait",
            "label": "Tall/square"
          },
          {
            "value": "landscape",
            "label": "Wide"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "show_vendor",
        "label": "Show vendor",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "show_quantity_selector",
        "label": "Show quantity selector",
        "default": false
      },
      {
        "type": "checkbox",
        "id": "social_sharing_products",
        "label": "Enable product sharing",
        "default": true
      },
      {
        "type": "select",
        "id": "product_form_width",
        "label": "Product form width",
        "default": "small",
        "options": [
          {
            "value": "small",
            "label": "Small"
          },
          {
            "value": "large",
            "label": "Large"
          }
        ]
      }
    ]
  }
{% endschema %}
0 Likes
Highlighted
Shopify Partner
132 1 18

Hi Greg, 

Could you shoot through the password for your store? Would be good to see what scripts etc are acting on the product page along with the liquid you've provided.

Cheers,

Elliott

Feeling a bit lost? Contact elliot@mandelbrotian.com for help with theme setup, alterations, custom functionality, and app development.
1 Like
Highlighted
New Member
3 0 0

The password to the store is - ded

*Would it also be possible to resize the images? Some of them take up the whole page

0 Likes
Highlighted
Shopify Partner
132 1 18

Hi Greg,

First things first, make sure you back up your theme before making any changes.

If you delete the following from the page then the second image will no longer show. This same image also shows underneath the description in mobile, did you want to get rid of that as well?

      {% if is_portrait_image %}
        {% for image in product.images %}
          {% unless image == first_image %}
            {% unless section.settings.skip_first_product_image and image == product.featured_image %}
              <div class="product__photo grid__item small--hide {{ grid_item_width }}">
                <noscript>
                  <img src="{{ image | img_url: '2048x2048' }}" alt="{{ image.alt | escape }}">
                </noscript>
                {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                <div class="product__photo--single" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
                  <img class="lazyload"
                    src="{{ image | img_url: '300x' }}"
                    data-src="{{ img_url }}"
                    data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
                    data-aspectratio="{{ image.aspect_ratio }}"
                    data-sizes="auto"
                    alt="{{ image.alt | escape }}">
                </div>
              </div>
              {% assign index = index | plus: 1 %}
              {% assign index_offset = forloop.index %}
              {% assign duplicate_image = image %}
              {% break %}
            {% endunless %}
          {% endunless %}
        {% endfor %}
      {% endif %}

As for the image size, you should get someone to have a look at this for you. It's quite a simple change but will need to be tested over many devices for any knock on effects. The experts page is https://experts.shopify.com/.

Cheers,

Elliott

Feeling a bit lost? Contact elliot@mandelbrotian.com for help with theme setup, alterations, custom functionality, and app development.
1 Like
Highlighted
New Member
3 0 0

Thanks for the help, I actually ended up switching themes as I found the one I was looking for. 

0 Likes
Highlighted
Excursionist
10 0 5

I'm having this problem. Extra images (from the product variant selection) show underneath the product description and i don't know how to get rid of them.. 

Please help

0 Likes