Hide thumbnails produced when there is only one image

PrestaShop 1.7 shows the thumbnails even when there is only a single image

This version 1.7 of PrestaShop will always amaze us, following a request on the forum to hide the thumbnails of the images produced when the product sheet contains only one image, I discovered that this request could not exist on the previous versions PrestaShop since the proposed default template took into consideration this feature.

So for adventurous users using the 1.7 version of PrestaShop, I propose this little tutorial to hide this thumbnail on the product sheet and the modal window that opens for zooming.

It can be estimated that this trick will bring a gain in terms of loading the product page.

Remove the thumbnail on the product page

You will have to open the following file by accessing it by ftp:

  • /themes/classic/templates/catalog/_partials/product-cover-thumbnails.tpl

and frame the block displaying thumbnails with a simple smarty condition that checks for multiple images.

{if $product.images|@count > 1}...{/if}

The result will be this one

  {if $product.images|@count > 1}
      {block name='product_images'}
        <div class="js-qv-mask mask">
          <ul class="product-images js-qv-product-images">
            {foreach from=$product.images item=image}
              <li class="thumb-container">
                <img
                  class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}"
                  data-image-medium-src="{$image.bySize.medium_default.url}"
                  data-image-large-src="{$image.bySize.large_default.url}"
                  src="{$image.bySize.home_default.url}"
                  alt="{$image.legend}"
                  title="{$image.legend}"
                  width="100"
                  itemprop="image"
                >
              </li>
            {/foreach}
          </ul>
        </div>
      {/block}
  {/if}

Retirer la miniature de la fenêtre modale de zoom produit

You will have to open the following file by accessing it by ftp:

  • /themes/classic/templates/catalog/_partials/product-images-modal.tpl

and frame the block displaying thumbnails with a simple smarty condition that checks for multiple images.

{if $imagesCount > 1}...{/if}

The result will be this one

        {if $imagesCount > 1}
            <aside id="thumbnails" class="thumbnails js-thumbnails text-sm-center">
              {block name='product_images'}
                <div class="js-modal-mask mask {if $imagesCount <= 5} nomargin {/if}">
                  <ul class="product-images js-modal-product-images">
                    {foreach from=$product.images item=image}
                      <li class="thumb-container">
                        <img data-image-large-src="{$image.large.url}" class="thumb js-modal-thumb" src="{$image.medium.url}" alt="{$image.legend}" title="{$image.legend}" width="{$image.medium.width}" itemprop="image">
                      </li>
                    {/foreach}
                  </ul>
                </div>
              {/block}
              {if $imagesCount > 5}
                <div class="arrows js-modal-arrows">
                  <i class="material-icons arrow-up js-modal-arrow-up"></i>
                  <i class="material-icons arrow-down js-modal-arrow-down"></i>
                </div>
              {/if}
            </aside>
        {/if}

View changes

You have modified your files properly and saved these changes online ... but nothing has changed on your site.

Remember that you must always empty the PrestaShop cache after making changes to your templates.

To do this, go to the Advanced Settings >> Performance menu.

Go back to your product page and see the disappearance of the thumbnail.