SHOPIFY DEBUT IMAGE INNER ZOOM THEME

------------------------------------------------------------------------------------------------------------------------- ACTUAL IMAGE ZOOM IN SHOPIFY DEBUT THEME

we also replace main image code

{% for image in product.images %}
<div class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% unless featured_image == image %} hide{% endunless %}"
data-image-id="{{ image.id }}"
{% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
<img width="800" height="300"
src="{{ image | img_url: '' }}"
alt="{{ image.alt | escape }}">
</div>
{% endfor %}

-------------------------------------------------------------------------------------------------------------------------
<div class="product-template__container page-width"
id="ProductSection-{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="product"
data-enable-history-state="true"
>
{%- assign product_image_zoom_size = '1024x1024' -%}
{%- assign enable_zoom = section.settings.enable_zoom -%}
{%- assign product_image_width = 'medium-up--one-half' -%}
{%- assign product_thumbnail_width = 'medium-up--one-quarter' -%}
{%- assign height = 530 -%}
<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
<!-- 🅸🅼🅰🅶🅴 🆂🅸🅽🅶🅻🅴 🅿🅷🅾🆃🅾 🆉🅾🅾🅼 🅲🅾🅳🅴 🆂🆃🅰🆁🆃 🅷🅴🆁🅴 -->
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
{% for image in product.images %}
<div class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% unless featured_image == image %} hide{% endunless %}"
data-image-id="{{ image.id }}"
{% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
<img 
src="{{ image | img_url: '' }}"
alt="{{ image.alt | escape }}">
</div>
{% endfor %}
</div>
</div>
-------------------------------------------------------------------------------------------------------------------------
WE CAN WRITE IMAGE THUMNAIL URL LINK IN THIS WAY
ONLY HREF LINK CHANG
WE ALSO USE CODE FOR OPTION  DROPDOWN
{% for option in product.options_with_values %}
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
{% endfor %}
-------------------------------------------------------------------------------------------------------------------------
<a href="{{ product.url | within: collection }}"
class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
data-thumbnail-id="{{ image.id }}" >
<img class="product-single__thumbnail-image" src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: image.alt | escape }}">
</a>
-------------------------------------------------------------------------------------------------------------------------

<div class="product-template__container page-width"

id="ProductSection-{{ section.id }}"

data-section-id="{{ section.id }}"

data-section-type="product"

data-enable-history-state="true"

>

{%- assign product_image_zoom_size = '1024x1024' -%}

{%- assign enable_zoom = section.settings.enable_zoom -%}

{%- assign product_image_width = 'medium-up--one-half' -%}

{%- assign product_thumbnail_width = 'medium-up--one-quarter' -%}

{%- assign height = 530 -%}

<div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{ section.settings.image_size }}-image{% endif %}">

<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">

<!-- 🅸🅼🅰🅶🅴 🆂🅸🅽🅶🅻🅴 🅿🅷🅾🆃🅾 🆉🅾🅾🅼 🅲🅾🅳🅴 🆂🆃🅰🆁🆃 🅷🅴🆁🅴 -->

{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}

{% for image in product.images %}

{% capture img_class %}product-featured-img{% endcapture %}

<div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper js">

<div

id="{{ zoom_img_id }}"

style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"

class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}{% unless featured_image == image %} hide{% endunless %}"

data-image-id="{{ image.id }}"

{% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>

<img id="{{ img_id }}"

class="feature-row__image {{ img_class }} lazyload{% unless featured_image == image %} lazypreload{% endunless %}"

src="{{ image | img_url: '300x300' }}"

data-src="{{ img_url }}"

data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"

data-aspectratio="{{ image.aspect_ratio }}"

data-sizes="auto"

tabindex="-1"

alt="{{ image.alt | escape }}">

</div>

</div>

{% endfor %}

<!-- 🅸🅼🅰🅶🅴 🆂🅸🅽🅶🅻🅴 🅿🅷🅾🆃🅾 🆉🅾🅾🅼 🅲🅾🅳🅴 🅵🅸🅽🅸🆂🅷 🅷🅴🆁🅴-->

​

<noscript>

{% capture product_image_size %}{{ height }}x{% endcapture %}

<img src="{{ featured_image | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_image.alt }}" id="FeaturedImage-{{ section.id }}" class="product-featured-img" style="max-width: {{ height }}px;">

</noscript>

​

<!-- 🅸🅼🅰🅶🅴 🆃🅷🆄🅼🅱🅽🅰🅸🅻 🅲🅾🅳🅴 🆂🆃🅰🆁🆃 🅷🅴🆁🅴 -->

<div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}">

<ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}">

{% for image in product.images %}

<li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">

<a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"

class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"

data-thumbnail-id="{{ image.id }}"

{% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>

<img class="product-single__thumbnail-image" src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: image.alt | escape }}">

</a>

</li>

{% endfor %}

</ul>

</div>

<!-- 🅸🅼🅰🅶🅴 🆃🅷🆄🅼🅱🅽🅰🅸🅻 🅲🅾🅳🅴 🅵🅸🅽🅸🆂🅷 🅷🅴🆁🅴 -->

{% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
{{ option.name }}
</label>
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
{% endfor %}
{% endunless %}
{% endform %}
<p class="visually-hidden" data-product-status
aria-live="polite"
role="status"
></p>

</div>

​

</div>

</div>

{% unless product == empty %} <script type="application/json" id="ProductJson-{{ section.id }}"> {{ product | json }} </script> {% endunless %} {% schema %} { "name": { "en": "Product pages" },

"settings": [
//==========ZoomEnableProductCodeStart==========//
{
"type": "checkbox",
"id": "enable_zoom",
"default": true,
"label": {
"en": "Enable image zoom"
}
}
//==========ZoomEnableProductCodeFinish==========//
]
}
{% endschema %}

-------------------------------------------------------------------------------------------------------------------------