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.
• 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).
Here is the relevant code from Snippets > product-page-get-main:
{%- case template_layout -%}
{%- when ‘5’ -%}
{{ title }}
item {{ sku }}
{{ title }}
item {{ sku }}
{% include ‘product-page-get-gallery’ %}
{% include ‘product-page-get-info’ %}
{%- if enable_sticky_gallery -%}
{%- 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 %}
{% 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 %}
{%- 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 %}
{{ media.alt }}
{% 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 -%}
{% capture main_slider_html %}
{%- if template_layout == ‘3’ or template_layout == ‘4’ -%}
{% capture sheet_html %}
{%- for media in product.media -%}
{{ media.alt }}
{%- if settings.product_info_show_mobile_thumbnails -%}
{% capture thumbnail_mobile_html %}
{%- if styles_html != blank -%}
{{ styles_html }}{%- endif -%}
{%- else -%}
{%- else -%}
{{ fullscreen_html }}
{%- if product.media.size > 1 -%}
{%- else -%}
{%- else -%}
{%- else -%}
{%- if show_btn_fullscreen or show_btn_video -%}
{{ fullscreen_html }}
{%- if product.media.size > 1 -%}
{%- elsif show_btn_fullscreen or enable_zoom and product.media.first.media_type == ‘image’ -%}
{%- endif -%}
Let me know if any other info would be useful. And thanks for reading 