{%- capture action_list_items -%}
{%- if section.settings.enable_image_zoom -%}
{%- endif -%}
{%- if share_buttons_block != blank -%}
{%- endif -%}
{%- endcapture -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
PRODUCT GALLERY
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- assign initial_media_id = product.featured_media.id -%}
{%- assign initial_media_index = 0 -%}
{%- assign media_count = 0 -%}
{%- capture slideshow_media -%}
{%- for media in product.media -%}
{%- if product.selected_variant and media.id == product.selected_variant.featured_media.id -%}
{%- assign initial_media_index = media_count -%}
{%- assign initial_media_id = media.id -%}
{%- endif -%}
{%- capture supported_sizes -%}{%- render 'image-size', sizes: '200,400,600,700,800,900,1000,1200,1400,1600', image: media -%}{%- endcapture -%}
{%- case media.media_type -%}
{%- when 'image' -%}
{%- when 'external_video' -%}
{%- when 'video' -%}
{%- when 'model' -%}
{%- endcase -%}
{%- assign media_count = media_count | plus: 1 -%}
{%- endfor -%}
{%- endcapture -%}
{%- if product.media.size > 0 -%}
{% render 'product-item', product: associated_product, use_horizontal: true, show_labels: false, show_product_info: true, show_vendor: false, show_price_on_hover: false %}
{%- endif -%}
{%- endcapture -%}
{%- if product_aside != blank -%}
{% assign image_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
![{{ media.alt | escape }}]()
{{- media | external_video_tag: image_size: '1024x' -}}
{{- media | video_tag: image_size: '1024x', controls: true -}}
{{- media | model_viewer_tag: image_size: '1024x', reveal: 'interaction', toggleable: true -}}
{%- if action_list_items != blank -%}
{%- endif -%}
{%- capture slideshow_nav -%}
{%- if media_count > 1 -%}
{%- if section.settings.show_thumbnails -%}
{%- endif -%}
{%- if section.settings.stack_images -%}
{%- endif -%}
{%- endif -%}
{%- endcapture -%}
{%- if section.settings.stack_images -%}
{{- slideshow_nav -}}
{%- endif -%}
{%- capture flickity_options -%}
{
"prevNextButtons": false,
"pageDots": false,
"adaptiveHeight": true,
"watchCSS": true,
"dragThreshold": 8,
"initialIndex": {{ initial_media_index }},
"arrowShape": {"x0": 20, "x1": 60, "y1": 40, "x2": 60, "y2": 35, "x3": 25}
}
{%- endcapture -%}
{%- endif -%}
{%- unless section.settings.stack_images -%}
{{- slideshow_nav -}}
{%- endunless -%}
{%- endif -%}
{%- capture product_aside -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
PRODUCT TABS
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- render 'product-tabs' -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
PRODUCT WEAR IT WITH
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- assign buy_it_with_block = section.blocks | where: 'type', 'buy_it_with' | first -%}
{%- if buy_it_with_block != blank and buy_it_with_block.settings.product != blank -%}
{%- assign associated_product = buy_it_with_block.settings.product -%}
{%- for media in product.media -%}
{%- capture nav_item_badge -%}
{%- case media.media_type -%}
{%- when 'model' -%}
{% render 'icon', icon: 'media-model-badge' %}
{%- when 'video' or 'external_video' -%}
{% render 'icon', icon: 'media-video-badge' %}
{%- endcase -%}
{%- endcapture -%}
{%- if section.settings.stack_images -%}
{{- nav_item_badge -}}
{%- else -%}
{{- nav_item_badge -}}
{%- endif -%}
{%- endfor -%}
{{ slideshow_media }}
{%- comment -%}Add the "view in your space" button, which allows to show the product in customer's environment (if the device supports it){%- endcomment -%}
{%- assign first_3d_model = product.media | where: 'media_type', 'model' | first -%}
{%- if first_3d_model -%}
{%- endif -%}
{%- if media_count > 1 -%}
{%- comment -%}
IMPLEMENTATION NOTE: The reason we create ourselves our own UI instead of relying of the built-in feature of Flickity is that,
since the media API, Shopify requires to add arrows next to the dot. Unfortunately this layout is not
achievable easily using Flickity options only, so we have to run our own
{%- endcomment -%}
{%- for i in (1..media_count) -%}
{%- endfor -%}
{{ buy_it_with_block.settings.title | escape }}
{%- assign has_ouputted_variant_selector = false -%}
{%- form 'product', product, class: 'ProductForm' -%}
{%- render 'product-data', product: product -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when '@app' -%}
{%- render block -%}
{%- when 'product_meta' -%}
{%- render 'product-meta', form: form, block: block, product: product -%}
{%- when 'description' -%}
{%- if product.description != blank -%}
{%- endif -%}
{%- when 'share_buttons' -%}
{%- when 'variant_selector' -%}
{%- assign has_ouputted_variant_selector = true -%}
{%- render 'product-form', block: block, product: product -%}
{%- when 'quantity_selector' -%}
{{- product.description | replace: 'data-section-type', 'data-section-type-placeholder' -}}
{%- if block.settings.show_label -%}
{{ 'product.form.quantity' | t }}:
{%- endif -%}
{%- when 'inventory' -%}
{%- assign hide_inventory_quantity_by_default = false -%}
{%- if product.selected_or_first_available_variant.inventory_management == blank or product.selected_or_first_available_variant.inventory_quantity <= 0 -%}
{%- assign hide_inventory_quantity_by_default = true -%}
{%- endif -%}
{%- if block.settings.inventory_quantity_threshold != 0 and product.selected_or_first_available_variant.inventory_quantity > block.settings.inventory_quantity_threshold -%}
{%- assign hide_inventory_quantity_by_default = true -%}
{%- endif -%}
{%- assign quantity_minus_one = line_item.quantity | minus: 1 -%}
{%- if block.settings.inventory_quantity_threshold == 0 -%} {{- 'product.form.inventory_quantity_count' | t: count: product.selected_or_first_available_variant.inventory_quantity -}} {%- else -%} {{- 'product.form.low_inventory_quantity_count' | t: count: product.selected_or_first_available_variant.inventory_quantity -}} {%- endif -%}
{%- when 'buy_buttons' -%} {%- if block.settings.show_payment_button == false or product.selling_plan_groups.size > 0 -%} {%- assign use_primary_button = true -%} {%- else -%} {%- assign use_primary_button = false -%} {%- endif -%}
{%- if block.settings.show_payment_button and product.selected_or_first_available_variant.available == false -%}
{%- endif -%}
{%- if block.settings.show_payment_button and product.template_suffix != 'pre-order' -%}
{{ form | payment_button }}
{%- endif -%}
{%- when 'store_pickup' -%}
{%- comment -%}The availability container will be added automatically if there is store pickup available{%- endcomment -%}
{%- when 'text' -%}
{%- if block.settings.text != blank -%}
{{- block.settings.text -}}
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
{%- unless has_ouputted_variant_selector -%}
{%- comment -%}If for any reason the merchant has removed the variant selector block, we still output the ID here{%- endcomment -%}
{%- endunless -%}
{%- endform -%}
{%- if section.settings.stack_images and product_aside != blank and media_count > 0 -%}
{%- endif -%}
{{- product_aside -}}
{%- endif -%}