Broken HTML has been detected in your theme’s product-template.liquid file

graybackco
New Member
5 0 0

Hi I need help, i usuing debut theme and use google chrome edit my store, and when I put few product to cart, it show "Broken HTML has been detected in your theme’s product-template.liquid file. Check that there are no missing or extra HTML tags present."

error.png

 

 

 

 

and if if I go to cart page will show "Theme cannot be previewed because it's missing one of these required files: layout/theme.liquid, config/settings_schema.json"

 

error 2.png

 

please help me...

0 Likes

Hello ,

Please share your product-template.liquid file code here or mail me.

So that i will check and let you know.

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
Samlyon
New Member
1 0 0

Please help ! I have the same problem...

<div class="product-template__container page-width"
id="ProductSection-{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="product"
data-enable-history-state="true"
data-ajax-enabled="{{ settings.enable_ajax }}"
>
{% comment %}
Get first variant, or deep linked one
{% endcomment %}
{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign product_image_zoom_size = '1024x1024' -%}
{%- assign product_image_scale = '2' -%}
{%- assign enable_image_zoom = section.settings.enable_image_zoom -%}
{%- assign compare_at_price = current_variant.compare_at_price -%}
{%- assign price = current_variant.price -%}

{% case section.settings.media_size %}
{% when 'small' %}
{%- assign product_media_width = 'medium-up--one-third' -%}
{%- assign product_description_width = 'medium-up--two-thirds' -%}
{%- assign height = 345 -%}
{% when 'medium' %}
{%- assign product_media_width = 'medium-up--one-half' -%}
{%- assign product_description_width = 'medium-up--one-half' -%}
{%- assign height = 530 -%}
{% when 'large' %}
{%- assign product_media_width = 'medium-up--two-thirds' -%}
{%- assign product_description_width = 'medium-up--one-third' -%}
{%- assign height = 720 -%}
{% when 'full' %}
{%- assign product_media_width = '' -%}
{%- assign product_description_width = '' -%}
{%- assign height = 1090 -%}
{%- assign enable_image_zoom = false -%}
{% endcase %}

<div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{ section.settings.media_size }}-media{% endif %}">
<div class="grid__item product-single__media-group {{ product_media_width }}{% if section.settings.media_size == 'full' %} product-single__media-group--full{% endif %}" data-product-single-media-group>
{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

{%- for media in product.media -%}
{% include 'media', media: media, featured_media: featured_media, height: height, enable_image_zoom: enable_image_zoom, image_zoom_size: product_image_zoom_size, image_scale: product_image_scale %}
{%- endfor -%}

<noscript>
{% capture product_image_size %}{{ height }}x{% endcapture %}
<img src="{{ featured_media | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_media.alt }}" id="FeaturedMedia-{{ section.id }}" class="product-featured-media" style="max-width: {{ height }}px;">
</noscript>

{% assign first_3d_model = product.media | where: "media_type", "model" | first %}

{%- if first_3d_model -%}
<button
aria-label="{{ 'products.product.view_in_space_label' | t }}"
class="product-single__view-in-space"
data-shopify-xr
data-shopify-model3d-id="{{ first_3d_model.id }}"
data-shopify-title="{{ product.title | escape }}"
data-shopify-xr-hidden
>
{% include 'icon-3d-badge-full-color' %}<span class='product-single__view-in-space-text'>{{ 'products.product.view_in_space' | t }}</span>
</button>
{%- endif -%}


{% if product.media.size > 1 %}
{% if product.media.size > 4 %}
{%- assign enable_thumbnail_slides = true -%}
{% endif %}

<div data-thumbnail-slider>
<div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} slider-active{% endif %}" data-slider>
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}" data-slider-button>
{% include 'icon-chevron-left' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
</button>
{% endif %}

<ul class="product-single__thumbnails product-single__thumbnails-{{ section.id }}" data-slider-container>
{% if enable_thumbnail_slides == true %}
<div class="product-single__thumbnails-slider-track" data-slider-track>
{% endif %}

{% for media in product.media %}
<li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} {% if enable_thumbnail_slides == true %} product-single__thumbnails-item-slide{% endif %} js"{% if enable_thumbnail_slides == true %} data-slider-slide-index="{{ forloop.index0 }}" data-slider-item{% endif %}>
<a href="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"
class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
data-thumbnail-id="{{ section.id }}-{{ media.id }}"
{% if enable_thumbnail_slides == true %} data-slider-item-link{% endif %}
{% if enable_image_zoom %}data-zoom="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>

{%- capture thumbnailAlt -%}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
{{ 'sections.featured_product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- elsif media.media_type == 'model' -%}
{{ 'sections.featured_product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- else -%}
{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- endif -%}
{%- endcapture -%}

<img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: '110x110', scale: 2 }}" alt="{{ thumbnailAlt }}">
{%- if media.media_type == 'video' or media.media_type =='external_video' -%}
<div class="product-single__thumbnail-badge">
{% include 'icon-video-badge-full-color' %}
</div>
{%- endif -%}
{%- if media.media_type == 'model' -%}
<div class="product-single__thumbnail-badge">
{% include 'icon-3d-badge-full-color' %}
</div>
{%- endif -%}
</a>
</li>
{% endfor %}

{% if enable_thumbnail_slides == true %}
</div>
{% endif %}
</ul>
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}" data-slider-button data-slider-button-next>
{% include 'icon-chevron-right' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
</button>
{% endif %}
</div>
</div>
{% endif %}
</div>

<div class="grid__item {{ product_description_width }}">
<div class="product-single__meta">

<h1 class="product-single__title">{{ product.title }}</h1>
<script>window.performance.mark('debut:product:title_visible');</script>

<div class="product__price">
{% include 'product-price', variant: current_variant, show_vendor: section.settings.show_vendor %}
</div>

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte" data-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 -%}

{% capture "form_classes" -%}
product-form product-form-{{ section.id }}
{%- if section.settings.enable_payment_button and product.has_only_default_variant %} product-form--payment-button-no-variants {%- endif -%}
{%- if current_variant.available == false %} product-form--variant-sold-out {%- endif -%}
{%- endcapture %}

{% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
{% unless product.has_only_default_variant %}
<div class="product-form__controls-group">
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label for="SingleOptionSelector-{{ forloop.index0 }}">
{{ option.name }}
</label>
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
id="SingleOptionSelector-{{ forloop.index0 }}"
data-index="option{{ forloop.index }}"
>
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
{% endfor %}
</div>
{% endunless %}

<select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
{% for variant in product.variants %}
<option value="{{ variant.id }}"
{%- if variant == current_variant %} selected="selected" {%- endif -%}
>
{{ variant.title }} {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
</option>
{% endfor %}
</select>

{% if section.settings.show_quantity_selector %}
<div class="product-form__controls-group">
<div class="product-form__item">
<label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity-{{ section.id }}"
name="quantity" value="1" min="1" pattern="[0-9]*"
class="product-form__input product-form__input--quantity" data-quantity-input
>
</div>
</div>
{% endif %}

<div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden{% if section.settings.enable_payment_button %} product-form__error-message-wrapper--has-payment-button{% endif %}"
data-error-message-wrapper
role="alert"
>
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
</div>

<div class="product-form__controls-group product-form__controls-group--submit">
<div class="product-form__item product-form__item--submit
{%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
{%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}"
>
<button type="submit" name="add"
{% unless current_variant.available %} aria-disabled="true"{% endunless %}
aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
{% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}
data-add-to-cart>
<span data-add-to-cart-text>
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
<span class="hide" data-loader>
{% include 'icon-spinner' %}
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
</div>
{% endform %}
</div>

{%- comment -%}
Live region for announcing updated price and availability to screen readers
{%- endcomment -%}
<p class="visually-hidden" data-product-status
aria-live="polite"
role="status"
></p>

{%- comment -%}
Live region for announcing that the product form has been submitted and the
product is in the process being added to the cart
{%- endcomment -%}
<p class="visually-hidden" data-loader-status
aria-live="assertive"
role="alert"
aria-hidden="true"
>{{ 'products.product.loader_label' | t }}</p>

<div
class="product-single__store-availability-container"
data-store-availability-container
data-product-title="{{ product.title | escape }}"
data-has-only-default-variant="{{ product.has_only_default_variant }}"
>
</div>

<div class="product-single__description rte">
{{ product.description }}
</div>

{% if section.settings.show_share_buttons %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}
{% endif %}
</div>
</div>
</div>

{% unless product == empty %}
<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>
{% endunless %}

 

{% schema %}
{
"name": {
"cs": "Stránky produktů",
"da": "Produktsider",
"de": "Produktseiten",
"en": "Product pages",
"es": "Páginas de productos",
"fi": "Tuotesivut",
"fr": "Pages de produits",
"it": "Pagine di prodotto",
"ja": "商品ページ",
"ko": "제품 페이지",
"nb": "Produktsider",
"nl": "Productpagina's",
"pl": "Strony produktu",
"pt-BR": "Páginas de produtos",
"pt-PT": "Páginas de produtos",
"sv": "Produktsidor",
"th": "หน้าสินค้า",
"tr": "Ürün sayfaları",
"vi": "Trang sản phẩm",
"zh-CN": "产品页面",
"zh-TW": "產品頁面"
},
"settings": [
{
"type": "checkbox",
"id": "show_quantity_selector",
"label": {
"cs": "Zobrazit výběr množství",
"da": "Vis antalsvælger",
"de": "Mengenauswahl anzeigen",
"en": "Show quantity selector",
"es": "Mostrar selector de cantidad",
"fi": "Näytä määrän valitsin",
"fr": "Afficher le sélecteur de quantité",
"it": "Mostra selettore quantità",
"ja": "数量セレクターを表示する",
"ko": "수량 선택기 표시",
"nb": "Vis mengdevelger",
"nl": "Hoeveelheidskiezer weergeven",
"pl": "Pokaż selektor ilości",
"pt-BR": "Exibir seletor de quantidade",
"pt-PT": "Mostrar um seletor de quantidade",
"sv": "Visa kvantitetsväljare",
"th": "แสดงตัวเลือกจำนวน",
"tr": "Adet seçiciyi göster",
"vi": "Hiển thị hộp chọn số lượng",
"zh-CN": "显示数量选择器",
"zh-TW": "顯示數量選擇器"
},
"default": false
},
{
"type": "checkbox",
"id": "show_vendor",
"label": {
"cs": "Zobrazit dodavatele",
"da": "Vis leverandør",
"de": "Lieferanten anzeigen",
"en": "Show vendor",
"es": "Mostrar proveedor",
"fi": "Näytä myyjä",
"fr": "Afficher les vendeurs",
"it": "Mostra fornitore",
"ja": "販売元を表示する",
"ko": "공급업체 표시",
"nb": "Vis leverandør",
"nl": "Leverancier weergeven",
"pl": "Pokaż dostawcę",
"pt-BR": "Exibir fornecedor",
"pt-PT": "Mostrar fornecedor",
"sv": "Visa säljare",
"th": "แสดงผู้ขาย",
"tr": "Satıcıyı göster",
"vi": "Hiển thị nhà cung cấp",
"zh-CN": "显示厂商",
"zh-TW": "顯示廠商"
},
"default": false
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": {
"cs": "Zobrazit dynamické tlačítko pokladny",
"da": "Vis dynamisk betalingsknap",
"de": "Dynamischen Checkout Button anzeigen",
"en": "Show dynamic checkout button",
"es": "Mostrar botón de pago dinámico",
"fi": "Näytä dynaaminen kassapainike",
"fr": "Afficher le bouton de paiement dynamique",
"it": "Mostra pulsante di check-out dinamico",
"ja": "動的チェックアウトボタンを表示する",
"ko": "동적 결제 버튼 표시",
"nb": "Vis dynamisk knapp for å gå til kassen",
"nl": "Dynamische betaalknop weergeven",
"pl": "Pokaż dynamiczny przycisk realizacji zakupu",
"pt-BR": "Exibir botão de checkout dinâmico",
"pt-PT": "Mostrar o botão dinâmico de finalização da compra",
"sv": "Visa dynamiska utcheckningsknappar",
"th": "แสดงปุ่มชำระเงินแบบไดนามิก",
"tr": "Dinamik ödeme düğmesini göster",
"vi": "Hiển thị nút thanh toán động",
"zh-CN": "显示动态结账按钮",
"zh-TW": "顯示動態結帳按鈕"
},
"info": {
"cs": "Každý zákazník uvidí platební metodu, kterou ze všech metod dostupných v obchodě (například PayPal nebo Apple Pay) nejvíce preferuje. [Další informace](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"da": "Den enkelte kunde vil se sin foretrukne betalingsmetode blandt dem, der er tilgængelige i din butik, f.eks. PayPal eller Apple Pay. [Få mere at vide](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"de": "Jeder Kunde sieht seine bevorzugte Zahlungsmethode aus den in deinem Shop verfügbaren Zahlungsmethoden wie PayPal oder Apple Pay. [Mehr Informationen](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"en": "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)",
"es": "Cada cliente verá su forma de pago preferida entre las disponibles en tu tienda, como PayPal o Apple Pay. [Más información](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"fi": "Kukin asiakas näkee ensisijaisen valintansa kauppasi tarjoamista maksutavoista, esim. PayPal tai Apple Pay. [Lisätietoja](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"fr": "Chaque client verra son moyen de paiement préféré parmi ceux qui sont proposés sur votre boutique, tels que PayPal ou Apple Pay. [En savoir plus](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"it": "Ogni cliente vedrà il suo metodo di pagamento preferito tra quelli disponibili nel tuo negozio, come PayPal o Apple Pay. [Maggiori informazioni](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"ja": "PayPalやApple Payなど、ストアで利用可能な希望の決済方法がお客様に表示されます。[詳しくはこちら](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"ko": "각 고객은 PayPal 또는 Apple Pay와 같이 스토어에서 사용 가능한 지불 방법을 확인할 수 있습니다. [자세히 알아보기](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"nb": "Hver enkelt kunde vil se sin foretrukne betalingsmåte blant de som er tilgjengelig i butikken din, som PayPal eller Apple Pay. [Finn ut mer](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"nl": "Elke klant ziet zijn of haar beschikbare voorkeursmethode om af te rekenen, zoals PayPal of Apple Pay. [Meer informatie](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"pl": "Każdy klient zobaczy swoją preferowaną metodę płatności wśród metod dostępnych w Twoim sklepie, np. PayPal lub Apple Pay. [Dowiedz się więcej](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"pt-BR": "Cada cliente verá a forma de pagamento preferencial dele dentre as disponíveis na loja, como PayPal ou Apple Pay. [Saiba mais](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"pt-PT": "Cada cliente irá ver o seu método de pagamento preferido entre os disponíveis na loja, como o PayPal ou Apple Pay. [Saiba mais](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"sv": "Varje kund kommer att se den föredragna betalningsmetoden från de som finns tillgängliga i din butik, till exempel PayPal eller Apple Pay. [Läs mer](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"th": "ลูกค้าแต่ละรายจะเห็นวิธีการชำระเงินที่ต้องการจากวิธีที่ใช้ได้ในร้านค้าของคุณ เช่น PayPal หรือ Apple Pay [ดูข้อมูลเพิ่มเติม](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"tr": "Her müşteri, mağazanız sunulanlar arasından tercih ettikleri ödeme yöntemini görür (ör. PayPal veya Apple Pay). [Daha fazla bilgi edinin](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"vi": "Mỗi khách hàng sẽ thấy phương thức thanh toán ưu tiên trong những phương thức thanh toán được hỗ trợ tại cửa hàng như PayPal hoặc Apple Pay. [Tìm hiểu thêm](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"zh-CN": "每位客户都可在您商店提供的付款方式中看到他们的首选付款方式,例如 PayPal 或 Apple Pay。[了解详细信息](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"zh-TW": "每位顧客都可以在您商店內開放使用的付款方式中看見他們偏好使用的方式,如 PayPal、Apple Pay 等。[深入瞭解](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
},
"default": true
},
{
"type": "checkbox",
"id": "show_share_buttons",
"label": {
"cs": "Zobrazit tlačítka pro sdílení na sociálních sítích",
"da": "Vis knapper til deling på sociale medier",
"de": "Buttons für Social Media anzeigen",
"en": "Show social sharing buttons",
"es": "Mostrar botones para compartir en redes sociales",
"fi": "Näytä sosiaalisen median jakamispainikkeet",
"fr": "Affichez les boutons de partage sur les médias sociaux",
"it": "Mostra i pulsanti per la condivisione sui social",
"ja": "ソーシャルメディアでの共有ボタンを表示する",
"ko": "소셜 공유 버튼 표시",
"nb": "Vis knapper for deling på sosiale medier",
"nl": "Knoppen voor sociaal delen weergeven",
"pl": "Pokaż przyciski udostępniania w mediach społecznościowych",
"pt-BR": "Exibir botões de compartilhamento em redes sociais",
"pt-PT": "Mostrar botões de partilha nas redes sociais",
"sv": "Visa knappar för delning i sociala medier",
"th": "แสดงปุ่มสำหรับแชร์ลงโซเชียล",
"tr": "Sosyal medya paylaşım düğmelerini göster",
"vi": "Hiển thị nút chia sẻ qua mạng xã hội",
"zh-CN": "显示社交分享按钮",
"zh-TW": "顯示社群分享按鈕"
},
"default": true
},
{
"type": "header",
"content": {
"cs": "Multimédia",
"da": "Medie",
"de": "Medien",
"en": "Media",
"es": "Elementos multimedia",
"fi": "Media",
"fr": "Support multimédia",
"it": "Media",
"ja": "メディア",
"ko": "미디어",
"nb": "Medier",
"nl": "Media",
"pl": "Multimedia",
"pt-BR": "Mídia",
"pt-PT": "Multimédia",
"sv": "Media",
"th": "สื่อ",
"tr": "Medya",
"vi": "Nội dung đa phương tiện",
"zh-CN": "媒体",
"zh-TW": "媒體"
},
"info": {
"cs": "Další informace o [typech multimédií](https://help.shopify.com/manual/products/product-media)",
"da": "Få mere at vide om [media types](https://help.shopify.com/manual/products/product-media)",
"de": "Mehr Informationen über [Medientypen ](https://help.shopify.com/manual/products/product-media)",
"en": "Learn more about [media types](https://help.shopify.com/manual/products/product-media)",
"es": "Más información sobre [tipos de archivos multimedia](https://help.shopify.com/manual/products/product-media)",
"fi": "Lue lisää [mediatyypeistä](https://help.shopify.com/manual/products/product-media)",
"fr": "En savoir plus sur les [types de supports multimédia](https://help.shopify.com/manual/products/product-media)",
"it": "Scopri di più sulle [tipologie di file multimediali](https://help.shopify.com/manual/products/product-media)",
"ja": "[メディアのタイプ](https://help.shopify.com/manual/products/product-media) について詳しくはこちら",
"ko": "[미디어 유형](https://help.shopify.com/manual/products/product-media)에 대해 자세히 알아보기",
"nb": "Lær mer om [medietyper](https://help.shopify.com/manual/products/product-media)",
"nl": "Meer informatie over [mediatypen](https://help.shopify.com/manual/products/product-media)",
"pl": "Dowiedz się więcej o [typach multimediów](https://help.shopify.com/manual/products/product-media)",
"pt-BR": "Saiba mais sobre [tipos de mídia](https://help.shopify.com/manual/products/product-media)",
"pt-PT": "Saiba mais sobre [media types](https://help.shopify.com/manual/products/product-media)",
"sv": "Läs mer om [mediatyper](https://help.shopify.com/manual/products/product-media)",
"th": "ดูข้อมูลเพิ่มเติมเกี่ยวกับ [ประเภทของสื่อ](https://help.shopify.com/manual/products/product-media)",
"tr": "[Medya türleri](https://help.shopify.com/manual/products/product-media) hakkında daha fazla bilgi edinin",
"vi": "Tìm hiểu thêm về [loại phương tiện](https://help.shopify.com/manual/products/product-media)",
"zh-CN": "详细了解[媒体类型](https://help.shopify.com/manual/products/product-media)",
"zh-TW": "深入瞭解 [媒體類型](https://help.shopify.com/manual/products/product-media)"
}
},
{
"type": "select",
"id": "media_size",
"label": {
"cs": "Velikost",
"da": "Størrelse",
"de": "Größe",
"en": "Size",
"es": "Tamaño",
"fi": "Koko",
"fr": "Taille",
"it": "Dimensione",
"ja": "サイズ",
"ko": "사이즈",
"nb": "Størrelse",
"nl": "Grootte",
"pl": "Rozmiar",
"pt-BR": "Tamanho",
"pt-PT": "Tamanho",
"sv": "Storlek",
"th": "ขนาด",
"tr": "Boyut",
"vi": "Cỡ",
"zh-CN": "大小",
"zh-TW": "尺寸"
},
"options": [
{
"value": "small",
"label": {
"cs": "Malá",
"da": "Lille",
"de": "Klein",
"en": "Small",
"es": "Pequeño",
"fi": "Pieni",
"fr": "Petit",
"it": "Piccolo",
"ja": "スモール",
"ko": "스몰",
"nb": "Liten",
"nl": "Klein",
"pl": "Mały",
"pt-BR": "Pequeno",
"pt-PT": "Pequeno",
"sv": "Liten",
"th": "เล็ก",
"tr": "Küçük",
"vi": "Nhỏ",
"zh-CN": "小",
"zh-TW": "小型"
}
},
{
"value": "medium",
"label": {
"cs": "Střední",
"da": "Medium",
"de": "Mittel",
"en": "Medium",
"es": "Mediano",
"fi": "Keskisuuri",
"fr": "Moyenne",
"it": "Medio",
"ja": "中",
"ko": "보통",
"nb": "Middels",
"nl": "Gemiddeld",
"pl": "Średni",
"pt-BR": "Médio",
"pt-PT": "Médio",
"sv": "Medium",
"th": "ปานกลาง",
"tr": "Orta",
"vi": "Trung bình",
"zh-CN": "中等",
"zh-TW": "中等"
}
},
{
"value": "large",
"label": {
"cs": "Velká",
"da": "Stor",
"de": "Groß",
"en": "Large",
"es": "Grande",
"fi": "Suuri",
"fr": "Grande",
"it": "Grande",
"ja": "大",
"ko": "라지",
"nb": "Stor",
"nl": "Groot",
"pl": "Duży",
"pt-BR": "Grande",
"pt-PT": "Grande",
"sv": "Stor",
"th": "ใหญ่",
"tr": "Büyük",
"vi": "Lớn",
"zh-CN": "大",
"zh-TW": "大型"
}
},
{
"value": "full",
"label": {
"cs": "Plná šířka",
"da": "Fuld bredde",
"de": "Volle Breite",
"en": "Full-width",
"es": "Ancho completo",
"fi": "Täysi leveys",
"fr": "Pleine largeur",
"it": "Intera larghezza",
"ja": "全幅",
"ko": "전체 폭",
"nb": "Full bredde",
"nl": "Volledige breedte",
"pl": "Pełna szerokość",
"pt-BR": "Largura completa",
"pt-PT": "Largura completa",
"sv": "Full bredd",
"th": "เต็มความกว้าง",
"tr": "Tam genişlikli",
"vi": "Độ rộng đầy đủ",
"zh-CN": "全宽",
"zh-TW": "完整寬度"
}
}
],
"default": "medium"
},
{
"type": "checkbox",
"id": "enable_image_zoom",
"label": {
"cs": "Povolit zvětšení obrázku",
"da": "Aktivér billedzoom",
"de": "Foto-Zoom zulassen",
"en": "Enable image zoom",
"es": "Habilitar zoom de imagen",
"fi": "Ota kuvan zoomaus käyttöön",
"fr": "Activer le zoom d'image",
"it": "Abilita lo zoom dell'immagine",
"ja": "画像ズームを有効にする",
"ko": "이미지 확대 사용",
"nb": "Aktiver bildezoom",
"nl": "Inzoomen op afbeelding inschakelen",
"pl": "Włącz powiększenie obrazu",
"pt-BR": "Habilitar o zoom da imagem",
"pt-PT": "Ativar o zoom da imagem",
"sv": "Aktivera bildzoom",
"th": "เปิดใช้การซูมภาพ",
"tr": "Görsel yakınlaştırmayı etkinleştir",
"vi": "Bật thu phóng hình ảnh",
"zh-CN": "启用图片缩放",
"zh-TW": "啟用圖片縮放"
},
"default": true
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": {
"cs": "Povolit smyčky videa",
"da": "Aktivér looping af videoer",
"de": "Videoschleife aktivieren",
"en": "Enable video looping",
"es": "Habilitar la reproducción de video en bucle",
"fi": "Ota käyttöön videosilmukka",
"fr": "Activer le bouclage de la vidéo",
"it": "Abilita la riproduzione in loop dei video",
"ja": "ビデオのループを有効にする",
"ko": "동영상 루프",
"nb": "Aktiver løkkeavspilling av video",
"nl": "Video-looping inschakelen",
"pl": "Włącz zapętlanie wideo",
"pt-BR": "Habilitar loop de vídeo",
"pt-PT": "Ativar ciclo de vídeo",
"sv": "Aktivera video-loopning",
"th": "เปิดใช้การวนซ้ำวิดีโอ",
"tr": "Video döngüsünü etkinleştir",
"vi": "Bật vòng lặp video",
"zh-CN": "启用视频循环",
"zh-TW": "啟用影片循環功能"
},
"default": false
}
]
}
{% endschema %}

0 Likes
KAShlee876
New Member
3 0 0

<div class="product-template"
id="ProductSection-{{ section.id }}"
data-section-id="{{ section.id }}"
data-ProductSection
data-section-type="product-template"
data-enable-history-state="true"
data-enable-swatch="{% if section.settings.variant_style == 'dropdowns' %}false{% else %}true{% endif %}"
>
<section class="single-product">
{% comment %}
Get first variant, or deep linked one
{% endcomment %}
{% assign current_variant = product.selected_or_first_available_variant %}
<div class="wrapper">

<header class="content-util">
{% include 'breadcrumb' %}
{% include 'social-icons' %}
</header>

<header class="product-header">
<div class="product-jump-container">
{% comment %}
If the user is on a collection product page (ie with /collections/collection-handle/products/product-handle)
in the URL, we can show next/previous links to other products in the collection.
{% endcomment %}
{% if collection and section.settings.show_product_jump %}
{% if collection.previous_product or collection.next_product %}
<ul class="product-jump">

{% if collection.previous_product %}
{% capture prev_url %}{{ collection.previous_product}}#content{% endcapture %}
<li class="previous">
{{ 'products.general.previous_product_html' | t | link_to: prev_url }}
</li>
{% endif %}

{% if collection.next_product %}
{% capture next_url %}{{ collection.next_product}}#content{% endcapture %}
<li class="next">
{{ 'products.general.next_product_html' | t | link_to: next_url }}
</li>
{% endif %}

</ul>
{% endif %}
{% endif %}
</div>

</header>

<div class="grid">
<div class="product-images thumbnails-placement-{{ section.settings.thumbnails_placement }}">
<div class="images-container">
{% include 'product-featured-image' %}

{%- comment -%}
Create thumbnails if there is more than one product image
{%- endcomment -%}
{%- unless product.images.size == 1 or section.settings.thumbnails_placement == 'hide' -%}
{%- if section.settings.thumbnails_placement contains 'side' -%}
{% include 'product-thumbnails' %}
{%- endif -%}

{% include 'product-thumbnails-slider' %}
{%- endunless -%}
</div>
</div>

<aside class="product-aside">
<div class="purchase-box {% if section.settings.product_box_padding %}padding-box{% endif %}">
{% comment %}
ID addToCartForm is a selector for the ajax cart plugin
{% endcomment %}
<div id="AddToCartForm-{{ section.id }}" data-AddToCartForm class="form-vertical product-form product-form-{{ section.id }}" {% if section.settings.show_payment_button %}data-dynamic-checkout="true"{% endif %} data-section="{{ section.id }}">
{% include 'product-form' %}
</div>
</div>
<style>
.methods-of-payment img { padding: 0.2em; }
.lt-ie9 .methods-of-payment, .ie8 .methods-of-payment, .oldie .methods-of-payment { display: none; }
</style>
<span class="methods-of-payment">
<img src="{{ 'amazon_payments' | payment_type_img_url }}" height="50" alt="amazon payments" />
<img src="{{ 'apple_pay' | payment_type_img_url }}" height="50" alt="apple pay" />
<img src="{{ 'american_express' | payment_type_img_url }}" height="50" alt="american express" />
<img src="{{ 'diners_club' | payment_type_img_url }}" height="50" alt="diners club" />
<img src="{{ 'discover' | payment_type_img_url }}" height="50" alt="discover" />
<img src="{{ 'jcb' | payment_type_img_url }}" height="50" alt="jcb" />
<img src="{{ 'maestro' | payment_type_img_url }}" height="50" alt="maestro" />
<img src="{{ 'master' | payment_type_img_url }}" height="50" alt="master" />
<img src="{{ 'paypal' | payment_type_img_url }}" height="50" alt="paypal" />
<img src="{{ 'visa' | payment_type_img_url }}" height="50" alt="visa" />
</span>

{% if section.settings.trust_badge %}
<div class="trust-badge">
{% if section.settings.trust_badge %}
{%- assign image = section.settings.trust_badge -%}
{% assign image_widths = '295,394,590,700,800,1000,1200,1500,1800,2000,2400' %}
{% include 'theme-rias' %}
<img class="trust-badge--image lazyload"
src="data&colon;image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
style="max-width: {{ image.width }}px;"
data-src="{{ image_url_pattern }}"
data-widths="[{{ image_widths }}]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
{% endif %}
</div>
<style>
{%- assign padding = 1 | divided_by: image.aspect_ratio | times: 100 | append: '%' -%}
#ProductSection-{{ section.id }} aside.product-aside .trust-badge:before {
padding-bottom: {{ padding }};
}
</style>
{% endif %}

<div class="description rte" data-tabs-enable="{{ section.settings.tabs_enable }}">
{%- assign description_parts = product.description | split: '<!-- split -->' -%}
{%- assign description_first_part = description_parts | first -%}
{%- if section.settings.tabs_enable -%}
{%- comment -%}
Split up the content of the description into tab titles and content by the auto_headings value
{%- endcomment -%}
<div class="description__tabs">
{%- comment -%}
Break up description into headings and tabs using auto heading values
{%- endcomment -%}
{%- assign auto_heading= '<' | append: section.settings.tabs_auto_headings | append: '>' -%}
{%- assign auto_heading_end = '</' | append: section.settings.tabs_auto_headings | append: '>' -%}
{%- assign desc_tabs = description_first_part | split: auto_heading -%}
{%- assign first_tab = true -%}
{%- for tab in desc_tabs -%}
{%- assign tab_size = tab | strip_html | strip | size -%}
{%- unless tab_size == 0 -%}
{%- assign tab_parts = tab | split: auto_heading_end -%}
<div class="tab tab--{{ forloop.index }} {% if first_tab %}tab--active {%- assign first_tab = false -%} {% endif %}">
{%- if tab_parts.size > 1 -%}
<div class="tab__title" tabindex="0">{{ tab_parts[0] }}</div>
<div class="tab__content">{{ tab_parts[1] }}</div>
{%- else -%}
<div class="tab__title" tabindex="0">{{ section.settings.tabs_title }}</div>
<div class="tab__content">{{ tab_parts[0] }}</div>
{%- endif -%}
</div>
{%- endunless -%}
{%- endfor -%}

{%- comment -%}
Add the additional optional pages of tabs
{%- endcomment -%}
{%- if section.settings.tabs_global_page_1 != blank -%}
<div class="tab tab--global-1">
<div class="tab__title" tabindex="0">{{ pages[section.settings.tabs_global_page_1].title }}</div>
<div class="tab__content">{{ pages[section.settings.tabs_global_page_1].content }}</div>
</div>
{%- endif -%}
{%- if section.settings.tabs_global_page_2 != blank -%}
<div class="tab tab--global-1">
<div class="tab__title" tabindex="0">{{ pages[section.settings.tabs_global_page_2].title }}</div>
<div class="tab__content">{{ pages[section.settings.tabs_global_page_2].content }}</div>
</div>
{%- endif -%}
{%- if section.settings.tabs_global_page_3 != blank -%}
<div class="tab tab--global-1">
<div class="tab__title" tabindex="0">{{ pages[section.settings.tabs_global_page_3].title }}</div>
<div class="tab__content">{{ pages[section.settings.tabs_global_page_3].content }}</div>
</div>
{%- endif -%}
</div>
{%- else -%}
{%- comment -%}
Display the normal description or first description part before the split
{%- endcomment -%}
{{ description_first_part }}
{%- endif -%}
</div>
{% if section.settings.show_share_buttons %}
{% include 'social-share' %}
{% endif %}
</aside>
</div>

{%- if description_parts.size > 1 -%}
<div class="additional-description rte">
{%- for description_part in description_parts -%}
{%- unless forloop.first -%}
{{ description_part }}
{%- endunless -%}
{%- endfor -%}
</div>
{%- endif -%}
{% comment %}
Related products
{% endcomment %}
{% for block in section.blocks %}
<div class="product-block-container" {{ block.shopify_attributes }}>
{% case block.type %}
{% when 'related_products' %}
<div class="block-container">
{% include 'related-products' %}
</div>

{% when 'product_collection'}
{%- assign product_collection_count = '4' -%}
{%- assign collection_count = '4' -%}
<div class="simple-collection layout-{{ collection_count }}">
<div class="wrapper">
<header>
{% if block.settings.title != blank %}
<h4>{{ block.settings.title | escape }}</h4>
{% endif %}
{% if block.settings.button_link != blank and block.settings.button_label != blank %}
<a href="{{ block.settings.button_link }}" class="button outline">{{ block.settings.button_label | escape }}</a>
{% endif %}
</header>
<div class="product-container">
{%- assign collection = collections[block.settings.collection] -%}
{%- assign product_limit = collection_count -%}
{% for product in collection.products limit: product_limit %}
{% include 'product-grid-item' %}
{% else %}
{% for i in (1..product_limit) %}
{% include 'placeholder-product-grid-item' %}
{% endfor %}
{% endfor %}
</div>
</div>
</div>
{% endcase %}
</div>
{% endfor %}

</div>
{% unless product.empty? %}
<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>
{% endunless %}

{%- if section.settings.size_guide_page != blank -%}
<div id="product-size-guide-content-{{ section.id }}" class="popup-page mfp-hide">
<div class="rte">{{ pages[section.settings.size_guide_page].content }}</div>
</div>
{%- endif -%}

{% assign current_variant = product.selected_or_first_available_variant %}
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": {{ product.title | json }},
"url": {{ shop.url | append: product.url | json }},
{%- if product.featured_image -%}
{%- assign image_size = product.featured_media.preview_image.width | append: 'x' -%}
"image": [
{{ product.featured_media.preview_image | img_url: image_size | prepend: "https:" | json }}
],
{%- endif -%}
"description": {{ product.description | strip_html | json }},
{%- if current_variant.sku != blank -%}
"sku": {{ current_variant.sku | json }},
{%- else -%}
"sku": {{ current_variant.id | json }},
{%- endif -%}
{%- if current_variant.barcode.size == 12 -%}
"gtin12": {{ variant.barcode | json }},
{%- endif -%}
{%- if current_variant.barcode.size == 13 -%}
"gtin13": {{ variant.barcode | json }},
{%- endif -%}
{%- if current_variant.barcode.size == 14 -%}
"gtin14": {{ variant.barcode | json }},
{%- endif -%}
"brand": {
"@type": "Thing",
"name": {{ product.vendor | json }}
},
"offers": [
{%- for variant in product.variants -%}
{
"@type" : "Offer",
"availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
"itemCondition" : "http://schema.org/NewCondition",
"price" : {{ variant.price | divided_by: 100.00 | json }},
"priceCurrency" : {{ cart.currency.iso_code | json }},
"url" : {{ shop.url | append: variant.url | json }},
{%- if variant.image -%}
{%- assign variant_image_size = variant.image.width | append: 'x' -%}
"image": {{ variant.image.src | img_url: variant_image_size | prepend: "https:" | json }},
{%- endif -%}
{%- if variant.title != 'Default Title' -%}
"name" : "{{ product.title | strip_html | escape }} - {{ variant.title | escape }}",
{%- else -%}
"name" : {{ product.title | json }},
{%- endif -%}
{%- if variant.barcode.size == 12 -%}
"gtin12": {{ variant.barcode | json }},
{%- endif -%}
{%- if variant.barcode.size == 13 -%}
"gtin13": {{ variant.barcode | json }},
{%- endif -%}
{%- if variant.barcode.size == 14 -%}
"gtin14": {{ variant.barcode | json }},
{%- endif -%}
{%- if variant.sku != blank -%}
"sku": {{ variant.sku | json }},
{%- else -%}
"sku": {{ variant.id | json }},
{%- endif -%}
"priceValidUntil": "{{ 'now' | date: '%s' | plus: 31536000 | date: '%Y-%m-%d' | uri_encode | replace:'+','%20' }}",
"seller": {
"@type": "Organization",
"name": {{ shop.name | json }}
}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
]
}
</script>


{% schema %}
{
"name": "Product pages",
"settings": [
{
"type": "checkbox",
"id": "show_vendors",
"label": "Show vendor",
"default": false
},
{
"type": "checkbox",
"id": "show_savings",
"label": "Show savings",
"default": false
},
{
"type": "select",
"id": "variant_style",
"label": "Product variant style",
"options": [
{
"value": "dropdowns",
"label": "Dropdowns"
},
{
"value": "buttons",
"label": "Buttons"
},
{
"value": "swatches",
"label": "Swatches"
}
],
"default": "dropdowns"
},
{
"type": "page",
"id": "size_guide_page",
"label": "Size guide content"
},
{
"type": "checkbox",
"id": "product_quantity_enable",
"label": "Show quantity selector",
"default": true
},
{
"type": "checkbox",
"id": "show_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": true
},
{
"type": "checkbox",
"id": "product_box_padding",
"label": "Show product details background",
"default": true
},
{
"type": "header",
"content": "Swatches"
},
{
"type": "checkbox",
"id": "variant_swatch_images",
"label": "Show swatch images",
"info": "Upload custom swatch images. [Learn more](https://help.stylehatch.com/article/335-product-color-swatches)",
"default": false
},
{
"type": "select",
"id": "variant_swatch_shape",
"label": "Swatch shape",
"options": [
{
"value": "circle",
"label": "Circle"
},
{
"value": "square",
"label": "Square"
}
],
"default": "circle"
},
{
"type": "checkbox",
"id": "variant_swatch_soldout",
"label": "Disable sold out swatches",
"default": true
},
{
"type": "header",
"content": "Media",
"info": "Learn more about [media types](https://help.shopify.com/manual/products/product-media)"
},
{
"type": "checkbox",
"id": "enable_image_slider",
"label": "Enable media slider",
"default": true
},
{
"type": "checkbox",
"id": "show_dots",
"label": "Show slider dots",
"default": false
},
{
"type": "checkbox",
"id": "show_arrows",
"label": "Show previous and next arrows",
"default": false
},
{
"type": "select",
"id": "thumbnails_placement",
"label": "Thumbnails placement",
"options": [
{
"value": "side--left",
"label": "Left"
},
{
"value": "side",
"label": "Right"
},
{
"value": "below",
"label": "Below"
},
{
"value": "hide",
"label": "Hide"
}
],
"default": "below"
},
{
"type": "checkbox",
"id": "enable_thumb_slider",
"label": "Group thumbnails",
"default": true
},
{
"type": "checkbox",
"id": "product_featured_zoom_enable",
"label": "Enable zoom",
"default": false
},
{
"type": "checkbox",
"id": "product_featured_lightbox_enable",
"label": "Enable lightbox",
"default": false
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": "Enable video looping",
"default": false
},
{
"type": "header",
"content": "Description tabs"
},
{
"type": "checkbox",
"id": "tabs_enable",
"label": "Enable description tabs",
"default": false
},
{
"type": "select",
"id": "tabs_auto_headings",
"label": "Description headings to tabs",
"options": [
{
"value": "disabled",
"label": "Disabled"
},
{
"value": "h1",
"label": "Heading 1"
},
{
"value": "h2",
"label": "Heading 2"
},
{
"value": "h3",
"label": "Heading 3"
},
{
"value": "h4",
"label": "Heading 4"
},
{
"value": "h5",
"label": "Heading 5"
},
{
"value": "h6",
"label": "Heading 6"
}
],
"default": "h4",
"info": "Automatically create tabs from the headings added to the product description."
},
{
"type": "text",
"id": "tabs_title",
"label": "Default tab title",
"default": "Description"
},
{
"type": "page",
"id": "tabs_global_page_1",
"label": "Tab content 1"
},
{
"type": "page",
"id": "tabs_global_page_2",
"label": "Tab content 2"
},
{
"type": "page",
"id": "tabs_global_page_3",
"label": "Tab content 3"
},
{
"type": "header",
"content": "Additional options"
},
{
"type": "checkbox",
"id": "show_product_jump",
"label": "Show previous and next links",
"default": false
},
{
"type": "image_picker",
"id": "trust_badge",
"label": "Checkout badge image"
},
{
"type": "checkbox",
"id": "show_share_buttons",
"label": "Show social sharing buttons",
"default": true
}
]
}
{% endschema %}

0 Likes