Always have the first picture only in main product gallery as a link instead of zoom!?

iwonder · June 13, 2022, 10:17pm

At all possible?

Or maybe, all pictures instead of zoom… link!?

Thank you for your time.

iwonder · June 16, 2022, 3:05pm

@LitExtension - @LitCommerce - @made4Uo - @Denishamakwana

THANK YOU

LitCommerce · June 16, 2022, 4:01pm

Hi @iwonder ,

Can you send me screenshots? I will check it.

LitCommerce · June 17, 2022, 2:08pm

Hi @iwonder ,

You are using Dawn theme, please send me the code of product-thumbnail.liquid file, I will help you to change it and add a link to it according to the alt of the image.

iwonder · June 17, 2022, 2:44pm

Thank you @LitCommerce

Start ------>

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{% comment %}
Renders a product thumbnail with a modal-opener

Accepts:

media: {Object} Product Media object
position: {String} Position of the media. Used for accessible label.
loop: {Boolean} Enable video looping (optional)
modal_id: {String} The product modal that will be shown by clicking the thumbnail
xr_button: {Boolean} Renders the “View in your space” button (shopify-xr-button) if the media is a 3D Model
media_width: {Float} The width percentage that the media column occupies on desktop.
lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)

Usage:
{% render ‘product-thumbnail’,
media: media,
position: forloop.index,
loop: section.settings.enable_video_looping,
modal_id: section.id
%}
{% endcomment %}

{%- if media.media_type == 'video' or media.media_type == 'external_video' -%} {% render 'icon-play' %}

${{ media.preview_image.alt | escape }}$

{{ 'products.product.video_exit_message' | t: title: product.title | escape }} {%- else -%}

${{ media.preview_image.alt | escape }}$

{%- endif -%} {%- liquid case media.media_type when 'video' or 'external_video' render 'icon-play' when 'model' render 'icon-3d-model' else render 'icon-zoom' endcase -%}

${{ media.preview_image.alt | escape }}$

{%- if media.media_type != ‘image’ -%}
{%- if media.media_type == ‘model’ -%}

{%- else -%}

{%- endif -%}

{%- if media.media_type == ‘model’ -%}
{{ ‘products.product.media.play_model’ | t }}
{%- render ‘icon-3d-model’ -%}
{%- else -%}
{{ ‘products.product.media.play_video’ | t }}
{%- render ‘icon-play’ -%}
{%- endif -%}

<img
srcset=“{% if media.preview_image.width >= 493 %}{{ media.preview_image | image_url: width: 493 }} 493w,{% endif %}
{% if media.preview_image.width >= 600 %}{{ media.preview_image | image_url: width: 600 }} 600w,{% endif %}
{% if media.preview_image.width >= 713 %}{{ media.preview_image | image_url: width: 713 }} 713w,{% endif %}
{% if media.preview_image.width >= 823 %}{{ media.preview_image | image_url: width: 823 }} 823w,{% endif %}
{% if media.preview_image.width >= 990 %}{{ media.preview_image | image_url: width: 990 }} 990w,{% endif %}
{% if media.preview_image.width >= 1100 %}{{ media.preview_image | image_url: width: 1100 }} 1100w,{% endif %}
{% if media.preview_image.width >= 1206 %}{{ media.preview_image | image_url: width: 1206 }} 1206w,{% endif %}
{% if media.preview_image.width >= 1346 %}{{ media.preview_image | image_url: width: 1346 }} 1346w,{% endif %}
{% if media.preview_image.width >= 1426 %}{{ media.preview_image | image_url: width: 1426 }} 1426w,{% endif %}
{% if media.preview_image.width >= 1646 %}{{ media.preview_image | image_url: width: 1646 }} 1646w,{% endif %}
{% if media.preview_image.width >= 1946 %}{{ media.preview_image | image_url: width: 1946 }} 1946w,{% endif %}
{{ media.preview_image | image_url }} {{ media.preview_image.width }}w”
src=“{{ media | image_url: width: 1946 }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: media_width | round }}px, (min-width: 990px) calc({{ media_width | times: 100 }}vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)”
{% unless lazy_load == false %}loading=“lazy”{% endunless %}
width=“973”
height=“{{ 973 | divided_by: media.preview_image.aspect_ratio | ceil }}”
alt=“{{ media.preview_image.alt | escape }}”

{%- liquid case media.media_type when 'external_video' assign video_class = 'js-' | append: media.host if media.host == 'youtube' echo media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: "lazy" else echo media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: "lazy" endif when 'video' echo media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none" when 'model' echo media | media_tag: image_size: "2048x", toggleable: true endcase -%}

{%- if media.media_type == ‘model’ -%}

{%- if xr_button -%}
<button
class=“button button–full-width product__xr-button”
type=“button”
aria-label=“{{ ‘products.product.xr_button_label’ | t }}”
data-shopify-xr
data-shopify-model3d-id=“{{ media.id }}”
data-shopify-title=“title”
data-shopify-xr-hidden

{% render ‘icon-3d-model’ %}
{{ ‘products.product.xr_button’ | t }}

{%- endif -%}
{%- else -%}

{%- endif -%}
{%- endif -%}

iwonder · June 17, 2022, 3:13pm

Thank you @LitCommerce

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{% comment %}
Renders a product thumbnail with a modal-opener

Accepts:

media: {Object} Product Media object
position: {String} Position of the media. Used for accessible label.
loop: {Boolean} Enable video looping (optional)
modal_id: {String} The product modal that will be shown by clicking the thumbnail
xr_button: {Boolean} Renders the “View in your space” button (shopify-xr-button) if the media is a 3D Model
media_width: {Float} The width percentage that the media column occupies on desktop.
lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)

Usage:
{% render ‘product-thumbnail’,
media: media,
position: forloop.index,
loop: section.settings.enable_video_looping,
modal_id: section.id
%}
{% endcomment %}

{%- if media.media_type == 'video' or media.media_type == 'external_video' -%} {% render 'icon-play' %}

${{ media.preview_image.alt | escape }}$

{{ 'products.product.video_exit_message' | t: title: product.title | escape }} {%- else -%}

${{ media.preview_image.alt | escape }}$

{%- endif -%} {%- liquid case media.media_type when 'video' or 'external_video' render 'icon-play' when 'model' render 'icon-3d-model' else render 'icon-zoom' endcase -%}

${{ media.preview_image.alt | escape }}$

{%- if media.media_type != ‘image’ -%}
{%- if media.media_type == ‘model’ -%}

{%- else -%}

{%- endif -%}

{%- if media.media_type == ‘model’ -%}
{{ ‘products.product.media.play_model’ | t }}
{%- render ‘icon-3d-model’ -%}
{%- else -%}
{{ ‘products.product.media.play_video’ | t }}
{%- render ‘icon-play’ -%}
{%- endif -%}

<img
srcset=“{% if media.preview_image.width >= 493 %}{{ media.preview_image | image_url: width: 493 }} 493w,{% endif %}
{% if media.preview_image.width >= 600 %}{{ media.preview_image | image_url: width: 600 }} 600w,{% endif %}
{% if media.preview_image.width >= 713 %}{{ media.preview_image | image_url: width: 713 }} 713w,{% endif %}
{% if media.preview_image.width >= 823 %}{{ media.preview_image | image_url: width: 823 }} 823w,{% endif %}
{% if media.preview_image.width >= 990 %}{{ media.preview_image | image_url: width: 990 }} 990w,{% endif %}
{% if media.preview_image.width >= 1100 %}{{ media.preview_image | image_url: width: 1100 }} 1100w,{% endif %}
{% if media.preview_image.width >= 1206 %}{{ media.preview_image | image_url: width: 1206 }} 1206w,{% endif %}
{% if media.preview_image.width >= 1346 %}{{ media.preview_image | image_url: width: 1346 }} 1346w,{% endif %}
{% if media.preview_image.width >= 1426 %}{{ media.preview_image | image_url: width: 1426 }} 1426w,{% endif %}
{% if media.preview_image.width >= 1646 %}{{ media.preview_image | image_url: width: 1646 }} 1646w,{% endif %}
{% if media.preview_image.width >= 1946 %}{{ media.preview_image | image_url: width: 1946 }} 1946w,{% endif %}
{{ media.preview_image | image_url }} {{ media.preview_image.width }}w”
src=“{{ media | image_url: width: 1946 }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: media_width | round }}px, (min-width: 990px) calc({{ media_width | times: 100 }}vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)”
{% unless lazy_load == false %}loading=“lazy”{% endunless %}
width=“973”
height=“{{ 973 | divided_by: media.preview_image.aspect_ratio | ceil }}”
alt=“{{ media.preview_image.alt | escape }}”

{%- liquid case media.media_type when 'external_video' assign video_class = 'js-' | append: media.host if media.host == 'youtube' echo media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: "lazy" else echo media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: "lazy" endif when 'video' echo media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none" when 'model' echo media | media_tag: image_size: "2048x", toggleable: true endcase -%}

{%- if media.media_type == ‘model’ -%}

{%- if xr_button -%}
<button
class=“button button–full-width product__xr-button”
type=“button”
aria-label=“{{ ‘products.product.xr_button_label’ | t }}”
data-shopify-xr
data-shopify-model3d-id=“{{ media.id }}”
data-shopify-title=“title”
data-shopify-xr-hidden

{% render ‘icon-3d-model’ %}
{{ ‘products.product.xr_button’ | t }}

{%- endif -%}
{%- else -%}

{%- endif -%}
{%- endif -%}

LitCommerce · June 17, 2022, 4:03pm

Hi @iwonder ,

Please change all code:

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{% comment %}
Renders a product thumbnail with a modal-opener

Accepts:
- media: {Object} Product Media object
- position: {String} Position of the media. Used for accessible label.
- loop: {Boolean} Enable video looping (optional)
- modal_id: {String} The product modal that will be shown by clicking the thumbnail
- xr_button: {Boolean} Renders the "View in your space" button (shopify-xr-button) if the media is a 3D Model
- media_width: {Float} The width percentage that the media column occupies on desktop.
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)

Usage:
{% render 'product-thumbnail',
media: media,
position: forloop.index,
loop: section.settings.enable_video_looping,
modal_id: section.id
%}
{% endcomment %}

  
    {%- liquid
case media.media_type
when 'video' or 'external_video'
render 'icon-play'
when 'model'
render 'icon-3d-model'
else
render 'icon-zoom'
endcase
-%}
  

  

    
  

  
    
      {{ 'products.product.media.open_media' | t: index: position }}
    
  

{%- if media.media_type != 'image' -%}
{%- if media.media_type == 'model' -%}

  {%- if xr_button -%}
  
  {%- endif -%}
  {%- else -%}
  
{%- endif -%}
{%- endif -%}

Then you just need to go to Products Admin and add link for image alt, it will work fine.

Refer https://help.shopify.com/en/manual/products/product-media/add-alt-text

Hope it helps!

iwonder · June 17, 2022, 5:47pm

Top!★★★★★ Thank you @LitCommerce

iwonder · June 17, 2022, 7:18pm

Do you think adding an Alt Text as a URL address will negatively impact the sites SEO?

LitCommerce · June 18, 2022, 3:21am

Hi @iwonder ,

If you are afraid of affecting SEO, you just need to change the code here, the text you can change yourself, and everything will work fine

Hope it is clear to you.

iwonder · June 18, 2022, 9:34am

Thank you @LitCommerce , I’m not sure, change the code as in delete “{{ media.preview_image.alt }}”? to alt=“Product Image”?

LitCommerce · June 19, 2022, 2:23am

Hi @iwonder ,

Because you are afraid that changing the alt with the link will affect SEO, so you just need to change the alt display here, it will work without affecting SEO.

Hope it is clear to you.

iwonder · June 20, 2022, 7:42pm

Thank you @LitCommerce , would the image still be a link?

LitCommerce · June 21, 2022, 7:53am

Hi @iwonder ,

Yes, the image is still linked, it just helps you fix the SEO according to what you were worried about.

iwonder · June 21, 2022, 11:09pm

Thank you for your time @LitCommerce , what does alt"Product image" do exactly? Does it pull the product image name?

LitCommerce · June 22, 2022, 4:53am

Hi @iwonder ,

You can refer: https://www.w3schools.com/tags/att_img_alt.asp

Hope it is clear to you.

Topic		Replies	Views
Alt text to display on Product images? Store Design design , customizations , shopify-themes	22	180	August 8, 2025
Make Featured Product image link to product page Store Design	17	175	September 2, 2024
Blurry Product Thumbnails On Product Pages! Store Design	4	19	September 25, 2022
autoplay video thumbnail Store Design product-page	10	37	April 9, 2025
Can I link a product photo directly to an external website on Ira theme? Store Design	17	145	October 8, 2024

Always have the first picture only in main product gallery as a link instead of zoom!?

Related topics