<div class="product-section"
id="ProductSection-{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="product"
data-image-zoom-enable="{{ section.settings.zoom_enable }}">
<div class="product-page">
<div class="wrapper" data-product-wrapper>
{% if section.settings.product_breadcrumbs %}
{% include 'breadcrumb' %}
{% endif %}
{% assign current_variant = product.selected_or_first_available_variant %}
{%- assign product_image_width = 'large--two-thirds' -%}
{%- assign product_description_width = 'large--one-third' -%}
<div class="grid product-single">
<div class="grid__item {{ product_image_width }}">
<div class="product__slides product-single__photos" data-product-slideshow data-product-single-media-group>
{% for media in product.media %}
{% include 'media', media: media, featured_media: product.featured_media, sectionkey: section.id %}
{% endfor %}
</div>
{% assign first_3d_model = product.media | where: "media_type", "model" | first %}
{% if first_3d_model %}
<button
class="btn btn--clear btn--ar product-single__view-in-space"
data-shopify-xr
data-shopify-model3d-id="{{ first_3d_model.id }}"
data-shopify-title="{{ product.title }}"
data-shopify-xr-hidden>
{% include 'icon-media-model' %}
<span class="product-single__view-in-space-text">{{ 'products.product.view_in_space' | t }}</span>
</button>
{% endif %}
<noscript>
{% for image in product.media %}
<img src="{{ image.preview_image | img_url: '900x' }}" alt="{{ image.alt | default: product.title }}">
{% endfor %}
</noscript>
{% if product.media.size > 1 %}
<div data-product-thumbs class="product__thumbs--square"></div>
{%- endif -%}
</div>
<div class="grid__item {{ product_description_width }}" id="productInfo-{{ section.id }}">
<div class="text-center">
{%- if section.settings.show_price_above -%}
<h5 class="product__price uppercase h5{% if current_variant.compare_at_price > current_variant.price %} on-sale{% endif %}">
<span class="money"><span id="ProductPrice-{{ section.id }}">{{ current_variant.price | money }}</span></span>
<p class="small compare-at em" id="ComparePriceWrapper-{{ section.id }}" {% unless current_variant.compare_at_price > current_variant.price %}style="display: none"{% endunless %}>
<span class="money"><span id="ComparePrice-{{ section.id }}">{{ product.compare_at_price_max | money }}</span></span>
</p>
</h5>
{%- endif -%}
{% if section.settings.product_show_vendor and product.vendor %}
<p><a href="{{ product.vendor | url_for_vendor }}" class="border-bottom-link uppercase">{{ product.vendor }}</a></p>
{% endif %}
<h1 class="h2">{{ product.title }}</h1>
{%- if section.settings.form_position == 'above' -%}
<div class="product__form">
{% comment %}
Optional size chart - controlled by Magnific Popup
{% endcomment %}
{% if section.settings.info_page != blank %}
{% assign size_page = pages[section.settings.info_page] %}
<p class="text-center">
<a id="toggleProductModal-{{ section.id }}" class="border-bottom-link uppercase" data-mfp-src="#ProductModal-{{ section.id }}">
{{ size_page.title }}
</a>
</p>
<div id="ProductModal-{{ section.id }}" class="product-modal mfp-hide">
<div class="rte">{{ size_page.content }}</div>
</div>
{% endif %}
{% unless product.template_suffix contains 'charge-rabbit' %}
<div id="AddToCartForm-{{ section.id }}" data-section="{{ section.id }}" class="product-form-{{section.id}} product-form">
{% form 'product', product %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js">
<label for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<select class="single-option-selector single-option-selector-{{ section.id }}" id="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}" data-section="{{ section.id }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
{% assign variant_avialable = true %}
{% if product.options.size == 1 %}
{% unless product.variants[forloop.index0].available %}
{% assign variant_avialable = false %}
{% endunless %}
{% endif %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}{% unless variant_avialable %} - {{ 'products.product.sold_out' | t }}{% endunless %}</option>
{% endfor %}
</select>
</div>
{% endfor %}
{% endunless %}
<select name="id" id="ProductSelect-{{ section.id }}" data-section="{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
{{ variant.title }}
</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
{% endif %}
{% endfor %}
</select>
{% assign sold_out = true %}
{% if current_variant.available %}
{% assign sold_out = false %}
{% endif %}
{% if section.settings.show_quantity %}
<div class="js-qty quantity-selector" id="Quantity-{{section.id}}">
<span class="js-qty__adjust js-qty__adjust--minus quantity__minus">−</span>
<input class="text quantity js-qty__num quantity__input" name="quantity" value="1" min="1" aria-label="quantity" pattern="[0-9]*"/>
<span class="js-qty__adjust js-qty__adjust--plus quantity__plus">+</span>
</div>
{% endif %}
<div class="add-to-cart__wrapper">
<button type="submit" name="add" id="AddToCart-{{ section.id }}" class="btn btn--large btn--full btn--clear uppercase addToCart{% if sold_out %} disabled{% endif %}" {% if sold_out %}disabled="true"{% endif %}>
{{ section.settings.link_text | escape }}
{% if section.settings.price_enable %}
<span class="unicode">•</span>
<span class="add-to-cart__price money"><span class="buttonPrice" id="ButtonPrice-{{ section.id }}" data-item-price="{{ current_variant.price }}">{{ current_variant.price | money }}</span></span>
{% endif %}
</button>
</div>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
{% endform %}
</div>
{% else %}
<form action="{{ product.metafields.charge_rabbit.subscribe_path }}" method="get" enctype="multipart/form-data" data-section="{{ section.id }}" class="product-form-{{ section.id }} charge-rabbit-product">
<input type="hidden" name="customer_id" value="{{customer.id}}">
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js">
<label for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<select class="single-option-selector single-option-selector-{{ section.id }}" id="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}" data-section="{{ section.id }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
{% assign variant_avialable = true %}
{% if product.options.size == 1 %}
{% unless product.variants[forloop.index0].available %}
{% assign variant_avialable = false %}
{% endunless %}
{% endif %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}{% unless variant_avialable %} - {{ 'products.product.sold_out' | t }}{% endunless %}</option>
{% endfor %}
</select>
</div>
{% endfor %}
{% endunless %}
<select name="id" id="ProductSelect-{{ section.id }}" data-section="{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
{{ variant.title }}
</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
{% endif %}
{% endfor %}
</select>
{% assign sold_out = true %}
{% if current_variant.available %}
{% assign sold_out = false %}
{% endif %}
<div class="add-to-cart__wrapper">
<button type="submit" name="add" id="AddToCart-{{ section.id }}" class="btn btn--large btn--full btn--clear uppercase addToCart{% if sold_out %} disabled{% endif %}" {% if sold_out %}disabled="true"{% endif %}>
{{ section.settings.link_text | escape }}
{% if section.settings.price_enable %}
<span class="unicode">•</span>
<span class="add-to-cart__price money"><span class="buttonPrice" id="ButtonPrice-{{ section.id }}" data-item-price="{{ current_variant.price }}">{{ current_variant.price | money }}</span></span>
{% endif %}
</button>
</div>
</form>
{% include 'membership-product-callbacks' %}
{% endunless %}
</div>
<div id="CartDrawerWrapper--{{ section.id }}" class="cart-drawer"></div>
{%- endif -%}
{% comment %}
If the product description is over 1000 characters or contains an embed code,
place the description in a full width container below the image and cart button.
{% endcomment %}
{% assign description_position = '' %}
{%- assign product_description_content = product.description -%}
{%- assign has_tabs = false -%}
{%- for block in section.blocks -%}
{%- if block.type == "tab_description" -%}
{%- assign has_tabs = true -%}
{%- endif -%}
{%- endfor -%}
{%-if has_tabs -%}
{%- assign product_description_content = product_description_content | split: '<h6>' | first -%}
{%- endif -%}
{% if product_description_content contains '[split]' %}
{% assign description_position = 'both' %}
{% endif %}
<div class="product-description rte">
{{ product_description_content | replace: '<p>[split]</p>', '[split]' | split: '[split]' | first }}
</div>
</div>
{%- if section.blocks.size > 0 and section.settings.tabs_position == 'sidebar'-%}
<div class="tabs-wrapper productTabsWrapper">
{% include 'product-tabs' %}
</div>
{%- endif -%}
{%- if section.settings.form_position == 'below' -%}
<div class="product__form">
{% comment %}
Optional size chart - controlled by Magnific Popup
{% endcomment %}
{% if section.settings.info_page != blank %}
{% assign size_page = pages[section.settings.info_page] %}
<p class="text-center">
<a id="toggleProductModal-{{ section.id }}" class="border-bottom-link uppercase" data-mfp-src="#ProductModal-{{ section.id }}">
{{ size_page.title }}
</a>
</p>
<div id="ProductModal-{{ section.id }}" class="product-modal mfp-hide">
<div class="rte">{{ size_page.content }}</div>
</div>
{% endif %}
{% unless product.template_suffix contains 'charge-rabbit' %}
<div id="AddToCartForm-{{ section.id }}" data-section="{{ section.id }}" class="product-form-{{section.id}} product-form">
{% form 'product', product %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js">
<label for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<select class="single-option-selector single-option-selector-{{ section.id }}" id="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}" data-section="{{ section.id }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
{% assign variant_avialable = true %}
{% if product.options.size == 1 %}
{% unless product.variants[forloop.index0].available %}
{% assign variant_avialable = false %}
{% endunless %}
{% endif %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}{% unless variant_avialable %} - {{ 'products.product.sold_out' | t }}{% endunless %}</option>
{% endfor %}
</select>
</div>
{% endfor %}
{% endunless %}
<select name="id" id="ProductSelect-{{ section.id }}" data-section="{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
{{ variant.title }}
</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
{% endif %}
{% endfor %}
</select>
{% assign sold_out = true %}
{% if current_variant.available %}
{% assign sold_out = false %}
{% endif %}
{% if section.settings.show_quantity %}
<div class="js-qty quantity-selector" id="Quantity-{{section.id}}">
<span class="js-qty__adjust js-qty__adjust--minus quantity__minus">−</span>
<input class="text quantity js-qty__num quantity__input" name="quantity" value="1" min="1" aria-label="quantity" pattern="[0-9]*"/>
<span class="js-qty__adjust js-qty__adjust--plus quantity__plus">+</span>
</div>
{% endif %}
<div class="add-to-cart__wrapper">
<button type="submit" name="add" id="AddToCart-{{ section.id }}" class="btn btn--large btn--full btn--clear uppercase addToCart{% if sold_out %} disabled{% endif %}" {% if sold_out %}disabled="true"{% endif %}>
{{ section.settings.link_text | escape }}
{% if section.settings.price_enable %}
<span class="unicode">•</span>
<span class="add-to-cart__price money"><span class="buttonPrice" id="ButtonPrice-{{ section.id }}" data-item-price="{{ current_variant.price }}">{{ current_variant.price | money }}</span></span>
{% endif %}
</button>
</div>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
{% endform %}
</div>
{% else %}
<form action="{{ product.metafields.charge_rabbit.subscribe_path }}" method="get" enctype="multipart/form-data" data-section="{{ section.id }}" class="product-form-{{ section.id }} charge-rabbit-product">
<input type="hidden" name="customer_id" value="{{customer.id}}">
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js">
<label for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">
{{ option.name }}
</label>
<select class="single-option-selector single-option-selector-{{ section.id }}" id="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}" data-section="{{ section.id }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
{% assign variant_avialable = true %}
{% if product.options.size == 1 %}
{% unless product.variants[forloop.index0].available %}
{% assign variant_avialable = false %}
{% endunless %}
{% endif %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}{% unless variant_avialable %} - {{ 'products.product.sold_out' | t }}{% endunless %}</option>
{% endfor %}
</select>
</div>
{% endfor %}
{% endunless %}
<select name="id" id="ProductSelect-{{ section.id }}" data-section="{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
{{ variant.title }}
</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
{% endif %}
{% endfor %}
</select>
{% assign sold_out = true %}
{% if current_variant.available %}
{% assign sold_out = false %}
{% endif %}
<div class="add-to-cart__wrapper">
<button type="submit" name="add" id="AddToCart-{{ section.id }}" class="btn btn--large btn--full btn--clear uppercase addToCart{% if sold_out %} disabled{% endif %}" {% if sold_out %}disabled="true"{% endif %}>
{{ section.settings.link_text | escape }}
{% if section.settings.price_enable %}
<span class="unicode">•</span>
<span class="add-to-cart__price money"><span class="buttonPrice" id="ButtonPrice-{{ section.id }}" data-item-price="{{ current_variant.price }}">{{ current_variant.price | money }}</span></span>
{% endif %}
</button>
</div>
</form>
{% include 'membership-product-callbacks' %}
{% endunless %}
</div>
<div id="CartDrawerWrapper--{{ section.id }}" class="cart-drawer"></div>
{%- endif -%}
{% if settings.product_social_enable %}
{% capture link %}{{ shop.url }}{{ product.url }}{% endcapture %}
{% capture shareTitle %}{{ product.title | url_param_escape }}{% endcapture %}
<div class="share text-center" data-permalink="{{ link }}">
{% if settings.share_enable_facebook %}
<a target="_blank" href="//www.facebook.com/sharer.php?u={{ link }}" class="share__link">
<span class="icon icon-facebook" aria-hidden="true"></span>
<span class="share__text">{{ 'general.share.facebook' | t }}</span>
</a>
{% endif %}
{% if settings.share_enable_twitter %}
<a target="_blank" href="//twitter.com/share?url={{ link }}&text={{ shareTitle }}" class="share__link">
<span class="icon icon-twitter" aria-hidden="true"></span>
<span class="share__text">{{ 'general.share.twitter' | t }}</span>
</a>
{% endif %}
{% if settings.share_enable_pinterest %}
<a target="_blank" href="http://pinterest.com/pin/create/button/?url={{ link }}&media={{ product.featured_media.preview_image | product_img_url: '1024x1024' | prepend: 'http:' }}&description={{ shareTitle }}" class="share__link">
<span class="icon icon-pinterest" aria-hidden="true"></span>
<span class="share__text">{{ 'general.share.pinterest' | t }}</span>
</a>
{% endif %}
{% if settings.share_enable_google %}
<a target="_blank" href="//plus.google.com/share?url={{ link }}" class="share__link">
<span class="icon icon-google_plus" aria-hidden="true"></span>
<span class="share__text">{{ 'general.share.google' | t }}</span>
</a>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% if description_position == 'both' %}
<div class="wrapper">
<div class="product-description rte">
{{ product_description_content | replace: '<p>[split]</p>', '[split]' | split: '[split]' | last }}
</div>
</div>
{% endif %}
{%- if section.blocks.size > 0 and section.settings.tabs_position == 'below' -%}
<div class="wrapper tabs-wrapper productTabsWrapper">
{% include 'product-tabs' %}
</div>
{%- endif -%}
{%- if section.settings.product_reviews_enable -%}
<div class="wrapper">
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
</div>
{%- endif -%}
<script id="CartDrawerTemplate--{{ section.id }}" type="text/x-handlebars-template">
<span class="close">×</span>
<div class="product__add__drawer">
<div class="product__add__wrapper">
<div class="product__add__image">
{% capture product_image %}{% raw %}{{ product_image }}{% endraw %}{% endcapture %}
<div class="product__add__image__container">
<img alt="{{ product_title }}" src="{{ product_image }}">
</div>
</div>
<div class="product__add__text">
<p class="product__add__message">{{ 'products.cart_drawer.item_added' | t }}</p>
{% raw %}
<div class="product__add__details">
<p class="strong">{{ product_title }}</p>
{{#if variant}}<p>{{ variant }}</p>{{/if}}
<p>{{{ price }}}</p>
<p>Quantity: {{ quantity }}</p>
</div>
{% endraw %}
<div class="product__add__buttons">
<a href="/checkout" class="btn btn--large uppercase btn--splash">{{ "products.cart_drawer.checkout" | t }}</a>
<a href="{{ routes.cart_url }}" class="btn btn--large uppercase btn--splash--outline">{{ "products.cart_drawer.view_cart" | t }}</a>
</div>
</div>
</div>
</div>
</script>
<style>
model-viewer {
--progress-bar-color: {{ settings.color_body_text }};
}
</style>
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
<script type="application/json" id="ModelJson-{{ section.id }}">
{{ product.media | where: 'media_type', 'model' | json }}
</script>
</div>
{% schema %}
{
"name": "Product pre-order",
"settings": [
{
"type": "header",
"content": "Layout"
},
{
"type": "checkbox",
"id": "product_breadcrumbs",
"label": "Show breadcrumbs",
"default": true
},
{
"type": "checkbox",
"id": "show_price_above",
"label": "Show price above product title",
"default": true
},
{
"type": "select",
"id": "form_position",
"options": [
{ "value": "below", "label": "Description above form"},
{ "value": "above", "label": "Description below form"}
],
"label": "Description position",
"default": "below"
},
{
"type": "checkbox",
"id": "show_quantity",
"label": "Show quantity selection",
"default": true
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": "Show dynamic checkout button",
"info": "Lets customers check out directly using a familiar payment method. [Learn More](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"default": false
},
{
"type": "checkbox",
"id": "product_show_vendor",
"label": "Show vendor",
"default": false
},
{
"id": "product_reviews_enable",
"type": "checkbox",
"label": "Enable reviews",
"info": "Requires the [Shopify Product Reviews app](https://apps.shopify.com/product-reviews)."
},
{
"type": "header",
"content": "Pre-order button"
},
{
"type": "checkbox",
"id": "price_enable",
"label": "Enable price in button",
"default": false
},
{
"type": "text",
"id": "link_text",
"label": "Text",
"default": "Pre-Order",
"info": "Button text"
},
{
"type": "header",
"content": "Media",
"info": "Learn more about [media types](https://help.shopify.com/manual/products/product-media)"
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "Enable video looping",
"default": true
},
{
"type": "checkbox",
"id": "zoom_enable",
"label": "Enable image zoom"
},
{
"type": "header",
"content": "Optional sizing popup"
},
{
"id": "info_page",
"type": "page",
"label": "Select page",
"info": "This popup will show on every product."
},
{
"type": "header",
"content": "optional product tabs"
},
{
"type": "select",
"id": "tabs_position",
"options": [
{ "value": "sidebar", "label": "Tabs beside image"},
{ "value": "below", "label": "Tabs below"}
],
"label": "Tabs position",
"default": "below"
}
],
"blocks": [
{
"type": "tab_description",
"name": "Description H6",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Heading 6 titles will be converted to tab headings, tab content will be everything between the Heading 6 titles. [Product Tabs Documentation](http://help.groupthought.com/article/36-tabs)."
}
]
},
{
"type": "tab_richtext",
"name": "Text",
"settings": [
{
"type": "text",
"id": "title",
"label": "Label",
"default": "Text tab",
"info": "Example: Warranty policy"
},
{
"type": "richtext",
"id": "raw_content",
"label": "Tab content",
"default": "<p>This tab content type will accept <strong>rich text</strong> to help with adding styles and links to additional pages or content. Use this to add supplementary information to help your buyers.</p>"
}
]
},
{
"type": "tab_html",
"name": "HTML",
"settings": [
{
"type": "text",
"id": "title",
"label": "Label",
"default": "HTML tab",
"info": "Example: Sizing video"
},
{
"type": "html",
"id": "raw_content",
"label": "Tab content",
"default": "<p>This tab content type will accept HTML code for advanced styling. Use this to add video embeds, or other advanced HTML content.</p>"
}
]
},
{
"type": "tab_page",
"name": "Page",
"settings": [
{
"type": "text",
"id": "title",
"label": "Label",
"default": "Page tab",
"info": "Example: Size chart"
},
{
"type": "page",
"id": "raw_content",
"label": "Tab content"
}
]
}
]
}
{% endschema %}