Hide Featured Image on Product Page

Highlighted
Excursionist
15 0 11

The Turbo theme added support for Shopify's AR and 3D  media.  For years I had a method (from this board) to hide the featured image and associated thumbnail on my product page. It isn't working anymore.   In other words, I only want the 2nd image (and 3rd) to show on the product page itself with the featured image only showing on the collection page.

 

Previously, adding 

{% if image != featured_image %}

 

after 

{% for image in product.images %}

 

in the products.images snippet hid the first (featured) image on the product page (suggested in another forum post).

 

Any suggestions? Thanks in advance. 

 

Current code below:

 

________

 

{% comment %}
Optional
---------
set_product_height: <boolean>
quickshop: <boolean>
{% endcomment %}

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
{% capture list %}
{% for image in product.images %}
{% comment %}Loop through images only once{% endcomment %}
{{ image.id }}`~`{{ image.alt }}`~`{{ image | img_url: '100x' }}`~`{{ image | img_url: '200x' }}`~`{{ image | img_url: '400x' }}`~`{{ image | img_url: '600x' }}`~`{{ image | img_url: '800x' }}`~`{{ image | img_url: '1200x' }}`~`{{ image | img_url: '2000x' }}`~`{{-image.width-}}px`~`{{-image.height-}}px{{ image | product_img_url: '5000x' }}{% if forloop.last == false %}^{% endif %}
{% endfor %}
{% endcapture %}
{% assign image_list = list | split: "^" %}

{% style %}
.shopify-model-viewer-ui model-viewer {
--progress-bar-height: 2px;
--progress-bar-color: {{ settings.regular_color }};
}
{% endstyle %}

<div class="clearfix
gallery-wrap
gallery-arrows--{{ section.settings.gallery_arrows }}
{% if set_product_height != blank %}product-height-set{% endif %}
gallery-thumbnails--{{ section.settings.thumbnail_position }}">
<div class="product_gallery js-product-gallery product-{{ product.id }}-gallery
transparentBackground--{{ settings.slideshow_button_style }}
slideshow_animation--{{ section.settings.slideshow_animation }}
popup-enabled--{{ section.settings.enable_product_lightbox }}
show-gallery-arrows--{{ section.settings.gallery_arrows }}
{% if product.media.size > 1 %} multi-image {% else %} single-image {% endif %}"
data-thumbnails-enabled="{{ section.settings.product_thumbs }}"
data-gallery-arrows-enabled="{{ section.settings.gallery_arrows }}"
data-slideshow-speed="{{ section.settings.slideshow_speed }}"
data-slideshow-animation="{{ section.settings.slideshow_animation }}"
data-thumbnails-position="{{ section.settings.thumbnail_position }}"
data-thumbnails-slider-enabled="{{ section.settings.enable_thumbnail_slider }}"
data-zoom="{{ section.settings.activate_zoom }}"
data-video-loop="{{ section.settings.video_looping }}"
data-product-id="{{ product.id }}"
data-product-lightbox="{{ section.settings.enable_product_lightbox }}"
data-media-count="{{ product.media.size }}"
data-product-gallery>

{% for media in product.media %}
<div class="gallery-cell" data-product-id="{{ product.id }}" data-media-type="{{ media.media_type }}" data-thumb="{{ image_large }}" data-title="{% if image_alt contains 'youtube' or image_alt contains 'vimeo' %}{{ product.title }}{% else %}{{ image_alt | escape }}{% endif %}">
{% case media.media_type %}
{% when 'image' %}

{% capture image_id %}{{ media.id }}{% endcapture %}
{% capture image_alt %}{{ media.alt | escape }}{% endcapture %}
{% capture image_100x %}{{ media | img_url: '100x' }}{% endcapture %}
{% capture image_200x %}{{ media | img_url: '200x' }}{% endcapture %}
{% capture image_400x %}{{ media | img_url: '400x' }}{% endcapture %}
{% capture image_600x %}{{ media | img_url: '600x' }}{% endcapture %}
{% capture image_800x %}{{ media | img_url: '800x' }}{% endcapture %}
{% capture image_1200x %}{{ media | img_url: '1200x' }}{% endcapture %}
{% capture image_2000x %}{{ media | img_url: '2000x' }}{% endcapture %}
{% capture image_5000x %}{{ media | img_url: '5000x' }}{% endcapture %}

{% if image_alt contains 'youtube' or image_alt contains 'vimeo' %}

{% assign alt_text = image_alt | split: ' ' %}
{% for property in alt_text %}
{% if property contains "src" %}
{% assign cleanURL = property | remove: 'src=' | remove: '&quot;' | remove: '"' %}
<div class="product-gallery__video" data-youtube-video>
<iframe src="{{ cleanURL }}" frameborder="0"></iframe>
</div>
{% endif %}
{% endfor %}

{% else %}

{% if section.settings.enable_product_lightbox and product.images.size > 0 %}
<a href="{{ image_5000x }}"
class="lightbox"
data-fancybox="{{ product.id }}"
rel="product-lightbox" tabindex="0">
{% endif %}
<div class="image__container" style="max-width: {{original_image_width}}">
{% if product.images.size > 0 %}
<img src="{{ image_100x }}"
alt="{{ image_alt | escape }}"
class=" lazyload {{ settings.image_loading_style }}"
data-image-id="{{ product.media[forloop.index0].id }}"
data-index="{{ forloop.index0 }}"
data-sizes="{% if section.settings.enable_product_lightbox %}100vw{% else %}auto{% endif %}"
data-aspectratio="{{ original_image_height }}/{{ original_image_width }}"
data-src="{{ image_2000x }}"
srcset=" {{ image_200x }} 200w,
{{ image_400x }} 400w,
{{ image_600x }} 600w,
{{ image_800x }} 800w,
{{ image_1200x }} 1200w,
{{ image_2000x }} 2000w"
/>
{% else %}
<img src="{{ image | img_url: 'master' }}" />
{% endif %}
</div>
{% if section.settings.enable_product_lightbox and product.images.size > 0 %}
</a>
{% endif %}
{% endif %}
{% when 'external_video' %}
<div class="product-gallery__video" data-youtube-video>
{{ media | external_video_tag }}
</div>
{% when 'video' %}
<div class="product-gallery__video" data-html5-video>
{{ media | video_tag: controls: true }}
</div>
{% when 'model' %}
<div class="product-gallery__model">
{{ media | model_viewer_tag: reveal: 'interaction', toggleable: true, image_size: '800x800' }}
</div>
{% else %}
{{ media | media_tag }}
{% endcase %}
{% assign has_model = product.media | where: "media_type", "model" | first %}
{% if has_model %}
<button class="action_button view-in-your-space" data-shopify-xr data-shopify-model3d-id="{% if media.media_type == 'model' %}{{ media.id }}{% else %}{{ has_model.id }}{% endif %}" data-shopify-title={{ product.title }} style="display: none;">
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 9L22.0622 12.5V19.5L16 23L9.93782 19.5V12.5L16 9Z" stroke="#3A3A3A" stroke-width="1.5"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 23V15.6024C16.6225 15.2002 16.6225 15.2002 16.6225 15.2002L22 12V19.4082L16 23Z" fill="#3A3A3A"/>
</svg>
{{ 'products.product.view_in_your_space' | t | capitalize }}
</button>
{% endif %}
</div>
{% endfor %}
</div>

{% if section.settings.product_thumbs %}
{% if image_width != 'full' %}
<div class="product_gallery_nav product_gallery_nav--{{ section.settings.thumbnail_position }} product-{{ product.id }}-gallery-nav">
{% if product.media.size > 1 %}
{% for media in product.media %}

{% if media.media_type contains 'video' %}
{% assign thumbnail_badge = 'video-thumbnail' %}
{% elsif media.media_type contains 'model' %}
{% assign thumbnail_badge = '3d-thumbnail' %}
{% else %}
{% assign thumbnail_badge = '' %}
{% endif %}

<div tabindex="0" class="gallery-cell" data-title="{{ image_alt | escape }}">
<img src="{{ media | img_url: '300x' }}" alt="">
{% if thumbnail_badge == 'video-thumbnail' %}
<svg class="media-badge" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 25H25V1H1V25Z" fill="white"/><path class="media-badge__outline" d="M0.5 25V25.5H1H25H25.5V25V1V0.5H25H1H0.5V1V25Z" stroke="black" stroke-opacity="0.05"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8.19995 5.8V20.2L19.3999 12.5858L8.19995 5.8Z" fill="#3A3A3A" fill-opacity="0.6"/></svg>
{% elsif thumbnail_badge == '3d-thumbnail' %}
<svg class="media-badge" width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1 25H25V1H1V25Z" fill="white"/><path class="media-badge__outline" d="M0.5 25V25.5H1H25H25.5V25V1V0.5H25H1H0.5V1V25Z" stroke="black" stroke-opacity="0.05"/><g opacity="0.6"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 6L19.0622 9.5V16.5L13 20L6.93782 16.5V9.5L13 6Z" stroke="#3A3A3A" stroke-width="1.5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13 20V12.6024C13.6225 12.2002 13.6225 12.2002 13.6225 12.2002L19 9V16.4082L13 20Z" fill="#3A3A3A"/></g></svg>
{% endif %}
</div>
{% endfor %}
{% endif %}
</div>
{% endif %}
{% endif %}
</div>

0 Likes
Highlighted
Shopify Staff
Shopify Staff
536 31 85

Hi, @Michael_H_1.

 

Tira here, from Shopify.

 

That's really great to hear that the Turbo theme has support for our product media. If you would like to read more about it, you can check out our help doc on product media, here: Product Media (Videos, 3D Models and Images).

 

I checked our theme store and it looks like this theme isn't included. Since this is a third-party theme, it would be outside our scope of support. I recommend connecting with the third-party developer, so that they can provide you with assistance. You can reach out to them with the link to this thread so that they have all the information to help point you in the right direction. 

 

I did do some digging through our Shopify Community forums and I found this thread that could help: Remove Featured Image from Product Thumbnails

 

You could also reach out to a Shopify Expert for assistance. Shopify Experts specialize in custom coding for themes and different features to enhance your store. You can find a list of Shopify Experts in our Experts Marketplace

 

I'm curious to see what the community has to suggest!

Tira | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Excursionist
15 0 11

Thanks for your reply, Tira.  I realize it's an unsupported theme so I posted here looking for community suggestions.  I have dug around myself and seen that post and others that have older suggestions that do not work in the current system.  I'm hoping another customer has found a solution that works for them (as happened before) but thanks for your suggestions.  Like everyone, trying to keep expenses down and I'm capable of adding a line of code or two but can't seem to get it right on my own.

 

Anyone else in this situation or have a solution that works?

1 Like
Highlighted
Excursionist
15 0 11

Still seeking a solution for this.  And it is such a small job, it has been hard to find an "Expert" to hire for it.

 

Anyone else find a way to hide the featured image on product pages that works with the new Shopify changes?

 

Thanks.

 

 

0 Likes