Skip to content

Instantly share code, notes, and snippets.

@marioloncarek

marioloncarek/product.liquid

Created February 13, 2019 09:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save marioloncarek/2cafece03c8e645992c46b514ee00a42 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save marioloncarek/2cafece03c8e645992c46b514ee00a42 to your computer and use it in GitHub Desktop.
Download ZIP
product template with video in product images
Raw
product.liquid
<div data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true">
<section class="p-single-product js-section-single-product">
<!--single product slideshow and config-->
<div class="p-single-product__wrapper">
<div class="o-row o-row--md-fixed p-single-product__breadcrumbs-container">
<p class="p-single-product__breadcrumbs p-single-product__breadcrumbs--mobile u-b4">
{%- include 'breadcrumbs' -%}
</p>
</div>
<div class="c-product-showcase js-product-showcase">
<div class="c-product-showcase__main">
<div class="o-row o-row--md-fixed">
<div class="c-product-showcase__mobile-top-info">
<div class="c-product-config c-product-config--condensed">
<div class="c-product-config__top-wrap">
<div class="c-product-config__title-wrap">
<h2 class="u-a7 u-uppercase">
<a href="{{ product.url | within: collection }}">
{{- product.title -}} </a>
</h2>
</div>
<div class="c-product-config__price-wrap">
<!--product price-->
<div class="c-product-config__price u-b0" data-price-wrapper>
{%- assign current_variant = product.selected_or_first_available_variant -%}
<span data-product-price>
{{- current_variant.price | money -}} </span>
{%- if product.compare_at_price_max > product.price -%} <span
class="visually-hidden"
data-compare-text>{{- 'products.product.regular_price' | t -}}</span>
<s data-compare-price class="single-product__compare-price">
{%- if current_variant.compare_at_price > current_variant.price -%} {{- current_variant.compare_at_price | money -}} {%- endif -%} </s>
{%- endif -%}
</div>
<!--end product price-->
</div>
</div>
<div class="c-product-config__review">
<div class="yotpo bottomLine" data-appkey="VTwNuSnbsoyl6fu6dVaWXhimBX4LScdltHIapMOZ"
data-domain="{{ shop.permanent_domain | escape }}"
data-product-id="{{ product.id }}" data-product-models="{{ product.id }}"
data-name="{{ product.title | escape }}"
data-url="{{ shop.url }}{{ product.url }}"
data-image-url="{{ product.featured_image | product_img_url: 'large' |replace: '?', '%3F' | replace: '&','%26' }}"
data-description="{{ product.description | escape }}"
data-bread-crumbs="{%- for tag in product.tags -%}{{ tag | escape }};{%- endfor -%}">
</div>
</div>
</div>
</div>
</div>
{%- comment -%} data-product-showcase-id must be unique number {%- endcomment -%}
<div class="c-product-showcase__preview c-product-preview js-product-showcase-preview"
data-product-showcase-id="0">
{%- assign current_variant = product.selected_or_first_available_variant -%} {%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
<div class="c-product-preview__main-images">
{%- for image in product.images -%}
{%- capture wrapper_class -%}
{%- unless featured_image == image -%} hide {%- endunless -%}
{%- endcapture -%}
{% if image.alt contains 'youtube' or image.alt contains 'vimeo' %}
{% assign src = image.alt | split: 'src="' %}
{% assign src = src[1] | split: '"' | first %}
{% if src contains '?' %}
{% assign src = src | append: '&amp;autoplay=1' %}
{% else %}
{% assign src = src | append: '?autoplay=1' %}
{% endif %}
<div class="video-container {% if image.alt contains 'vimeo' %}vimeo{% else %}youtube{% endif %} {%- unless featured_image == image -%} hide {%- endunless -%}"
data-product-image-wrapper data-image-id="{{ image.id }}">
<div data-product-featured-image>
{{ image.alt }}
</div>
</div>
{% else %}
{%- include 'responsive-image' with image: image, image_class: 'c-product-preview__big-image js-intense-image' max_width: 700, max_height: 800, image_attributes: "data-product-featured-image", wrapper_class: wrapper_class, wrapper_attributes: "data-product-image-wrapper", -%}
{% endif %}
{%- endfor -%}
</div>
{%- if product.images.size > 1 -%}
<div class="c-product-preview__product-list-group">
{%- for image in product.images -%} {%- if image.variants.size > 0 and forloop.first == true -%} {%- assign current_color = image.variants[0].option1 -%}
<ul class="c-product-preview__product-list js-product-preview-thumbnail-list is-current" data-color="{{ current_color | handleize }}">
{%- endif -%} {%- if image.variants.size > 0 and image.variants[0].option1 != current_color -%}
</ul>
{%- assign current_color = image.variants[0].option1 -%}
<ul class="c-product-preview__product-list js-product-preview-thumbnail-list" data-color="{{ current_color | handleize }}">
{%- endif -%}
<li class="c-product-preview__product-list-item">
<a data-no-swup
class="c-product-preview__product-link js-product-showcase-preview-link {% if forloop.first == true %}active-thumbnail{%- endif -%}"
href="{{ image.src | img_url: '480x480' }}"
data-color="{{ current_color | handleize }}"
data-variant="{{ image.variants[0].option1 }}"
data-thumbnail-id="{{ image.id }}" data-product-single-thumbnail>
<img class="product-single__thumbnail-image c-product-preview__small-image"
src="{{ image.src | img_url: '160x160' }}"
alt="{{ image.alt | escape }}">
</a>
</li>
{%- if forloop.last == true -%}
</ul>
{%- endif -%} {%- endfor -%}
</div>
{%- endif -%}
</div>
<div class="js-product-showcase-sliders-group c-product-showcase__sliders-group"
data-product-showcase-id="0">
{%- if product.images.size > 1 -%} {%- for image in product.images -%} {%- if image.variants.size > 0 and forloop.first == true -%} {%- assign current_color = image.variants[0].option1 -%}
<div class="c-preview-slider c-slider js-preview-slider-component is-current" data-color="{{ current_color | handleize }}">
<div class="c-preview-slider__slider-container swiper-container js-preview-slider-container">
<div class="c-slider__wrapper swiper-wrapper">
{%- endif -%} {%- if image.variants.size > 0 and image.variants[0].option1 != current_color -%}
</div>
<!-- .c-slider__wrapper -->
</div>
<!-- .c-preview-slider__slider-container -->
<div class="c-preview-slider__bullets js-slider-bullets">
</div>
<!-- .c-preview-slider__bullets -->
</div>
<!-- .c-preview-slider -->
{%- assign current_color = image.variants[0].option1 -%}
<div class="c-preview-slider c-slider js-product-showcase-preview-slider js-preview-slider-component" data-color="{{ current_color | handleize }}">
<div class="c-preview-slider__slider-container swiper-container js-preview-slider-container">
<div class="c-slider__wrapper swiper-wrapper">
{%- endif -%}
<div class="c-slider__item swiper-slide">
<div class="c-slider__image js-slide-image"
style="background-image: url('{{ image.src | img_url: '480x480' }}')">
</div>
</div>
<!-- .c-slider__item -->
{%- if forloop.last == true -%}
</div>
<!-- .c-slider__wrapper -->
</div>
<!-- .c-preview-slider__slider-container -->
<div class="c-preview-slider__bullets js-slider-bullets">
</div>
<!-- .c-preview-slider__bullets -->
</div>
<!-- .c-preview-slider -->
{%- endif -%} {%- endfor -%} {%- endif -%}
</div>
<!-- .js-product-showcase-sliders-group -->
<!--single product description-->
<div class="c-product-showcase__description">
<!-- CUSTOM PRODUCT BLOCKS -->
<div class="c-product-blocks">
<!-- VARIABLES -->
<!-- two columns -->
{%- assign title_l = product.metafields.airf.title_l -%} {%- assign title_r = product.metafields.airf.title_r -%} {%- assign desc_l = product.metafields.airf.desc_l -%} {%- assign desc_r = product.metafields.airf.desc_r -%}
<!-- one column -->
{%- assign title = product.metafields.airf.title -%} {%- assign desc = product.metafields.airf.desc -%}
<!--size table-->
{%- assign s_title = product.metafields.airf.s_title -%} {%- assign s_table = product.metafields.airf.s_table -%}
<!--end size table-->
<!-- images -->
{%- assign imgs = product.metafields.airf.imgs -%}
<!-- video -->
{%- assign video = product.metafields.airf.video -%}
<!-- //VARIABLES -->
{%- if title_l and title_l != '&nbsp' -%}
<div class="c-product-blocks__item">
<div class="c-product-details js-expander">
<div class="c-product-details__info c-product-details__info--two-columns js-expander-content">
<div class="c-product-details__info-column">
<h3 class="u-a3">{{- title_l -}}</h3>
<div class="u-html-editor">
{{- desc_l -}}
</div>
</div>
<div class="c-product-details__info-column">
<h3 class="u-a3">{{- title_r -}}</h3>
<div class="u-html-editor">
{{- desc_r -}}
</div>
</div>
</div>
{%- if desc_l.size > 240 or desc_r.size > 240 -%}
<div class="c-expander">
<div class="c-expander__trigger js-expander-trigger">
<p class="u-b3 c-expander__label-wrapper">
<span class="c-expander__label c-expander__label--more">
Read More </span>
<span class="c-expander__label c-expander__label--less">
Read Less </span>
{%- include 'icon-chevron-down' -%}
</p>
</div>
</div>
{%- endif -%}
</div>
</div>
{%- endif -%} {%- if title and title != '&nbsp' -%}
<div class="c-product-blocks__item">
<div class="c-product-details js-expander">
<div class="c-product-details__info c-product-details__info--one-column js-expander-content">
<h3 class="u-a3">{{- title -}}</h3>
<div class="u-html-editor">
{{- desc -}}
</div>
</div>
{%- if desc.size > 360 -%}
<div class="c-expander">
<div class="c-expander__trigger js-expander-trigger">
<p class="u-b3 c-expander__label-wrapper">
<span class="c-expander__label c-expander__label--more">
Read More </span>
<span class="c-expander__label c-expander__label--less">
Read Less </span>
{%- include 'icon-chevron-down' -%}
</p>
</div>
</div>
{%- endif -%}
</div>
</div>
{%- endif -%} {%- if s_table and s_table != '&nbsp' -%}
<div class="c-product-blocks__item">
<div class="c-product-details">
<div class="u-html-editor u-html-editor u-html-editor--product">
<h3 class="u-a3">{{- s_title -}}</h3>
{{- s_table -}}
</div>
</div>
</div>
{%- endif -%} {%- if imgs and imgs != blank -%}
<div class="c-product-blocks__item">
<div class="c-product-details">
{%- if imgs and imgs != blank -%} {%- assign separator = "###" -%} {%- assign imgs_childs_keys = imgs | split: separator -%} {%- for imgs_child_key in imgs_childs_keys -%} {%- if imgs_child_key contains "img" -%} {%- if product.metafields.airf[imgs_child_key] != '&nbsp' -%}
<div class="c-product-details__image">
<img class="lazyload"
src="{{ product.metafields.airf[imgs_child_key] }}">
</div>
{%- endif -%} {%- endif -%} {%- endfor -%} {%- endif -%}
</div>
</div>
{%- endif -%} {%- if video and video != '&nbsp' -%}
<div class="c-product-blocks__item">
<div class="c-product-details">
<div class="c-product-details__video">
<div class="o-media-wrapper o-media-wrapper--16-9">
{{- video -}}
</div>
</div>
</div>
</div>
{%- endif -%}
</div>
<!-- //CUSTOM PRODUCT BLOCKS -->
</div>
<!--end single product description-->
</div>
<div class="c-product-showcase__side js-product-showcase-config">
<div class="p-single-product__config">
<p class="p-single-product__breadcrumbs u-b3 u-b3--normal">
{%- include 'breadcrumbs' -%}
</p>
{%- assign color = 'black' -%} {%- assign mobileTitleHidden = true -%} {%- assign colorPickerDataAttributes = 'data-product-showcase-id="0"' -%} {%- include "product-config" with mobileTitleHidden, color, colorPickerDataAttributes -%}
</div>
</div>
</div>
<!-- .c-product-showcase -->
<!--single product description-->
<div class="c-product-showcase__description--mobile">
<!-- CUSTOM PRODUCT BLOCKS -->
<div class="c-product-blocks">
<!-- VARIABLES -->
<!-- two columns -->
{%- assign title_l = product.metafields.airf.title_l -%} {%- assign title_r = product.metafields.airf.title_r -%} {%- assign desc_l = product.metafields.airf.desc_l -%} {%- assign desc_r = product.metafields.airf.desc_r -%}
<!-- one column -->
{%- assign title = product.metafields.airf.title -%} {%- assign desc = product.metafields.airf.desc -%}
<!--size table-->
{%- assign s_title = product.metafields.airf.s_title -%} {%- assign s_table = product.metafields.airf.s_table -%}
<!--end size table-->
<!-- images -->
{%- assign imgs = product.metafields.airf.imgs -%}
<!-- video -->
{%- assign video = product.metafields.airf.video -%}
<!-- //VARIABLES -->
{%- if title_l and title_l != '&nbsp' -%}
<div class="c-product-blocks__item">
<div class="c-product-details js-expander">
<div class="c-product-details__info c-product-details__info--two-columns js-expander-content">
<div class="c-product-details__info-column">
<h3 class="u-a3">{{- title_l -}}</h3>
<div class="u-html-editor">
{{- desc_l -}}
</div>
</div>
<div class="c-product-details__info-column">
<h3 class="u-a3">{{- title_r -}}</h3>
<div class="u-html-editor">
{{- desc_r -}}
</div>
</div>
</div>
{%- if desc_l.size > 240 or desc_r.size > 240 -%}
<div class="c-expander">
<div class="c-expander__trigger js-expander-trigger">
<p class="u-b3 c-expander__label-wrapper">
<span class="c-expander__label c-expander__label--more">
Read More </span>
<span class="c-expander__label c-expander__label--less">
Read Less </span>
{%- include 'icon-chevron-down' -%}
</p>
</div>
</div>
{%- endif -%}
</div>
</div>
{%- endif -%} {%- if title and title != '&nbsp' -%}
<div class="c-product-blocks__item">
<div class="c-product-details js-expander">
<div class="c-product-details__info c-product-details__info--one-column js-expander-content">
<h3 class="u-a3">{{- title -}}</h3>
<div class="u-html-editor">
{{- desc -}}
</div>
</div>
{%- if desc.size > 360 -%}
<div class="c-expander">
<div class="c-expander__trigger js-expander-trigger">
<p class="u-b3 c-expander__label-wrapper">
<span class="c-expander__label c-expander__label--more">
Read More </span>
<span class="c-expander__label c-expander__label--less">
Read Less </span>
{%- include 'icon-chevron-down' -%}
</p>
</div>
</div>
{%- endif -%}
</div>
</div>
{%- endif -%} {%- if s_table and s_table != '&nbsp' -%}
<div class="c-product-blocks__item">
<div class="c-product-details">
<div class="u-html-editor u-html-editor u-html-editor--product">
<h3 class="u-a3">{{- s_title -}}</h3>
{{- s_table -}}
</div>
</div>
</div>
{%- endif -%} {%- if imgs and imgs != blank -%}
<div class="c-product-blocks__item">
<div class="c-product-details">
{%- if imgs and imgs != blank -%} {%- assign separator = "###" -%} {%- assign imgs_childs_keys = imgs | split: separator -%} {%- for imgs_child_key in imgs_childs_keys -%} {%- if imgs_child_key contains "img" -%} {%- if product.metafields.airf[imgs_child_key] != '&nbsp' -%}
<div class="c-product-details__image">
<img class="lazyload" src="{{ product.metafields.airf[imgs_child_key] }}">
</div>
{%- endif -%} {%- endif -%} {%- endfor -%} {%- endif -%}
</div>
</div>
{%- endif -%} {%- if video and video != '&nbsp' -%}
<div class="c-product-blocks__item">
<div class="c-product-details">
<div class="c-product-details__video">
<div class="o-media-wrapper o-media-wrapper--16-9">
{{- video -}}
</div>
</div>
</div>
</div>
{%- endif -%}
</div>
<!-- //CUSTOM PRODUCT BLOCKS -->
</div>
<!--end single product description-->
</div>
<!--end single product slideshow and config-->
{%- unless product == empty -%}
<script type="application/json" data-product-json>{{- product | json -}}</script>
{%- endunless -%} </section>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment