@LitCommerce
Here is the code:
{%- capture section_settings -%}
{
“enableHistoryState”: true,
“showInventoryQuantity”: {% if section.settings.show_inventory_quantity %}true{% else %}false{% endif %},
“showThumbnails”: {% if section.settings.show_thumbnails %}true{% else %}false{% endif %},
“inventoryQuantityThreshold”: {{ section.settings.inventory_quantity_threshold }},
“enableImageZoom”: {% if section.settings.enable_image_zoom %}true{% else %}false{% endif %},
“showPaymentButton”: {{ section.settings.show_payment_button | json }},
“useAjaxCart”: {% if settings.cart_type == ‘drawer’ %}true{% else %}false{% endif %}
}
{%- endcapture -%}
{%- capture action_list_items -%}
{%- if section.settings.enable_image_zoom -%}
{% include 'icon' with 'plus' %}
{%- endif -%}
{%- if section.settings.show_share_buttons -%}
{% include 'icon' with 'share' %}
{% include 'icon' with 'close' %}
{%- assign share_url = shop.url | append: product.url -%}
{%- assign twitter_text = product.title -%}
{%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
{%- assign pinterest_image = product.featured_image | img_url: ‘large’ | prepend: ‘https:’ -%}
{%- endif -%}
{%- endcapture -%}
{%- comment -%}
PRODUCT GALLERY
{%- endcomment -%}
{%- assign initial_image_id = product.featured_image.id -%}
{%- assign initial_image_index = 0 -%}
{%- assign image_count = 0 -%}
{%- capture slideshow_images -%}
{%- for image in product.images -%}
{%- if image.alt == ‘featured’ or image.alt == ‘featured mobile’ -%}
{%- continue -%}
{%- endif -%}
{%- if image.id == product.selected_or_first_available_variant.image.id -%}
{%- assign initial_image_index = image_count -%}
{%- assign initial_image_id = image.id -%}
{%- endif -%}
{%- include ‘image-size’, sizes: ‘200,400,600,700,800,900,1000,1200,1400,1600’, image: image -%}
{%- assign is_video = false -%}
{%- if image.alt contains ‘YouTube’ or image.alt contains ‘player.vimeo.com’ -%}
{%- assign is_video = true -%}
{%- endif -%}
{% assign image_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class=“Image–lazyLoad Image–fadeIn”
{% if initial_image_id == image.id %}src=“{{ image | img_url: ‘250x’ }}”{% endif %}
data-src=“{{ image_url }}”
data-widths=“[{{ supported_sizes }}]”
data-sizes=“auto”
data-expand=“-100”
alt=“{{ image.alt | escape }}”
data-max-width=“{{ image.width }}”
data-max-height=“{{ image.height }}”
data-original-src=“{{ image | img_url: ‘master’ }}”>
{%- if is_video -%}
{% include ‘icon’ with ‘play’ %}
{%- endif -%}
![{{ image.alt | escape }}]()
{%- assign image_count = image_count | plus: 1 -%}
{%- endfor -%}
{%- endcapture -%}
{%- if product.images.size > 0 -%}
{%- if action_list_items != blank -%}
{{ action_list_items }}
{%- endif -%}
{%- if image_count > 1 -%}
{%- if section.settings.show_thumbnails -%}
{%- endif -%}
{%- for image in product.images -%}
{%- if image.alt == 'featured' or image.alt == 'featured mobile' -%}
{%- continue -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- capture flickity_options -%}
{
“prevNextButtons”: false,
“pageDots”: {% if image_count > 1 %}true{% else %}false{% endif %},
“adaptiveHeight”: true,
“wrapAround”: false,
“watchCSS”: true,
“dragThreshold”: 8,
“initialIndex”: {{ initial_image_index }}
}
{%- endcapture -%}
{{ slideshow_images }}
{%- endif -%}
{%- capture product_aside -%}
{%- comment -%}
PRODUCT TABS
{%- endcomment -%}
{%- include ‘product-tabs’ -%}
{%- comment -%}
PRODUCT WEAR IT WITH
We allow merchants to add a tag that looks like __with:product-handle to feature an additional product
{%- endcomment -%}
{%- for tag in product.tags -%}
{%- if tag contains ‘__with’ -%}
{%- assign product_handle = tag | split: ‘__with:’ | last -%}
{%- assign associated_product = all_products[product_handle] -%}
{%- if associated_product != empty -%}
{{ 'product.buy_it_with.title' | t }}
{% include ‘product-item’, product: associated_product, use_horizontal: true, show_labels: false, show_product_info: true, show_price_on_hover: false %}
{%- break -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}
{%- include 'product-meta', show_description: true -%}
{%- include 'product-form' -%}
{%- if section.settings.description_below_add_to_cart -%}
{{ product.description }}
{%- endif -%}
{%- if product_aside != blank and image_count > 0 -%}
{%- endif -%}
{%- if action_list_items != blank -%}
{{ action_list_items }}
{%- endif -%}
{%- if product_aside != blank -%}
{{- product_aside -}}
{%- endif -%}
{%- comment -%}
OFF SCREEN ELEMENTS
{%- endcomment -%}
{{- product_popovers -}}
{{- product_modals -}}
{%- comment -%}
FEATURED IMAGE
We allow merchants to use one image as a “featured image” by adding the alt tag “featured”
{%- endcomment -%}
{%- for image in product.images -%}
{%- if image.alt == ‘featured’ -%}
{%- assign desk_featured_image = image -%}
{%- endif -%}
{%- if image.alt == ‘featured mobile’ -%}
{%- assign mobile_featured_image = image -%}
{%- endif -%}
{%- endfor -%}
{%- if desk_featured_image or mobile_featured_image -%}
{%- assign mobile_featured_image = mobile_featured_image | default: desk_featured_image -%}
{%- assign desk_featured_image = desk_featured_image | default: mobile_featured_image -%}
#shopify-section-{{ section.id }} + .shopify-section--bordered {
border-top: 0;
}
{%- else -%}
/* Very ugly haha */
@media screen and (max-width: 640px) {
#shopify-section-{{ section.id }} + .shopify-section--bordered {
border-top: 0;
}
#shopify-section-{{ section.id }} + .shopify-section--bordered > .Section {
padding-top: 0;
}
}
{%- endif -%}
{%- comment -%}
MODALS
If we have some videos, we implement them as modal
{%- endcomment -%}
{%- for image in product.images -%}
{%- if image.alt contains ‘YouTube’ or image.alt contains ‘player.vimeo.com’ -%}
{% if image.alt contains 'youtube.com/embed' %}
{% else %}
{% endif %}
{% include ‘icon’ with ‘close’ %}
{%- endif -%}
{%- endfor -%}
{%- comment -%}
PHOTO SWIPE
This is the root container for the zoom functionality. Must not be removed, as order element is important.
{%- endcomment -%}
{%- if section.settings.enable_image_zoom -%}
{% include 'icon' with 'arrow-left' %}
{% include 'icon' with 'close' %}
{% include 'icon' with 'arrow-right' %}
{%- endif -%}
{% schema %}
{
“name”: “Product page”,
“class”: “shopify-section–bordered”,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_share_buttons”,
“label”: “Show social sharing buttons”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_vendor”,
“label”: “Show vendor”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “description_below_add_to_cart”,
“label”: “Description below add to cart”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_color_swatch”,
“label”: “Show color swatch”,
“default”: true,
“info”: “Some colors appear white? Learn more.”
},
{
“type”: “checkbox”,
“id”: “show_color_carousel”,
“label”: “Show color carousel”,
“info”: “A selector will appear with variant image previews when choosing colors.”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “show_quantity_selector”,
“label”: “Show quantity selector”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_inventory_quantity”,
“label”: “Show inventory quantity”,
“info”: “Make sure that your inventory is tracked. Learn more.”,
“default”: false
},
{
“type”: “range”,
“id”: “inventory_quantity_threshold”,
“label”: “Inventory quantity threshold”,
“info”: “Only show inventory quantity if below threshold. Choose 0 to always show.”,
“min”: 0,
“max”: 50,
“step”: 1,
“default”: 0
},
{
“type”: “checkbox”,
“id”: “show_payment_button”,
“label”: “Show dynamic checkout button”,
“info”: “Lets customers check out directly using a familiar payment method. Learn more”,
“default”: false
},
{
“type”: “header”,
“content”: “Product images”
},
{
“type”: “select”,
“id”: “image_size”,
“label”: “Size”,
“options”: [
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “medium”,
“label”: “Medium”
},
{
“value”: “large”,
“label”: “Large”
},
{
“value”: “fill”,
“label”: “Fill screen”
}
],
“default”: “large”
},
{
“type”: “checkbox”,
“id”: “enable_image_zoom”,
“label”: “Enable zoom”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “show_thumbnails”,
“label”: “Show thumbnails”,
“info”: “Only applicable on large screens”,
“default”: true
},
{
“type”: “header”,
“content”: “Tabs”
},
{
“type”: “page”,
“id”: “tab_page_1_handle”,
“label”: “First page”
},
{
“type”: “page”,
“id”: “tab_page_2_handle”,
“label”: “Second page”
},
{
“type”: “paragraph”,
“content”: “The theme also allows you to add specific tabs for a given product only. Learn more about this feature.”
},
{
“type”: “header”,
“content”: “Reviews”
},
{
“type”: “paragraph”,
“content”: “You need to install Shopify’s free Product Reviews app before enabling this option.”
},
{
“type”: “checkbox”,
“id”: “reviews_enabled”,
“label”: “Enable”,
“default”: false
},
{
“type”: “header”,
“content”: “Featured image”
},
{
“type”: “paragraph”,
“content”: “You can highlight an image after product tabs by adding the ALT tag "featured" to a given image. Learn more.”
},
{
“type”: “select”,
“id”: “featured_image_size”,
“label”: “Section size”,
“options”: [
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “normal”,
“label”: “Normal”
},
{
“value”: “large”,
“label”: “Large”
}
],
“default”: “large”
}
]
}
{% endschema %}
{% if product.metafields.loox.num_reviews %}
{% endif %}
{{ product.metafields.loox.reviews }}
