Adding 'standard' images to a product page template

Highlighted
New Member
1 0 0

Hi,   

I am using the Debut theme and would like to create a modified product template that will add some extra images to the product thumbnails.   These images are the same for all products that use this template.

(We manufacture wooden wall decoration and I would like to show images with the different choices of wood to every product without having to add them to the actual products).

In the product-template.liquid, there  is the following segment.

{% for media in product.media %}            
              <li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} js">
                <a href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
                   class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                   data-thumbnail-id="{{ section.id }}-{{ media.id }}"
                   {% if enable_image_zoom %}data-zoom="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>

                    {%- capture thumbnailAlt -%}
                      {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
                        {{ 'sections.featured_product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                      {%- elsif media.media_type == 'model' -%}
                        {{ 'sections.featured_product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                      {%- else -%}
                        {{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                      {%- endif -%}
                    {%- endcapture -%}

                    <img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: '110x110', scale: 2 }}" alt="{{ thumbnailAlt }}">
                    {%- if media.media_type == 'video' or media.media_type =='external_video' -%}
                      <div class="product-single__thumbnail-badge">
                        {% include 'icon-video-badge-full-color' %}
                      </div>
                    {%- endif -%}
                    {%- if media.media_type == 'model' -%}
                      <div class="product-single__thumbnail-badge">
                        {% include 'icon-3d-badge-full-color' %}
                      </div>
                    {%- endif -%}
                </a>
            </li>
           {% endfor %}

 

I added a section below that adds an image:

            {% assign media="https://cdn.shopify.com/s/files/1/0290/5459/9273/files/20201016_090033-01_1024x1024_2x_fdf27379-950e-41b0-b290-98bfb281c04a.jpg?v=1605694001" %}
                <li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} js">
                <a href="{{ media }}"
                   class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                   data-thumbnail-id="{{ section.id }}-{{ media.id }}"
                   {% if enable_image_zoom %}data-zoom="{{ media }}"{% endif %}>
			       <img class="product-single__thumbnail-image" src="{{ media }}" >
                    
                </a>
            </li>

It adds the image as a thumbnail,  but clicking on the image does not display it in the large image container & allow to zoom.    That's understandable as the media.id is undefined.

Any idea what I should / could do ?

Thanks!

 

 

 

0 Likes