All things Shopify and commerce
HTML error found
Broken HTML was detected in your theme's section/product-template.liquid file. Make sure there are no missing or extra HTML tags present.
{%- assign current_variant = product.selected_or_first_available_variant -%} {%- assign zoom_size = 'master' -%} {%- if template contains 'lightbox' -%} {%- assign in_lightbox = true -%} {%- else -%} {%- assign in_lightbox = false -%} {%- endif -%} <div data-section-type="product-template"> {% if in_lightbox == false %} <div class="container desktop-only"> <div class="page-header cf"> <div class="filters"> {% if section.settings.show_tags and product.tags.size > 0 %} <span class="tags"> <a href="#" data-toggle-target=".tags.navigation">{{ 'products.product.tags' | t }} <span class="state">+</span></a> </span> {% endif %} {% if section.settings.show_type %} {%- assign product_type_handle = product.type | handle -%} {%- if collections[product_type_handle].handle == product_type_handle -%} {%- assign type_url = collections[product_type_handle].url -%} {%- else -%} {%- assign type_url = product.type | url_for_type -%} {%- endif -%} <span class="see-more">{{ 'products.product.see_more_of_this_type' | t }}</span><span class="see-more-type"> {{ product.type | link_to: type_url }}</span> {% endif %} </div> {% if collection %} <div class="social-area"> <span class="nextprev"> {% if collection.previous_product %} <a class="control-prev" href="{{ collection.previous_product }}">{{ 'products.product.previous' | t }}</a> {% endif %} {% if collection.previous_product and collection.next_product %} / {% endif %} {% if collection.next_product %} <a class="control-next" href="{{ collection.next_product }}">{{ 'products.product.next' | t }}</a> {% endif %} </span> </div> {% endif %} </div> </div> {% if section.settings.show_tags and product.tags.size > 0 %} <div class="tags navigation spaced-row tags--none-selected desktop-only"> <div class="navigation__tier-1-container"> <ul class="navigation__tier-1"> {%- for tag in product.tags -%} <li class="navigation__item"><a class="navigation__link" href="{% if collection %}{{ collection.url }}{% else %}{{ routes.all_products_collection_url }}{% endif %}/{{ tag | handle }}">{{ tag }}</a></li> {%- endfor -%} </ul> </div> </div> {% endif %} {%- endif -%} {%- assign lightbox_size = 'master' -%} {%- assign min_aspect_ratio = 0.6 -%} <div class="product-detail spaced-row container"> <div class="gallery gallery-layout-{{ section.settings.prod_gall_thumbs_under }} gallery-size-{{ section.settings.gallery_size }} product-column-left {% if product.media.size > 1 %}has-thumbnails{% endif %}"> <div class="main-image"> {%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%} {%- for media in product.media -%} {%- if media.id == featured_media.id -%} {%- assign initial_slide = forloop.index0 -%} {%- break -%} {%- endif -%} {%- endfor -%} <div class="slideshow product-slideshow slideshow--custom-initial" data-slick='{"adaptiveHeight":true,"initialSlide":{{initial_slide}}}'> {%- for media in product.media -%} <div class="slide{% if forloop.index0 == initial_slide %} slide--custom-initial{% endif %}" data-media-id="{{ media.id }}"> {%- if media.media_type == 'image' and section.settings.enable_zoom -%}<a class="show-gallery" href="{{ media.preview_image | img_url: zoom_size }}">{%- endif -%} {%- render 'media', media: media, min_aspect_ratio: min_aspect_ratio -%} {%- if media.media_type == 'image' and section.settings.enable_zoom -%}</a>{%- endif -%} </div> {%- endfor -%} </div> {%- if in_lightbox == false -%} {%- assign models = product.media | where: 'media_type', 'model' -%} {% if models.size > 0 %} <script type="application/json" class="model-json"> {{- product.media | where: 'media_type', 'model' | json -}} </script> <button class="view-in-space" data-shopify-xr data-shopify-model3d-id="{{ models.first.id }}" data-shopify-title="{{ product.title | escape }}" data-shopify-xr-hidden> {%- render 'icon-3d-badge-full-color' -%} <span class="view-in-space__text">{{ 'products.product.view_in_space' | t }}</span> </button> {% endif %} {%- endif -%} <div class="slideshow-controls"> <div class="slideshow-controls__arrows"></div> <div class="slideshow-controls__dots"></div> </div> </div> {% if product.media.size > 1 %} <div class="thumbnails desktop-only"> {% for media in product.media %} <a class="thumbnail thumbnail--media-{{ media.media_type }}" href="{% if section.settings.enable_zoom %}{{ media.preview_image | img_url: zoom_size }}{% else %}#{% endif %}" data-media-id="{{ media.id }}"> {% render 'responsive-image', image: media.preview_image, min_aspect_ratio: min_aspect_ratio %} {%- if media.media_type == 'video' or media.media_type =='external_video' -%} <div class="thumbnail__badge"> {% render 'icon-video-badge-full-color' %} </div> {%- endif -%} {%- if media.media_type == 'model' -%} <div class="thumbnail__badge"> {% render 'icon-3d-badge-full-color' %} </div> {%- endif -%} </a> {% endfor %} </div> {% endif %} </div> <div class="detail product-column-right"> {%- if settings.swatch_enabled and settings.swatch_images -%} <style> {%- for product_option in product.options_with_values -%} {%- if product_option.name == settings.swatch_option_name -%} {%- for value in product_option.values -%} {%- assign swatch_value = value | handle -%} .option--{{ settings.swatch_option_name | handle }} select[data-listed][data-colour-swatch="true"] + .clickyboxes .opt--{{ swatch_value }}::before, .swatch-option__nugget.bg-{{ swatch_value }} { background-image: url({{ swatch_value | append: '.png' | file_img_url: '48x48', crop: 'center' }}); } {%- endfor -%} {%- endif -%} {%- endfor -%} </style> {%- endif -%} <div class="content-divider"> <div class="title-row"> <h1 class="title">{{ product.title }}</h1> {% render 'product-label-detail', product: product, current_variant: current_variant %} </div> <div class="price-container"> <div> <div class="price-area"> <div class="price h4-style {% if current_variant.compare_at_price > current_variant.price %}on-sale{% endif %}"> <span class="current-price theme-money">{{ current_variant.price | money }}</span> {% if current_variant.compare_at_price > current_variant.price %} <span class="was-price theme-money">{{ current_variant.compare_at_price | money }}</span> {% endif %} </div> {% render 'unit-price', variant: current_variant %} </div> {%- if section.settings.show_tax_and_shipping -%} {%- if shop.taxes_included or shop.shipping_policy.body != blank -%} <div class="product-policies"> {%- if shop.taxes_included -%} {{ 'products.product.include_taxes' | t }} {%- endif -%} {%- if shop.shipping_policy.body != blank -%} {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }} {%- endif -%} </div> {%- endif -%} {%- endif -%} </div> <div class="theme-product-reviews"> <a href="#shopify-product-reviews" aria-label="{{ 'products.product.reviews_link' | t | escape }}"><span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span></a> </div> </div> {% if section.settings.show_vendor or section.settings.show_sku %} <div class="lightly-spaced-row"> {%- if section.settings.show_vendor -%} {% comment %} Do we have a collection that has the same name as our product vendor name? If we do, let's have the vendor link point to it. If not, we will point to the automatic vendor collection. {% endcomment %} {%- assign product_vendor_handle = product.vendor | handle -%} {%- if collections[product_vendor_handle].handle == product_vendor_handle -%} {%- assign vendor_url = collections[product_vendor_handle].url -%} {%- else -%} {%- assign vendor_url = product.vendor | url_for_vendor -%} {%- endif -%} <div class="vendor"><span class="product-detail-label">{{ 'products.product.vendor' | t }}</span> {{ product.vendor | link_to: vendor_url }}</div> {%- endif -%} {%- if section.settings.show_sku -%} <div class="sku {% if product.selected_or_first_available_variant.sku == blank %}sku--no-sku{% endif %}"><span class="product-detail-label">{{ 'products.product.sku' | t }}</span> <span class="sku__value">{{ product.selected_or_first_available_variant.sku }}</span></div> {%- endif -%} </div> {% endif %} </div> <div class="product-form section content-divider"> {% form 'product', product, class: 'form', data-ajax-add-to-cart: true, data-product-id: product.id, data-enable-history-state: 'true' %} <div class="input-row"> {% if product.variants.size > 1 %} <div class="option-selectors"> {% for option in product.options_with_values %} <div class="selector-wrapper styled-select {% if settings.swatch_enabled and option.name == settings.swatch_option_name %} swatches option--{{ settings.swatch_option_name | handle }}{% endif %}" {% if settings.variant_style == 'listed' %}data-make-box{% endif %}> <label for="SingleOptionSelector-{{ forloop.index0 }}"> {{ option.name }} </label> <select id="SingleOptionSelector-{{ forloop.index0 }}" data-single-option-selector data-index="option{{ option.position }}" {% if settings.variant_style == 'listed' %}data-listed{% endif %} {% if settings.swatch_enabled and option.name == settings.swatch_option_name %}data-colour-swatch="true"{% endif %}> {% for value in option.values %} <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>{{ value }}</option> {% endfor %} </select> {% if settings.show_size_chart and option.name == settings.size_chart_variant %} <div class="size-chart-container"> <a href="{{ pages[settings.size_chart_page].url }}" target="_blank" class="size-chart-link"> {{ 'products.product.size_chart' | t }} </a> <div class="size-chart-content hidden"> <div class="size-chart"> <div class="size-chart__inner user-content"> {{ pages[settings.size_chart_page].content }} </div> </div> </div> </div> {% endif %} </div> {% endfor %} </div> {% else %} {% unless product.has_only_default_variant %} <div class="singleopt"> {% for option in product.options %} {% assign opt_idx = 'option' | append: forloop.index %} <label>{{ option }}: {{ product.variants.first[opt_idx] }}</label> {% if settings.show_size_chart and option == settings.size_chart_variant %} <div class="size-chart-container"> <a href="{{ pages[settings.size_chart_page].url }}" target="_blank" class="size-chart-link"> {{ 'products.product.size_chart' | t }} </a> <div class="size-chart-content hidden"> <div class="size-chart"> <div class="size-chart__inner user-content"> {{ pages[settings.size_chart_page].content }} </div> </div> </div> </div> {% endif %} {% endfor %} </div> {% endunless %} {% endif %} <select name="id" class="original-selector{% if product.variants.size == 1 %} hidden{% endif %}" aria-label="{{ 'products.product.selector_label' | t | escape }}"> {% for variant in product.variants %} <option value="{{ variant.id }}" {% if variant == product.selected_or_first_available_variant %} selected="selected"{% endif %} {% if section.settings.show_inventory_notice and variant.inventory_management == 'shopify' and variant.inventory_quantity > 0 %} {% if section.settings.inventory_notice_threshold == 0 or variant.inventory_quantity <= section.settings.inventory_notice_threshold %} data-inventory="{{ variant.inventory_quantity }}" {% endif %} {% endif %} data-stock="{% if variant.inventory_management == 'shopify' and variant.inventory_quantity <= 0 %}out{% endif %}">{{ variant.title | escape }}</option> {% endfor %} </select> </div> {% if product.available %} {% if section.settings.show_inventory_notice %} {%- capture inventory_notice -%} {%- if current_variant.inventory_management == 'shopify' and current_variant.inventory_quantity > 0 -%} {%- if section.settings.inventory_notice_threshold == 0 or current_variant.inventory_quantity <= section.settings.inventory_notice_threshold -%} <div class="product-inventory-notice"> {{- 'products.labels.only_x_left' | t: quantity: current_variant.inventory_quantity -}} </div> {%- else -%} <div class="product-inventory-notice product-inventory-notice--no-inventory"></div> {%- endif -%} {%- else -%} <div class="product-inventory-notice product-inventory-notice--no-inventory"></div> {%- endif -%} {%- endcapture -%} {% endif %} {% unless section.settings.show_quantity_selector %}{{ inventory_notice }}{% endunless %} <div class="quantity-submit-row input-row {% if section.settings.enable_payment_button and product.selling_plan_groups == empty %}has-spb{% endif %}"> {% if section.settings.show_quantity_selector %} <label for="quantity"> {{ 'products.product.quantity' | t }} {{ inventory_notice }} </label> <div class="quantity-wrapper"> <a href="#" data-quantity="down">{% render 'svg-minus' %}</a> <input aria-label="{{ 'products.product.quantity' | t }}" id="quantity" type="text" name="quantity" value="1" /> <a href="#" data-quantity="up">{% render 'svg-plus' %}</a> </div> {% endif %} <div class="quantity-submit-row__submit input-row"> <input class="button button--large" type="submit" value="{{ 'products.product.add_to_cart' | t }}" /> </div> {% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} {{ form | payment_button }} {% endif %} {% if section.settings.show_backorder_text == true %} {% render 'backorder', product: product, variant: current_variant %} {% endif %} </div> {%- unless in_lightbox or section.settings.show_pickup_availability == false -%} {% render 'store-availability', product: product, current_variant: current_variant %} {%- endunless -%} {% else %} <div class="product-unavailable">{{ 'products.product.product_unavailable' | t }}</div> {% endif %} {% endform %} {%- if in_lightbox -%} <script type="application/json" id="ProductJson-{{ product.id }}"> {{- product | json -}} </script> {%- endif -%} </div> {% if section.settings.description_location == 'beside' and in_lightbox == false %} <div class="product-description user-content">{{ product.description }}</div> {% comment %} Add code to show under the description on the line below this one, if beside the image {% endcomment %} <!-- Underneath the description --> {% endif %} {% if in_lightbox %} <div class="lightly-spaced-row-above"> <a class="more" href="{{ product.url }}"> {{ 'products.quick_buy.read_more' | t }} <span class="icon-small icon-natcol">{% render 'svg-chevron-right' %}</span> </a> </div> {% else %} {% if section.settings.show_sharing_links %} <div class="desktop-only"> {% render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %} </div> {% endif %} {% endif %} </div> </div><!-- /.product-detail --> {% if section.settings.description_location == 'below' and in_lightbox == false %} <div class="product-description user-content container cf padded-row">{{ product.description }}</div> {% comment %} Add code to show under the description on the line below this one, if full-width underneath the image {% endcomment %} <!-- Underneath the description --> {% endif %} {% if in_lightbox == false %} <div class="mobile-only product-meta"> {% if section.settings.show_tags and product.tags.size > 0 %} <div class="tags tags-inline product-meta-row"> <div class="container"> <label>{{ 'products.product.tags' | t }}</label> <ul> {% for tag in product.tags %} <li><a href="{% if collection %}{{ collection.url }}{% else %}{{ routes.collections_url }}{% endif %}/{{ tag | handle }}">{{ tag }}</a></li> {% endfor %} </ul> </div> </div> {% endif %} {% if section.settings.show_sharing_links %} <div class="product-meta-row"> <div class="container"> {% render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %} </div> </div> {% endif %} <div class="product-meta-row further-nav"> <div class="container"> <div class="prev"> {% if collection.previous_product %} <a class="control-prev" href="{{ collection.previous_product }}" aria-label="{{ 'products.product.previous' | t | escape }}">{% render 'svg-chevron-left' %}</a> {% endif %} </div> <div class="see-more"> {%- if section.settings.show_type and product.type != blank -%} {%- assign product_type_handle = product.type | handle -%} {%- if collections[product_type_handle].handle == product_type_handle -%} {%- assign type_url = collections[product_type_handle].url -%} {%- else -%} {%- assign type_url = product.type | url_for_type -%} {%- endif -%} {{ product.type | link_to: type_url }} {% endif %} </div> <div class="next"> {% if collection.next_product %} <a class="control-next" href="{{ collection.next_product }}" aria-label="{{ 'products.product.next' | t | escape }}">{% render 'svg-chevron-right' %}</a> {% endif %} </div> </div> </div> </div> <div class="theme-product-reviews-full container"> <div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div> </div> {% endif %} </div> {% schema %} { "name": "Product pages", "class": "section-product-template", "settings": [ { "type": "checkbox", "id": "show_tax_and_shipping", "label": "Show tax status and shipping policy link", "default": false }, { "type": "checkbox", "id": "show_vendor", "label": "Show vendor", "default": true }, { "type": "checkbox", "id": "show_type", "label": "Show type", "default": false }, { "type": "checkbox", "id": "show_sku", "label": "Show SKU", "default": false }, { "type": "checkbox", "id": "show_quantity_selector", "label": "Show quantity selector", "default": true }, { "type": "checkbox", "id": "enable_payment_button", "label": "Show dynamic checkout button", "info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)", "default": true }, { "type": "checkbox", "id": "show_pickup_availability", "label": "Show pickup availability", "default": true, "info": "Show customers where they can pick up the product. [Learn more](https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods/local-pickup)" }, { "type": "checkbox", "id": "show_backorder_text", "label": "Show backorder text", "default": true, "info": "Only shows for products which use Shopify inventory tracking and are available to purchase when out of stock." }, { "type": "checkbox", "id": "show_inventory_notice", "label": "Show inventory notice", "default": false }, { "type": "range", "id": "inventory_notice_threshold", "min": 0, "max": 100, "step": 1, "label": "Inventory threshold", "info": "Show inventory quantities below this threshold. Choose 0 to show full amount.", "default": 10 }, { "type": "checkbox", "id": "show_sharing_links", "label": "Show social sharing icons", "default": true }, { "type": "checkbox", "id": "show_tags", "label": "Show tags", "default": false }, { "type": "select", "id": "description_location", "label": "Description location", "default": "beside", "options": [ { "value": "beside", "label": "Beside main image, under price" }, { "value": "below", "label": "Underneath image and price" } ] }, { "type": "header", "content": "Media" }, { "type": "paragraph", "content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media)" }, { "type": "select", "id": "gallery_size", "label": "Size", "options": [ { "value": "small", "label": "Small" }, { "value": "medium", "label": "Medium" }, { "value": "large", "label": "Large" } ], "default": "medium" }, { "type": "radio", "id": "prod_gall_thumbs_under", "label": "Thumbnail position", "info": "On desktop screens", "options": [ { "value": "beside", "label": "Beside main image" }, { "value": "under", "label": "Underneath main image" } ], "default": "under" }, { "type": "checkbox", "id": "enable_zoom", "label": "Enable image zoom", "default": true }, { "type": "checkbox", "id": "enable_video_looping", "label": "Enable video looping", "default": false } ] } {% endschema %}
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025