Hi @Erdem_2,
Please go to media.liquid file and change all code:
{% comment %}
Renders a media element for the product gallery.
Media types include: image, video, external_video and model.
Accepts:
- media: {Object} Media Liquid object (required)
- featured_media: {Object} Media Liquid object (required) - featured media of a given product or variant
- loading {String}
- sizes
- sizeVariable
- fallback
{% endcomment %}
{%- liquid
assign is_featured = false
if featured_media == media
assign is_featured = true
endif
assign has_video = false
assign video_type = ''
assign video_modal = false
assign image_set = false
assign image_set_group = ''
if media.alt contains '#'
assign image_set_full = media.alt | split: '#' | last
if image_set_full contains '_'
assign image_set = true
assign image_set_group = image_set_full | split: '_' | first
endif
endif
-%}
<div class="product-main-slide {% if is_featured %}starting-slide{% else %}secondary-slide{% endif %}"
data-index="{{ loopIndex0 }}"
{% if image_set %}
data-set-name="{{image_set_group}}"
data-group="{{image_set_full}}"
{% endif %}>
{%- liquid
case media.media_type
when 'external_video'
assign has_video = true
assign video_type = media.host
assign video_id = media.external_id
when 'video'
assign has_video = true
assign video_type = 'mp4'
endcase
if has_video and video_style == 'unmuted'
assign video_modal = true
endif
-%}
<div data-product-image-main class="product-image-main">
{%- liquid
assign media_aspect_ratio = media.aspect_ratio
assign media_width = 800
assign media_height = 800
if media.media_type != 'image'
assign media_width = media.preview_image.width
assign media_height = media.preview_image.height
endif
-%}
{%- if media.media_type == 'model' -%}
{%- liquid
if media.preview_image.aspect_ratio
assign media_aspect_ratio = media.preview_image.aspect_ratio
endif
-%}
<div
class="image-wrap" style="height: 0; padding-bottom: {{ 100 | divided_by: media_aspect_ratio }}%;"
data-product-media-type-model
data-media-id="{{ section_id }}-{{ media.id }}">
{{ media | model_viewer_tag: image_size: product_zoom_size, reveal: 'interaction', toggleable: true, data-model-id: media.id }}
</div>
<button class="hide btn btn--circle btn--static product-single__close-media">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-close" viewBox="0 0 64 64"><title>icon-X</title><path d="m19 17.61 27.12 27.13m0-27.12L19 44.74"/></svg>
</button>
{%- else -%}
{%- if has_video and video_style == 'unmuted' -%}
{%- assign media_aspect_ratio = media.preview_image.aspect_ratio -%}
{%- endif -%}
<div class="image-wrap{% if has_video and video_modal == false %} hide{% endif %}" style="height: 0; padding-bottom: {{ 100 | divided_by: media_aspect_ratio }}%;">
{%- capture image_classes -%}
{% if product_zoom_enable %}photoswipe__image{% endif %}
{%- endcapture -%}
{%- render 'image-element',
img: media.preview_image,
type: 'photoswipe',
classes: image_classes,
alt: media.alt | escape | split: '#' | first,
widths: '360, 540, 720, 900, 1080',
product_zoom_size: product_zoom_size,
loopIndex: loopIndex,
media: media,
media_width: media_width,
media_height: media_height,
sizes: sizes,
sizeVariable: sizeVariable,
fallback: fallback,
loading: loading,
-%}
{%- if product_zoom_enable and media.media_type == 'image' -%}
<button type="button" class="btn btn--no-animate btn--body btn--circle js-photoswipe__zoom product__photo-zoom">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-search" viewBox="0 0 64 64"><title>icon-search</title><path d="M47.16 28.58A18.58 18.58 0 1 1 28.58 10a18.58 18.58 0 0 1 18.58 18.58ZM54 54 41.94 42"/></svg>
<span class="icon__fallback-text">{{ 'general.accessibility.close_modal' | t }}</span>
</button>
{%- endif -%}
</div>
{%- if has_video and video_modal -%}
{%- if video_type == 'youtube' -%}
<a href="https://youtube.com/watch?v={{ media.external_id }}" class="btn btn--circle btn--large btn--static product-video-trigger"
data-video-id="{{ media.external_id }}"
>
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-play" viewBox="18.24 17.35 24.52 28.3"><path fill="#323232" d="M22.1 19.151v25.5l20.4-13.489-20.4-12.011z"/></svg>
</a>
{%- endif -%}
{%- if video_type == 'vimeo' -%}
<a href="https://player.vimeo.com/video/{{ media.external_id }}"
class="btn btn--circle btn--large btn--static product-video-trigger"
data-video-id="{{ media.external_id }}"
data-video-loop="{{ video_looping }}"
>
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-play" viewBox="18.24 17.35 24.52 28.3"><path fill="#323232" d="M22.1 19.151v25.5l20.4-13.489-20.4-12.011z"/></svg>
</a>
{%- endif -%}
{%- if video_type == 'mp4' -%}
<button type="button" class="btn btn--circle btn--large btn--static product-video-trigger product-video-trigger--mp4">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-play" viewBox="18.24 17.35 24.52 28.3"><path fill="#323232" d="M22.1 19.151v25.5l20.4-13.489-20.4-12.011z"/></svg>
</button>
{% comment %}
Hidden video element that gets placed in the video modal
{% endcomment %}
<video
playsinline
{% if video_looping %}loop{% endif %}
controls
controlsList="nodownload"
poster="{{ media.preview_image | img_url: product_image_size }}"
class="hide product-video-mp4-sound">
{%- for source in media.sources -%}
<source src="{{ source.url }}" type="{{ source.mime_type }}">
{%- endfor -%}
Your browser does not support the video tag.
</video>
{%- endif -%}
{%- endif -%}
{%- if has_video -%}
{%- unless video_modal -%}
<div
data-video-type="{{ video_type }}"
class="product__video-wrapper{% if video_type == 'youtube' or video_type == 'vimeo' %} loading{% endif %}"
data-video-style="{{ video_style }}"
style="padding-bottom: {{ 100 | divided_by: media.aspect_ratio }}%;">
{%- if video_type == 'youtube' or video_type == 'vimeo' -%}
<div
id="ProductVideo-{{ section_id }}-{{ loopIndex }}"
class="product__video"
data-image-count="{{ product.media.size }}"
data-video-type="{{ video_type }}"
data-video-style="{{ video_style }}"
data-video-loop="{{ video_looping }}"
data-video-id="{{ video_id }}"
>
</div>
{%- endif -%}
{%- if video_type == 'mp4' -%}
<video
playsinline
{% if video_looping %}loop{% endif %}
{% if video_style == 'muted' %}muted{% endif %}
{% if video_style == 'unmuted' %}controls{% endif %}
controlsList="nodownload"
poster="{{ media.preview_image | img_url: product_image_size }}"
data-image-count="{{ product.media.size }}"
data-video-type="{{ video_type }}"
data-video-style="{{ video_style }}"
id="ProductVideo-{{ section_id }}-{{ loopIndex }}"
class="product__video">
{%- for source in media.sources -%}
<source src="{{ source.url }}" type="{{ source.mime_type }}">
{%- endfor -%}
Your browser does not support the video tag.
</video>
{%- endif -%}
</div>
{%- endunless -%}
{%- endif -%}
{%- endif -%}
</div>
</div>
