Hi
I’m using Shella Theme. in Shella theme there are 4 different layout that you can select, please see the image.
Layout #1 Gallery with side thumbnails: If I select this, thumbnails shows on side and tabs at bottom.
Layout #2 Gallery with thumbnails below: If I select this, thumbnails shows below and tabs at side.
What I want is that, thumbnails images to be below and tabs to be at bottom.
product-page-get-gallery.liquid Code:
{%- assign gallery_id_diff = 999999 | minus: 100000 -%}
{%- assign gallery_id = “now” | date: “%S” | modulo: gallery_id_diff | plus: 100000 -%}
{%- assign show_arrows = true -%}
{%- assign show_btn_video = settings.product_info_show_btn_video -%}
{%- assign video_autoplay = settings.product_info_video_autoplay -%}
{%- if settings.product_info_enable_fullscreen_popup -%}
{%- assign show_btn_fullscreen = settings.product_info_show_btn_fullscreen -%}
{%- endif -%}
{%- if settings.product_info_set_first_image_by_variant -%}
{%- assign current_image = current_variant.featured_media -%}
{%- elsif 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 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 settings.product_info_enable_zoom -%}
{% capture zoom_html %}
{% endcapture %}
{% capture fullscreen_zoom_html %}
{% 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 %}
{% 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 aspect_ratio: media.aspect_ratio 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' %}
{%- assign gallery_has_model = true -%}
{{ media | model_viewer_tag }}
{%- unless button_xr_html -%}
{% capture button_xr_html %}
{% include 'icon-theme-328' %}{{ 'products.product.view_in_space' | t }}
{% endcapture %}
{%- endunless -%}
{%- endcase -%}
{% endcapture %}
{%- if media.media_type == 'image' or media.media_type == 'video' -%}
{%- assign image_height_percent = 1.0 | divided_by: media.aspect_ratio | times: 100 -%}
{%- if gallery_stretch_size != 'auto' -%}
{% capture styles_responsive_html %}
{{ styles_responsive_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 }}"] .product-gallery__main_item[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 }}"] .product-gallery__main_item[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 %}
{%- endif -%}
{% capture styles_html %}
{{ styles_html }}
[data-product-gallery-id="{{ gallery_id }}"] .product-gallery__fullscreen [data-item-index="{{ forloop.index0 }}"] .product-gallery__blockratio_content {
padding-top: {{ image_height_percent }}%;
}
{%- if media.media_type == 'video' -%}
[data-product-gallery-id="{{ gallery_id }}"] .product-gallery__fullscreen [data-item-index="{{ forloop.index0 }}"] .rvideo__video {
max-width: {{ 100 | times: media.aspect_ratio }}vh;
max-height: {{ image_height_percent }}vw;
}
{%- endif -%}
{% endcapture %}
{%- else -%}
{%- endif -%}
{%- if template_layout == '5' and media.media_type == 'image' -%}
{{ zoom_html }}
{%- endif -%}
{%- 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 -%}
{%- if first_load_group == blank and current_image.media_type == 'image' -%}
{% render 'rimage' with custom_src: 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=' size: main_image_size height_procent: desktop_spacer_height_percent stretch_size: gallery_stretch_size disable_lazyload: false format: image_format alt: title %}
{% render 'rimage' with custom_src: 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=' size: main_image_size height_procent: mobile_spacer_height_percent stretch_size: gallery_stretch_size disable_lazyload: false format: image_format alt: title %}
{%- else -%}
{%- endif -%}
{% endcapture %}
{% capture main_slider_html %}
{%- if template_layout == '1' or template_layout == '2' -%}
{{ zoom_html }}
{%- endif -%}
{{ main_items_html }}
{%- if show_arrows -%}
{% render 'icon-theme-006' %}
{% render 'icon-theme-007' %}
{%- endif -%}
{{ spacer_html }}
{% comment %}
{% include 'preloader-spinner' %}
{% endcomment %}
{% endcapture %}
{%- if template_layout == ‘3’ or template_layout == ‘4’ -%}
{%- if video_autoplay -%}
{%- assign enablejsapi_enable = true -%}
{%- endif -%}
{% capture sheet_html %}
{% comment %}
{%- assign sheet_video_autoplay = video_autoplay -%}
{% endcomment %}
{%- for media in product.media -%}
{%- 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 aspect_ratio: media.aspect_ratio poster: media.preview_image.src poster_size: main_image_size controls: true autoplay: sheet_video_autoplay %}
{% when 'external_video' %}
{% render 'video-external' video_url: media.external_id enablejsapi: enablejsapi_enable controls: true autoplay: sheet_video_autoplay %}
{% when 'model' %}
{{ media | model_viewer_tag }}
{%- endcase -%}
{%- if media.media_type == 'image' -%}
{{ zoom_html }}
{%- endif -%}
{%- if media.media_type contains 'video' -%}
{%- assign sheet_video_autoplay = false -%}
{%- endif -%}
{%- endfor -%}
{% endcapture %}
{%- endif -%}
{%- if settings.product_info_show_mobile_thumbnails -%}
{% capture thumbnail_mobile_html %}
{% include 'product-page-get-gallery-thumbnails' %}
{% endcapture %}
{%- endif -%}
{%- if settings.product_info_enable_fullscreen_popup -%}
{% capture fullscreen_html %}
{% render 'icon-theme-006' %}
{% render 'icon-theme-007' %}
{% include 'icon-theme-164' %}
{{ fullscreen_zoom_html }}
{% endcapture %}
{%- endif -%}
{%- if styles_responsive_html != blank -%}
{% capture styles_responsive_html %}
{{ styles_responsive_html }}
{% endcapture %}
{%- endif -%}
{%- if styles_html != blank -%}
{% capture styles_html %}
{{ styles_html }}
{% endcapture %}
{%- endif -%}
{%- if request.design_mode or is_quick_view -%}
{%- if styles_responsive_html != blank -%}
{{ styles_responsive_html }}
{%- endif -%}
{%- if styles_html != blank -%}
{{ styles_html }}
{%- endif -%}
{%- else -%}
{%- if styles_responsive_html != blank -%}
{{ styles_responsive_html }}
{%- endif -%}
{%- if styles_html != blank -%}
{{ styles_html }}
{%- endif -%}
{%- endif -%}
{%- 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 -%}
{{ main_slider_html }}
{% include 'product-page-get-gallery-thumbnails' %}
{% render 'icon-theme-230' %}
{% render 'icon-theme-229' %}
{%- else -%}
{{ main_items_html }}
{{ zoom_html }}
{%- endif -%}
{%- elsif template_layout == '2' -%}
{%- if product.media.size > 1 -%}
{{ main_slider_html }}
{{ thumbnail_mobile_html }}
{% include 'product-page-get-gallery-thumbnails' with thumbnails_type: 'collage' %}
{%- else -%}
{{ main_items_html }}
{{ zoom_html }}
{%- endif -%}
{%- elsif template_layout == '3' -%}
{%- if product.media.size > 1 -%}
{{ main_slider_html }}
{{ thumbnail_mobile_html }}
{{ sheet_html }}
{%- else -%}
{{ main_items_html }}
{{ zoom_html }}
{%- endif -%}
{%- elsif template_layout == '4' -%}
{%- if product.media.size > 1 -%}
{{ main_slider_html }}
{{ thumbnail_mobile_html }}
{%- else -%}
{{ main_items_html }}
{{ zoom_html }}
{%- endif -%}
{%- elsif template_layout == '5' -%}
{%- if product.media.size > 1 -%}
{{ main_slider_html }}
{{ thumbnail_mobile_html }}
{%- else -%}
{{ main_items_html }}
{{ zoom_html }}
{%- endif -%}
{%- endif -%}
{%- if button_xr_html or show_btn_fullscreen or show_btn_video -%}
{%- if button_xr_html -%}
{{ button_xr_html }}
{%- endif -%}
{%- if show_btn_fullscreen or show_btn_video -%}
{%- if show_btn_fullscreen -%}
{% render 'icon-theme-166' %}{{ 'products.product.button_fullscreen' | t }}
{%- endif -%}
{%- if show_btn_video -%}
{% render 'icon-theme-211' %}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{{ fullscreen_html }}
{%- if gallery_has_model -%}
{% capture models_json %}“models_json”:{{ product.media | where: ‘media_type’, ‘model’ | json }}{% endcapture %}
{%- endif -%}
{%- if product.media.size > 1 -%}
{%- elsif settings.product_info_enable_fullscreen_popup or settings.product_info_enable_zoom and product.media.first.media_type == ‘image’ -%}
{%- endif -%}
product-page-get-gallery-thumbnails.liquid Code:
{% capture thumbnail_item_class %}{% if thumbnails_type == ‘collage’ %}col-md-2-5 px-md-5 mt-md-10{% else %}mb-md-10{% endif %}{% endcapture %}
{%- for media in product.media -%}
{% render 'rimage' with image: media size: thumbnail_image_size disable_lazyload: false format: image_format height_procent: gallery_height_procent stretch_size: 'cover' alt: title %}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
{% render 'icon-theme-211' %}
{%- elsif media.media_type == 'model' -%}
{% render 'icon-theme-322' %}
{%- endif -%}
{%- endfor -%}
product-page-get-tabs.liquid Code:
{%- if section.settings.show_tab_reviews and settings.reviews_type != ‘disable’ -%}
{% capture reviews_html %}
{%- if settings.reviews_type == ‘default’ -%}
{{ metafields.spr.reviews }}
{%- elsif settings.reviews_type == 'growave' and settings.app_growave_enable == true -%}
{% capture the_snippet_reviews %}{% render 'socialshopwave-widget-recommends' with 1 %}{% endcapture %}
{%- unless the_snippet_reviews contains 'Liquid error' -%}
{{ the_snippet_reviews }}
{%- endunless -%}
{%- elsif settings.reviews_type == 'loox' -%}
{{ product.metafields.loox.reviews }}
{%- endif -%}
{%- endcapture -%}
{%- endif -%}
{% capture tabs_html %}
{%- assign active_tab = ' data-active="true"' -%}
{%- assign custom_tab_index = 1 -%}
{%- if section.settings.show_tab_description -%}
{%- if description != blank -%}
{{ 'products.product.tabs.description' | t }}
{% capture tabs_body_html %}
{{ tabs_body_html }}
{{ 'products.product.tabs.description' | t }} {% render 'icon-theme-188' %}
{% include 'parse-for-icons' content: description %}
{% endcapture %}
{%- assign active_tab = null -%}
{%- endif -%}
{%- endif -%}
{%- for block in section.blocks -%}
{%- if block.type == 'tab_custom' -%}
{{ block.settings.title }}
{% capture tabs_body_html %}
{{ tabs_body_html }}
{%- case custom_tab_index -%}
{%- when 2 %}{% assign custom_tab_default_page = 'include-product-tab-custom-html-2' -%}
{%- else %}{% assign custom_tab_default_page = 'include-product-tab-custom-html' -%}
{%- endcase -%}
{{ block.settings.title }} {% render 'icon-theme-188' %}
{% include 'parse-page-html-content' with default_page: custom_tab_default_page page_content: block.settings.page_content html: block.settings.content %}
{% endcapture %}
{%- assign custom_tab_index = custom_tab_index | plus: 1 -%}
{%- assign active_tab = null -%}
{%- elsif block.type == 'tab_klarna_app' -%}
{%- if settings.app_klarna_enable -%}
{{ 'products.product.tabs.klarna' | t }}
{% capture tabs_body_html %}
{{ tabs_body_html }}
{{ 'products.product.tabs.klarna' | t }} {% render 'icon-theme-188' %}
{% endcapture %}
{%- assign active_tab = null -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- assign metafield_namespaces = 'tab,tab1,tab2,tab3' | split: ',' -%}
{%- for ns in metafield_namespaces -%}
{%- if metafields[ns].title and metafields[ns].content -%}
{{ metafields[ns].title }}
{% capture tabs_body_html %}
{{ tabs_body_html }}
{{ metafields[ns].title }} {% render 'icon-theme-188' %}
{% include 'parse-for-icons' content: metafields[ns].content %}
{% endcapture %}
{%- assign active_tab = null -%}
{%- endif -%}
{%- else -%}
{%- break -%}
{%- endfor -%}
{%- if section.settings.show_tab_reviews -%}
{%- if settings.reviews_type != 'disable' -%}
{{ 'products.product.tabs.reviews' | t }}
{% capture tabs_body_html %}
{{ tabs_body_html }}
{{ 'products.product.tabs.reviews' | t }} {% render 'icon-theme-188' %}
{% endcapture %}
{%- assign active_tab = null -%}
{%- endif -%}
{%- endif -%}
{%- endcapture -%}
{%- if section.settings.tabs_type == 'tabs' -%}
{%- if active_tab == null -%}
{{ tabs_html }}
{% render 'icon-theme-006' %}
{% render 'icon-theme-007' %}
{{ tabs_body_html }}
{%- else -%}
{%- if request.design_mode -%}
Add tabs in the settings Product page -> + Add block
{%- endif -%}
{%- endif -%}
{%- elsif section.settings.tabs_type == 'sheet' -%}
{%- if section.settings.show_tab_description -%}
{%- if description != blank -%}
{% include 'parse-for-icons' content: description %}
{%- assign has_tab_description = true -%}
{%- endif -%}
{%- endif -%}
{%- if section.settings.show_tab_reviews -%}
{{ reviews_html }}
{%- endif -%}
{%- endif -%}
