Product Template Copy Doesn't Work — Shella Theme by MPI Themes (Gallery + Tabs Issues)

PixelRelishDC
New Member
8 0 0

I'm using the Shella theme by MPI Themes. Mostly like it, only it is so layered that a simple thing like creating an alternate product.liquid template (and the related section and snippet copies) doesn't work:  neither the photo gallery nor custom tabs sections of the product page properly render even if I change no code beyond the Templates > product.liquid file name.

Anyone know why — and how to fix?

EXAMPLE
I need a product template for price-on-request products (and am going to need a few other simple variations, hence preferring to code myself rather than use an add-on app).
• I duplicated Templates > products.liquid and named the file product.requires-contact.liquid.
• I applied product.requires-contact.liquid to this random product, Carrie Diamond Pendant Necklace (small) (site password gierta).
• I made zero changes to the file beyond naming it product.requires-contact.liquid; it is otherwise an exact duplicate of the master Templates > product.liquid.
• Here is a screenshot of the admin for the above product: As you can see, the gallery contains multiple images. All correctly display if I choose "product" as the template but not if I choose "product.requires-contact". Again, the only difference between the two Templates is their file name.

admin_carrie2547.png
• For comparison, here is a sister product using the main product template; as you can see, its gallery displays correctly.
• And here is a product that uses a further edited alternate product template, product.prequest.liquid, Marquise Diamond Pendant Necklace with Ombre Mixed Fancy Diamond Halo (site password gierta). As you can see, I was able to edit the info (see below) just fine, however the gallery issue from step 1 remains.

What am I missing in the logic here?

FYI, I have tried my core Sections > product (see next) copy both with and without the default file's schema content; doesn't seem to make any difference. 

Here is the code for the default Templates > product.liquid:

{% section 'product' %}
{%- if settings.product_info_page_show_related_products -%}
{% section 'carousel-related-products' %} (this renders fine)
{%- endif -%}

In case useful to the question at hand, the file tree, I guess you'd call it, for where {% section 'product' %] heads is as follows:

• Templates > product.liquid feeds from…
        Sections > product.liquid
        Sections > carousel-related-products (works, so ignoring from here down)
• Sections > product.liquid feeds from…
        Includes > product-page-get-main
        Includes > product-page-get-tabs (doesn't work)
See screenshot below (when '5' zone).
Section_prodLiq_prodPrequestLiq.png

 Here is the relevant code from Snippets > product-page-get-main:

{%- case template_layout -%}
{%- when '5' -%}
<div class="product-page-main"{% include 'product-get-attributes' %} data-js-product-clone-id="footbar">
<!--PR adding row to put product name top of page-->
<div class="row justify-content-center titleBar">
<div class="col-xs-12 col-md-10">
<div class="product-page-info__title">
{%- if is_quick_view -%}
<h1 class="pgtitle"><a href="{{ url }}">{{ title }}</a></h1>
<div class="product-page-info__sku{% if sku == blank %} d-none-important{% endif %} mb-5">
<p class=" shellaSku m-0 text-center" data-js-product-sku>item <span>{{ sku }}</span></p>
</div>
{%- else -%}
<h1 class="pgtitle">{{ title }}</h1>
<div class="product-page-info__sku{% if sku == blank %} d-none-important{% endif %} mb-5">
<p class="shellaSku m-0 text-center" data-js-product-sku>item <span>{{ sku }}</span></p>
</div>
{%- endif -%}
</div>
</div>
<!--removed breadcrubms for now-->
</div>

{% include 'product-page-get-gallery' %}
{% include 'product-page-get-info' %}
</div>
{%- endcase -%}

{%- if enable_sticky_gallery -%}
<script>
Loader.require({type: "script", name: "sticky_sidebar"});
</script>
{%- endif -%}

 

The referenced Snippets > product-page-get-info works fine in all cases, even my renamed files (in my third above example, the …info page is where my main edits happened).
The referenced Snippets > product-page-get-gallery renders EXCEPT it displays/includes only the first photo of the array (of the unordered list). So here is the code for product-page-get-gallery:

{%- if product.selected_variant -%}
{%- assign current_image = current_variant.featured_media -%}
{%- else -%}
{%- assign current_image = product.media.first -%}
{%- endif -%}
{%- if settings.product_format_pjpg -%}
{%- assign image_format = 'pjpg' -%}
{%- else -%}
{%- assign image_format = null -%}
{%- endif -%}
{%- assign main_image_size = '490x' -%}
{%- assign thumbnail_image_size = '70x' -%}
{%- if settings.product_info_gallery_height_and_size_path == 'collection' -%}
{%- assign gallery_height_procent = settings.product_collection_image_height_percent -%}
{%- assign gallery_stretch_size = settings.product_collection_image_size -%}
{%- else -%}
{%- assign gallery_height_procent = settings.product_info_gallery_height_percent -%}
{%- assign gallery_stretch_size = settings.product_info_gallery_image_size -%}
{%- endif -%}
{%- if product.media.size > 1 -%}
{%- assign video_lazyload = true -%}
{%- endif -%}
{%- assign gallery_has_video = false -%}
{%- assign gallery_id_diff = 999999 | minus: 100000 -%}
{%- assign gallery_id = "now" | date: "%S" | modulo: gallery_id_diff | plus: 100000 -%}
{%- assign first_load_index = 0 -%}
{%- assign image_obj_id = 0 -%}
{%- if settings.product_info_gallery_grouped == 'enable' -%}
{%- assign gallery_grouped = true -%}
{%- elsif settings.product_info_gallery_grouped == 'tag' and product.tags contains 'group-gallery' -%}
{%- assign gallery_grouped = true -%}
{%- else -%}
{%- assign gallery_grouped = false -%}
{%- endif -%}
{%- for media in product.media -%}
{%- if media.media_type == 'image' -%}
{%- if gallery_grouped -%}
{%- if product.images[image_obj_id].variants[0].title != blank -%}
{%- assign group_split = product.images[image_obj_id].variants[0].title | split: ' / ' -%}
{%- assign group_value = group_split[0] | remove: '"' -%}
{%- if media.id == current_image.id -%}
{% capture first_load_group %}"{{ group_value }}"{% endcapture %}
{%- unless first_load_group_index -%}
{%- assign first_load_group_index = forloop.index0 -%}
{%- endunless -%}
{%- endif -%}
{%- endif -%}
{%- assign image_obj_id = image_obj_id | plus: 1 -%}
{%- elsif media.id == current_image.id -%}
{%- assign first_load_index = forloop.index0 -%}
{% break %}
{%- endif -%}
{%- endif -%}
{%- if gallery_grouped -%}
{% capture groups_arr %}{{ groups_arr }}{% if groups_arr %}___{% endif %}"{% if media.media_type != 'image' %}video_group{% else %}{{ group_value }}{% endif %}"{% endcapture %}
{%- endif -%}
{%- endfor -%}
{%- if groups_arr -%}
{%- assign groups_arr = groups_arr | split: '___' -%}
{%- endif -%}
{%- if product.media.size == 1 and video_autoplay -%}
{%- assign main_video_autoplay = true -%}
{%- endif -%}
{%- if enable_zoom -%}
{% capture zoom_html %}
<div class="product-gallery__zoom d-none d-lg-flex align-items-center absolute-lg-stretch overflow-hidden pointer-events-none invisible" data-js-product-gallery-zoom>
<div class="product-gallery__zoom_width w-100" data-js-product-gallery-zoom-width>
<div class="product-gallery__zoom_container position-lg-relative w-100 mx-lg-auto overflow-hidden" data-js-product-gallery-zoom-container>
<div class="product-gallery__zoom_container_ratio position-lg-relative" data-js-product-gallery-zoom-ratio>
<div class="product-gallery__zoom_container_zoomed position-lg-absolute">
<div class="product-gallery__zoom_image position-lg-absolute w-100 invisible" data-js-product-gallery-zoom-image></div>
</div>
</div>
</div>
</div>
</div>
{% endcapture %}
{%- endif -%}

{% capture main_items_html %}
{%- assign image_obj_id = 0 -%}
{%- for media in product.media -%}
{%- assign hold_lazyload = null -%}
{%- assign resize = null -%}
{%- assign blockratio_width = null -%}
{%- assign donothide = true -%}
{% capture media_id_index %}{{ media_id_index }}{% unless forloop.first %},{% endunless %}{{ media.id }}{% endcapture %}
<div class="product-gallery__main_item product-gallery__main_item--type-{{ media.media_type }} position-lg-relative overflow-hidden" data-js-product-gallery-main-item data-item-index="{{ forloop.index0 }}"{% if groups_arr %} data-group={{ groups_arr[forloop.index0] }}{% endif %}>
{% capture media_html %}
{%- case media.media_type -%}
{% when 'image' %}
{%- if first_load_index != forloop.index0 -%}
{%- assign hold_lazyload = true -%}
{%- assign donothide = false -%}
{%- endif -%}
{% render 'rimage' with image: media size: main_image_size disable_lazyload: false format: image_format hold_lazyload: hold_lazyload donothide: donothide alt: title %}
{% when 'video' %}
{%- assign gallery_has_video = true -%}
{%- assign video = media.sources | where: 'format', 'mp4' | first -%}
{% render 'rvideo' with video: video poster: media.preview_image.src poster_size: main_image_size autoplay: main_video_autoplay controls: true lazyload: video_lazyload %}
{% when 'external_video' %}
{%- assign gallery_has_video = true -%}
{% render 'video-external' video_url: media.external_id autoplay: main_video_autoplay controls: true enablejsapi: true lazyload: video_lazyload %}
{% when 'model' %}
<template>
<div class="model-viewer-wrapper">
{{ media | model_viewer_tag }}
</div>
</template>
{%- endcase -%}
{% endcapture %}

<!--PR CAPTION HERE RENDERS ABOVE PHOTO IN TEMPLATE 5-->

{%- if gallery_stretch_size == 'auto' or product.media.size == 1 -%}
{{ media_html }}
{%- elsif media.media_type == 'image' -%}
{%- assign image_height_percent = 1.0 | divided_by: media.aspect_ratio | times: 100 -%}
{% capture styles_html %}
{{ styles_html }}
{%- if gallery_stretch_size == 'contain' -%}
{%- if image_height_percent > gallery_height_procent -%}
{%- assign resize = 'reduce' -%}
{%- endif -%}
{%- elsif gallery_stretch_size == 'cover' -%}
{%- if image_height_percent < gallery_height_procent -%}
{%- assign resize = 'to_enlarge' -%}
{%- endif -%}
{%- elsif gallery_stretch_size == 'stretch-by-height' -%}
{%- if image_height_percent > gallery_height_procent -%}
{%- assign resize = 'reduce' -%}
{%- elsif image_height_percent < gallery_height_procent -%}
{%- assign resize = 'to_enlarge' -%}
{%- endif -%}
{%- endif -%}
{%- if resize == 'to_enlarge' -%}
{%- assign blockratio_width = gallery_height_procent | divided_by: image_height_percent | times: 100 -%}
[data-product-gallery-id="{{ gallery_id }}"] [data-item-index="{{ forloop.index0 }}"] .product-gallery__blockratio {
width: {{ blockratio_width }}%;
margin-left: -{{ blockratio_width | minus: 100 | divided_by: 2 }}% !important;
}
{%- elsif resize == 'reduce' -%}
{%- assign blockratio_width = gallery_height_procent | divided_by: image_height_percent | times: 100 -%}
[data-product-gallery-id="{{ gallery_id }}"] [data-item-index="{{ forloop.index0 }}"] .product-gallery__blockratio {
width: {{ blockratio_width }}%;
}
{%- endif -%}
[data-product-gallery-id="{{ gallery_id }}"] [data-item-index="{{ forloop.index0 }}"] .product-gallery__blockratio_content {
padding-top: {{ image_height_percent }}%;
}
{% endcapture %}
<div class="product-gallery__blockratio product-gallery__blockratio--stretch_size-{{ gallery_stretch_size }} position-lg-relative mx-lg-auto overflow-hidden" data-js-product-gallery-blockratio{% if blockratio_width %} data-width="{{ blockratio_width }}"{% endif %}>
<div class="product-gallery__blockratio_content position-lg-absolute w-100 w-100-inner" data-js-product-gallery-blockratio-content>
{{ media_html }}
</div>
</div>
{%- else -%}
<div class="product-gallery__blockratio position-lg-relative overflow-hidden" data-js-product-gallery-blockratio>
<div class="absolute-lg-stretch d-lg-flex flex-lg-center w-100-inner" data-js-product-gallery-blockratio-content>
{{ media_html }}
</div>
</div>
{%- endif -%}
{%- if template_layout == '5' and media.media_type == 'image' -%}
{{ zoom_html }}
{%- endif -%}

<!--PR ADD FOR TEMPLATE 5--><p class="imgcaption">{{ media.alt }}</p>

</div>
{%- endfor -%}
{% endcapture %}

{% capture spacer_html %}
{%- if template_layout == '3' or template_layout == '4' -%}
{%- assign gallery_size_auto = true -%}
{%- endif -%}
{%- if current_image.media_type == 'image' -%}
{%- assign mobile_spacer_height_percent = 1.0 | divided_by: current_image.aspect_ratio | times: 100 -%}
{%- else -%}
{%- assign mobile_spacer_height_percent = 56.25 -%}
{%- endif -%}
{%- if gallery_size_auto or gallery_stretch_size == 'auto' -%}
{%- assign desktop_spacer_height_percent = mobile_spacer_height_percent -%}
{%- else -%}
{%- assign desktop_spacer_height_percent = gallery_height_procent -%}
{%- endif -%}
<div class="product-gallery__main_spacer">
{%- if first_load_group == blank and current_image.media_type == 'image' -%}
<div class="product-gallery__main_spacer_inner product-gallery__main_spacer_inner--img d-none d-lg-block">
{% render 'rimage' with image: current_image size: main_image_size height_procent: desktop_spacer_height_percent stretch_size: gallery_stretch_size disable_lazyload: false format: image_format alt: title %}
</div>
<div class="product-gallery__main_spacer_inner product-gallery__main_spacer_inner--img d-lg-none">
{% render 'rimage' with image: current_image size: main_image_size height_procent: mobile_spacer_height_percent stretch_size: gallery_stretch_size disable_lazyload: false format: image_format alt: title %}
</div>
{%- else -%}
<div class="product-gallery__main_spacer_inner d-none d-lg-block" style="padding-top: {{ desktop_spacer_height_percent }}%;"></div>
<div class="product-gallery__main_spacer_inner d-lg-none" style="padding-top: {{ mobile_spacer_height_percent }}%;"></div>
{%- endif -%}
</div>
{% endcapture %}

{% capture main_slider_html %}
<div class="product-gallery__main_slider-wrapper position-relative" data-js-product-gallery-main-slider-wrapper>
{%- if template_layout == '1' or template_layout == '2' -%}
{{ zoom_html }}
{%- endif -%}
<div class="product-gallery__main_slider d-none-important" data-js-product-gallery-main-slider>
{{ main_items_html }}
</div>
{%- if show_arrows -%}
<div class="product-gallery__main_arrows product-gallery__main_arrows--type-{% if template_layout == '2' and sidebar == 'off' %}2{% else %}1{% endif %}">
<div class="product-gallery__main_arrow product-gallery__main_arrow--type-prev position-absolute d-flex flex-center rounded-circle overflow-hidden cursor-pointer{% if first_load_index == 0 %} slick-disabled{% endif %}" data-js-product-gallery-main-arrow-prev><i class="position-relative mr-1">{% render 'icon-theme-006' %}</i></div>
<div class="product-gallery__main_arrow product-gallery__main_arrow--type-next position-absolute d-flex flex-center rounded-circle overflow-hidden cursor-pointer" data-js-product-gallery-main-arrow-next><i class="position-relative ml-4">{% render 'icon-theme-007' %}</i></div>
</div>
{%- endif -%}
{{ spacer_html }}
{% comment %}
{% include 'loader-spinner' %}
{% endcomment %}
</div>
{% endcapture %}

{%- if template_layout == '3' or template_layout == '4' -%}
{% capture sheet_html %}
{%- for media in product.media -%}
<div class="product-gallery__sheet_item product-gallery__main_sheet--type-{{ media.media_type }}{% if template_layout == '4' %} col-{% if media.media_type != 'image' %}12{% else %}6{% endif %} px-5{% endif %} mb-10 overflow-hidden{% if first_load_group and groups_arr[forloop.index0] != first_load_group and groups_arr[forloop.index0] != '"video_group"' %} d-none{% endif %}" data-js-product-gallery-sheet-item data-item-index="{{ forloop.index0 }}"{% if groups_arr %} data-group={{ groups_arr[forloop.index0] }}{% endif %}>
<div class="position-relative">
<div class="product-gallery__sheet_item_inner">
{%- case media.media_type -%}
{% when 'image' %}
{% render 'rimage' with image: media size: main_image_size disable_lazyload: false format: image_format alt: title %}
{% when 'video' %}
{%- assign video = media.sources | where: 'format', 'mp4' | first -%}
{% render 'rvideo' with video: video poster: media.preview_image.src poster_size: main_image_size controls: true %}
{% when 'external_video' %}
{% render 'video-external' video_url: media.external_id controls: true %}
{% when 'model' %}
<div class="model-viewer-wrapper">
{{ media | model_viewer_tag }}
</div>
{%- endcase -%}
</div>
{%- if media.media_type == 'image' -%}
{{ zoom_html }}
{%- endif -%}
</div>
<!--PR ADD-->
<p class="imgcaption">{{ media.alt }}</p>
</div>
{%- endfor -%}
{% endcapture %}
{%- endif -%}

{%- if settings.product_info_show_mobile_thumbnails -%}
{% capture thumbnail_mobile_html %}
<div class="product-gallery__thumbnail product-gallery__thumbnail--slider d-lg-none position-relative mt-10" data-js-product-gallery-thumbnail>
<div class="product-gallery__thumbnail_slider d-none-important" data-js-product-gallery-thumbnail-slider>
{% include 'product-page-get-gallery-thumbnails' %}
</div>
</div>
{% endcapture %}
{%- endif -%}
<!--DEFAULT SPOT FOR FULLSCREEN BUTTON-->
{%- if show_btn_fullscreen -%}
{% capture fullscreen_html %}
<div class="product-gallery__fullscreen d-none fixed-stretch" data-js-product-gallery-fullscreen>
<div class="product-gallery__fullscreen_slider" data-js-product-gallery-fullscreen-slider></div>
<div class="product-gallery__fullscreen_arrows">
<div class="product-gallery__fullscreen_arrow product-gallery__fullscreen_arrow--type-prev position-lg-absolute d-lg-flex align-items-lg-center justify-content-lg-start top-0 left-0 cursor-pointer" data-js-product-gallery-fullscreen-arrow-prev>
<div class="product-gallery__fullscreen_arrow_btn position-lg-relative d-lg-flex flex-lg-center ml-30 rounded-circle overflow-hidden">
<i class="position-relative mr-1">{% render 'icon-theme-006' %}</i>
</div>
</div>
<div class="product-gallery__fullscreen_arrow product-gallery__fullscreen_arrow--type-next position-lg-absolute d-lg-flex align-items-lg-center justify-content-lg-end top-0 right-0 cursor-pointer" data-js-product-gallery-fullscreen-arrow-next>
<div class="product-gallery__fullscreen_arrow_btn position-lg-relative d-lg-flex flex-lg-center mr-30 rounded-circle overflow-hidden ">
<i class="position-relative ml-4">{% render 'icon-theme-007' %}</i>
</div>
</div>
</div>
<div class="product-gallery__fullscreen_close position-absolute d-flex flex-center top-0 right-0 mt-30 mr-30 cursor-pointer" data-js-product-gallery-control-fullscreen><i class="position-relative">{% include 'icon-theme-164' %}</i></div>
</div>
{% endcapture %}
{%- endif -%}

{%- if styles_html != blank -%}
<style media="(min-width: 1025px)">{{ styles_html }}</style>
{%- endif -%}

<div class="product-gallery product-gallery--layout-{{ template_layout }}{% if product.media.size == 1 %} product-gallery--single{% endif %}{% if template_layout == '2' and sidebar == 'off' %} product-gallery--container{% endif %} pb-20 mx-auto" data-js-product-gallery data-product-gallery-id="{{ gallery_id }}">
{%- if gallery_has_video != true or product.media.size == 1 -%}
{%- assign show_btn_video = false -%}
{%- endif -%}
{%- if template_layout == '1' -%}
{%- if product.media.size > 1 -%}
<div class="product-gallery__content d-lg-flex">
<div class="product-gallery__main position-relative order-lg-1" data-js-product-gallery-main>
{{ main_slider_html }}
</div>
<div class="product-gallery__thumbnail product-gallery__thumbnail--slider {% if settings.product_info_show_mobile_thumbnails %}pr-lg-0 mt-10 mt-lg-0{% else %}d-none d-lg-block{% endif %} position-relative mr-lg-10" data-js-product-gallery-thumbnail>
<div class="product-gallery__thumbnail_slider h-100 d-none-important" data-js-product-gallery-thumbnail-slider>
{% include 'product-page-get-gallery-thumbnails' %}
</div>
<div class="product-gallery__thumbnail_arrows position-lg-absolute bottom-0 w-100 d-none d-lg-flex flex-lg-center">
<div class="product-gallery__thumbnail_arrow product-gallery__thumbnail_arrow--type-prev d-flex px-1 cursor-lg-pointer" data-js-product-gallery-thumbnail-arrow-prev><i>{% render 'icon-theme-230' %}</i></div>
<div class="product-gallery__thumbnail_arrow product-gallery__thumbnail_arrow--type-next d-flex px-1 cursor-lg-pointer" data-js-product-gallery-thumbnail-arrow-next><i>{% render 'icon-theme-229' %}</i></div>
</div>
</div>
</div>

<script type="text/coffeescript" data-json-options-layout>
{
"thumbnail": {
"enabled": true,
"device": "all",
"slick": {
"initialSlide": {{ first_load_index }},
"slidesToShow": {% if sidebar != 'off' %}4{% else %}6{% endif %}
}
}
}
</script>
{%- else -%}
<div class="product-gallery__main position-relative" data-js-product-gallery-main>
<div class="product-gallery__main_single" data-js-product-gallery-main-single>
{{ main_items_html }}
</div>
{{ zoom_html }}
</div>
{%- endif -%}
{%- elsif template_layout == '2' -%}
{%- if product.media.size > 1 -%}
<div class="product-gallery__content">
<div class="product-gallery__main position-relative" data-js-product-gallery-main>
{{ main_slider_html }}
</div>
{{ thumbnail_mobile_html }}
<div class="product-gallery__thumbnail product-gallery__thumbnail--collage d-none d-lg-block" data-js-product-gallery-collage>
<div class="row">
{% include 'product-page-get-gallery-thumbnails' with thumbnails_type: 'collage' %}
</div>
</div>
</div>

<script type="text/coffeescript" data-json-options-layout>
{
"collage": {
"enabled": true
}
}
</script>
{%- else -%}
<div class="product-gallery__main position-relative" data-js-product-gallery-main>
<div class="product-gallery__main_single" data-js-product-gallery-main-single>
{{ main_items_html }}
</div>
{{ zoom_html }}
</div>
{%- endif -%}
{%- elsif template_layout == '3' -%}
<!--GALLERY ZOOM CONTROL NEW LOCATION TEMPLATE 3-->
{%- if show_btn_fullscreen or show_btn_video -%}
<div class="product-gallery__control d-none d-lg-flex justify-content-{% if template_layout == '5' %}center{% else %}start{% endif %} align-items-center w-100 mb-20 overflow-hidden">
<div class="row">
{%- if show_btn_fullscreen -%}
<div class="col px-10">
<div class="product-gallery__control_fullscreen d-flex align-items-center cursor-pointer" data-js-product-gallery-control-fullscreen><i class="mr-3">{% render 'icon-theme-166' %}</i>{{ 'products.product.button_fullscreen' | t }}</div>
</div>
{%- endif -%}
{%- if show_btn_video -%}
<div class="col px-10">
<div class="product-gallery__control_video d-flex align-items-center mb-1 cursor-pointer" data-js-product-gallery-control-video><i>{% render 'icon-theme-211' %}</i></div>
</div>
{%- endif -%}
</div>
</div>
{%- endif -%}

{{ fullscreen_html }}

{%- if product.media.size > 1 -%}
<div class="product-gallery__content">
<div class="product-gallery__main position-relative d-lg-none" data-js-product-gallery-main>
{{ main_slider_html }}
</div>
{{ thumbnail_mobile_html }}
<div class="product-gallery__sheet product-gallery__sheet--grid-1 d-none d-lg-block overflow-hidden" data-js-product-gallery-sheet>
{{ sheet_html }}
</div>
</div>

<script type="text/coffeescript" data-json-options-layout>
{
"main": {
"device": "mobile"
},
"sheet": {
"enabled": true
}
}
</script>
{%- else -%}
<div class="product-gallery__main position-relative" data-js-product-gallery-main>
<div class="product-gallery__main_single" data-js-product-gallery-main-single>
{{ main_items_html }}
</div>
{{ zoom_html }}
</div>
{%- endif -%}
{%- elsif template_layout == '4' -%}
{%- if product.media.size > 1 -%}
<div class="product-gallery__content">
<div class="product-gallery__main position-relative d-lg-none" data-js-product-gallery-main>
{{ main_slider_html }}
</div>
{{ thumbnail_mobile_html }}
<div class="product-gallery__sheet product-gallery__sheet--grid-2 d-none d-lg-block overflow-hidden" data-js-product-gallery-sheet data-js-product-gallery-control-fullscreen>
<div class="row align-items-start">
{{ sheet_html }}
</div>
</div>
</div>

<script type="text/coffeescript" data-json-options-layout>
{
"main": {
"device": "mobile"
},
"sheet": {
"enabled": true
}
}
</script>
{%- else -%}
<div class="product-gallery__main position-relative" data-js-product-gallery-main>
<div class="product-gallery__main_single" data-js-product-gallery-main-single>
{{ main_items_html }}
</div>
{{ zoom_html }}
</div>
{%- endif -%}
{%- elsif template_layout == '5' -%}
<!--GALLERY ZOOM CONTROL NEW LOCATION TEMPLATE 5-->
{%- if show_btn_fullscreen or show_btn_video -%}
<div class="product-gallery__control d-none d-lg-flex justify-content-{% if template_layout == '5' %}center{% else %}start{% endif %} align-items-center w-100 mb-20 overflow-hidden">
<div class="row">
{%- if show_btn_fullscreen -%}
<div class="col px-10">
<div class="product-gallery__control_fullscreen d-flex align-items-center cursor-pointer" data-js-product-gallery-control-fullscreen><i class="mr-3">{% render 'icon-theme-166' %}</i>{{ 'products.product.button_fullscreen' | t }}</div>
</div>
{%- endif -%}
{%- if show_btn_video -%}
<div class="col px-10">
<div class="product-gallery__control_video d-flex align-items-center mb-1 cursor-pointer" data-js-product-gallery-control-video><i>{% render 'icon-theme-211' %}</i></div>
</div>
{%- endif -%}
</div>
</div>
{%- endif -%}
{{ fullscreen_html }}
{%- if product.media.size > 1 -%}
<div class="product-gallery__content">
<div class="product-gallery__main position-relative" data-js-product-gallery-main>
{{ main_slider_html }}
</div>
{{ thumbnail_mobile_html }}
</div>

<script type="text/coffeescript" data-json-options-layout>
{
"main": {
"slick": {
"slidesToShow": 3,
"responsive": [
{
"breakpoint": 1024,
"settings": {
"slidesToShow": 1
}
}
]
}
}
}
</script>
{%- else -%}
<div class="product-gallery__main position-relative" data-js-product-gallery-main>
<div class="product-gallery__main_single" data-js-product-gallery-main-single>
{{ main_items_html }}
</div>
{{ zoom_html }}
</div>
{%- endif -%}
{%- endif -%}

<!--DEFAULT LOCATION FOR ZOOM CONTROL BUTTON; HIDING BY DELETING d-lg-flex (was after d-none) TO HIDE WHILE USING LAYOUT 5 BC MOVED TO ABOVE GALLERY-->
{%- if show_btn_fullscreen or show_btn_video -%}
<div class="product-gallery__control d-none justify-content-{% if template_layout == '5' %}center{% else %}end{% endif %} align-items-center w-100 mt-20 overflow-hidden">
<div class="row">
{%- if show_btn_fullscreen -%}
<div class="col px-10">
<div class="product-gallery__control_fullscreen d-flex align-items-center cursor-pointer" data-js-product-gallery-control-fullscreen><i class="mr-3">{% render 'icon-theme-166' %}</i>{{ 'products.product.button_fullscreen' | t }}</div>
</div>
{%- endif -%}
{%- if show_btn_video -%}
<div class="col px-10">
<div class="product-gallery__control_video d-flex align-items-center mb-1 cursor-pointer" data-js-product-gallery-control-video><i>{% render 'icon-theme-211' %}</i></div>
</div>
{%- endif -%}
</div>
</div>
{%- endif -%}

{{ fullscreen_html }}

{%- if product.media.size > 1 -%}
<script type="text/coffeescript" data-json-options-global>
{
"id": {{ gallery_id }},
"media_id_index": [{{ media_id_index }}],
"enable_zoom": {{ enable_zoom | json }},
{% if group_value %}
"grouped": true,
{% if groups_arr %}"group_values": [{{ groups_arr | join: ',' }}],{% endif %}
{% if first_load_group %}"first_load_group": {{ first_load_group }},{% endif %}
{% endif %}
"main": {
"enabled": true,
"stretch_size": "{{ gallery_stretch_size }}",
"gallery_has_video": {{ gallery_has_video | json }},
"video_autoplay": {{ video_autoplay | json }},
"slick": {
"initialSlide": {{ first_load_index }},
"arrows": {{ show_arrows | json }}
}
},
{% if settings.product_info_show_mobile_thumbnails %}
"thumbnail": {
"enabled": true,
"device": "mobile"
},
{% endif %}
"fullscreen": {
"enable": {{ show_btn_fullscreen | json }}
}
}
</script>

<script>
Loader.require({type: "style", name: "plugin_slick"});
Loader.require({type: "script", name: "plugin_slick"});
Loader.require({type: "script", name: "product_gallery"});
</script>
{%- elsif show_btn_fullscreen or enable_zoom and product.media.first.media_type == 'image' -%}
<script type="text/coffeescript" data-json-options-global>
{
"id": {{ gallery_id }},
"single": true,
"media_id_index": [{{ media_id_index }}],
"enable_zoom": {{ enable_zoom | json }},
"main": {
"gallery_has_video": {{ gallery_has_video | json }},
"video_autoplay": {{ video_autoplay | json }}
},
"fullscreen": {
"enable": {{ show_btn_fullscreen | json }}
}
}
</script>

<script>
Loader.require({type: "script", name: "product_gallery"});
</script>
{%- endif -%}
</div>

 

Let me know if any other info would be useful. And thanks for reading

0 Likes
PixelRelishDC
New Member
8 0 0

I found a way to edit the main templates for even my specialized product needs. Cannot figure out how to delete my above post

0 Likes