Shopify themes, liquid, logos, and UX
Hi, I've started getting this error "Required parameter missing or invalid: items" when adding to cart
My theme is debut, my site is littletingles.com
My product-template.liquid code is :
<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 %} {% if product.variants.size > 1 %} {% assign current_variant = product.selected %} {% else %} {% assign current_variant = product.first_available_variant %} {% endif %} {%- assign product_image_zoom_size = '1024x1024' -%} {%- assign product_image_scale = '2' -%} {%- assign enable_zoom = section.settings.enable_zoom -%} {%- assign compare_at_price = current_variant.compare_at_price -%} {%- assign price = current_variant.price -%} {% case section.settings.image_size %} {% when 'small' %} {%- assign product_image_width = 'medium-up--one-third' -%} {%- assign product_description_width = 'medium-up--two-thirds' -%} {%- assign product_thumbnail_width = 'medium-up--one-third' -%} {%- assign height = 345 -%} {% when 'medium' %} {%- assign product_image_width = 'medium-up--one-half' -%} {%- assign product_description_width = 'medium-up--one-half' -%} {%- assign product_thumbnail_width = 'medium-up--one-quarter' -%} {%- assign height = 530 -%} {% when 'large' %} {%- assign product_image_width = 'medium-up--two-thirds' -%} {%- assign product_description_width = 'medium-up--one-third' -%} {%- assign product_thumbnail_width = 'medium-up--one-fifth' -%} {%- assign height = 720 -%} {% when 'full' %} {%- assign product_image_width = '' -%} {%- assign product_description_width = '' -%} {%- assign product_thumbnail_width = 'medium-up--one-eighth' -%} {%- assign height = 1090 -%} {%- assign enable_zoom = false -%} {% endcase %} <div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{ section.settings.image_size }}-image{% endif %}"> <div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}"> {% assign featured_image = product.images.first | default: product.featured_image %} {% for image in product.images %} {% capture img_id %}FeaturedImage-{{ section.id }}-{{ image.id }}{% endcapture %} {% capture img_class %}product-featured-img{% endcapture %} {% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ image.id }}{% endcapture %} {% capture img_wrapper_id %}{{ zoom_img_id }}-wrapper{% endcapture %} {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {% include 'image-style', image: image, height: height, wrapper_id: img_wrapper_id, img_id: img_id %} <div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper js"> <div id="{{ zoom_img_id }}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;" class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}{% unless featured_image == image %} hide{% endunless %}" data-image-id="{{ image.id }}" {% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}> <img id="{{ img_id }}" class="feature-row__image {{ img_class }} lazyload{% unless featured_image == image %} lazypreload{% endunless %}" src="{{ image | img_url: '300x300' }}" data-src="{{ img_url }}" data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="{{ image.aspect_ratio }}" data-sizes="auto" tabindex="-1" alt="{{ image.alt | escape }}"> </div> </div> {% endfor %} <noscript> {% capture product_image_size %}{{ height }}x{% endcapture %} <img src="{{ featured_image | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_image.alt }}" id="FeaturedImage-{{ section.id }}" class="product-featured-img" style="max-width: {{ height }}px;"> </noscript> {% if product.images.size > 1 %} {% if product.images.size > 3 %} {%- assign enable_thumbnail_slides = true -%} {% endif %} <div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}"> {% 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 }}"> {% include 'icon-chevron-left' %} <span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span> </button> {% endif %} <ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}"> {% for image in product.images %} <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js"> <a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}" class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}" data-thumbnail-id="{{ image.id }}" {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}> <img class="product-single__thumbnail-image" src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: image.alt | escape }}"> </a> </li> {% endfor %} </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 }}"> {% include 'icon-chevron-right' %} <span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span> </button> {% endif %} </div> {% endif %} </div> <div class="grid__item {{ product_description_width }}"> <div class="product-single__meta"> <h1 class="product-single__title">{{ product.title }}</h1> <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"> {%- 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 }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}{% if section.settings.enable_payment_button and product.has_only_default_variant%} product-form--payment-button-no-variants{% 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 {% if option.name == 'default' %}class="label--hidden" {% endif %}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 %} {% if variant.available %} <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} {% assign featured_image = product.images.first | default: product.featured_image %} </option> {% else %} <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option> {% endif %} {% 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> <select name="quantity" id="quantity"> {% for i in (1..20) %} <option value="{{ i }}">{{ i }}</option> {% endfor %} </select> </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 %}" 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 class="ultimate-badges"></div> </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__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 %} {% endif %} </div> </div> </div> {% unless product == empty %} <script type="application/json" id="ProductJson-{{ section.id }}"> {{ product | json }} </script> {% endunless %} {% schema %} { "name": { "da": "Produktsider", "de": "Produktseiten", "en": "Product pages", "es": "Páginas de productos", "fi": "Tuotesivut", "fr": "Pages de produits", "hi": "उत्पाद पेज", "it": "Pagine di prodotto", "ja": "商品ページ", "ko": "제품 페이지", "ms": "Halaman produk", "nb": "Produktsider", "nl": "Productpagina's", "pt-BR": "Páginas de produtos", "pt-PT": "Páginas de produtos", "sv": "Produktsidor", "th": "หน้าสินค้า", "zh-CN": "产品页面", "zh-TW": "產品頁面" }, "settings": [ { "type": "select", "id": "image_size", "label": { "da": "Billedets størrelse", "de": "Foto-Größe", "en": "Image size", "es": "Tamaño de la imagen", "fi": "Kuvan koko", "fr": "Taille des images", "hi": "इमेज का आकार", "it": "Dimensione immagine", "ja": "画像サイズ", "ko": "이미지 크기", "ms": "Saiz imej", "nb": "Bildestørrelse", "nl": "Afbeeldingsformaat", "pt-BR": "Tamanho da imagem", "pt-PT": "Tamanho da imagem", "sv": "Bildstorlek", "th": "ขนาดรูปภาพ", "zh-CN": "图片尺寸", "zh-TW": "圖片尺寸" }, "options": [ { "value": "small", "label": { "da": "Lille", "de": "Klein", "en": "Small", "es": "Pequeña", "fi": "Pieni", "fr": "Petite", "hi": "छोटा", "it": "Piccolo", "ja": "小", "ko": "스몰", "ms": "Kecil", "nb": "Liten", "nl": "Klein", "pt-BR": "Pequeno", "pt-PT": "Pequeno", "sv": "Liten", "th": "เล็ก", "zh-CN": "小", "zh-TW": "小型" } }, { "value": "medium", "label": { "da": "Medium", "de": "Mittel", "en": "Medium", "es": "Mediana", "fi": "Keskisuuri", "fr": "Moyenne", "hi": "मध्यम", "it": "Medio", "ja": "中", "ko": "보통", "ms": "Sederhana", "nb": "Middels", "nl": "Gemiddeld", "pt-BR": "Médio", "pt-PT": "Médio", "sv": "Medium", "th": "ปานกลาง", "zh-CN": "中等", "zh-TW": "中等" } }, { "value": "large", "label": { "da": "Stor", "de": "Groß", "en": "Large", "es": "Grande", "fi": "Suuri", "fr": "Grande", "hi": "बड़ा", "it": "Grande", "ja": "大", "ko": "라지", "ms": "Besar", "nb": "Stor", "nl": "Groot", "pt-BR": "Grande", "pt-PT": "Grande", "sv": "Stor", "th": "ใหญ่", "zh-CN": "大", "zh-TW": "大型" } }, { "value": "full", "label": { "da": "Fuld bredde", "de": "Volle Breite", "en": "Full-width", "es": "Ancho completo", "fi": "Täysi leveys", "fr": "Pleine largeur", "hi": "पूर्ण चौड़ाई", "it": "Intera larghezza", "ja": "全幅", "ko": "전체 폭", "ms": "Lebar penuh", "nb": "Full bredde", "nl": "Volledige breedte", "pt-BR": "Largura completa", "pt-PT": "Largura completa", "sv": "Full bredd", "th": "เต็มความกว้าง", "zh-CN": "全宽", "zh-TW": "完整寬度" } } ], "default": "medium" }, { "type": "checkbox", "id": "show_quantity_selector", "label": { "da": "Vis antalsvælger", "de": "Quantitäts-Auswahl anzeigen", "en": "Show quantity selector", "es": "Mostrar selector de cantidad", "fi": "Näytä määrän valitsin", "fr": "Afficher le sélecteur de quantité", "hi": "मात्रा चयनकर्ता दिखाएं", "it": "Mostra selettore quantità", "ja": "数量セレクターを表示する", "ko": "수량 선택기 표시", "ms": "Tunjukkan pemilih kuantiti", "nb": "Vis mengdevelger", "nl": "Hoeveelheidskiezer weergeven", "pt-BR": "Exibir seletor de quantidade", "pt-PT": "Mostrar um seletor de quantidade", "sv": "Visa kvantitetsväljare", "th": "แสดงตัวเลือกจำนวน", "zh-CN": "显示数量选择器", "zh-TW": "顯示數量選擇器" }, "default": false }, { "type": "checkbox", "id": "show_variant_labels", "label": { "da": "Vis variantlabels", "de": "Varianten-Etiketten anzeigen", "en": "Show variant labels", "es": "Mostrar etiquetas de variantes", "fi": "Näytä vaihtoehtoiset tarrat", "fr": "Afficher le nom des variantes", "hi": "वेरिएंट लेबल दिखाएं", "it": "Mostra etichette varianti", "ja": "バリエーションのラベルを表示する", "ko": "이형 상품 레이블 표시", "ms": "Tunjukkan label varian", "nb": "Vis variantetiketter", "nl": "Variantlabels weergeven", "pt-BR": "Exibir etiquetas de variantes", "pt-PT": "Mostrar etiquetas de variantes", "sv": "Visa variantetiketter", "th": "แสดงป้ายกำกับตัวเลือกสินค้า", "zh-CN": "显示多属性标签", "zh-TW": "顯示子類選項標籤" }, "default": true }, { "type": "checkbox", "id": "show_vendor", "label": { "da": "Vis leverandør", "de": "Lieferanten anzeigen", "en": "Show vendor", "es": "Mostrar proveedor", "fi": "Näytä myyjä", "fr": "Afficher les vendeurs", "hi": "विक्रेता दिखाएं", "it": "Mostra fornitore", "ja": "販売元を表示する", "ko": "공급업체 표시", "ms": "Tunjukkan vendor", "nb": "Vis leverandør", "nl": "Leverancier weergeven", "pt-BR": "Exibir fornecedor", "pt-PT": "Mostrar fornecedor", "sv": "Visa säljare", "th": "แสดงผู้ขาย", "zh-CN": "显示厂商", "zh-TW": "顯示廠商" }, "default": false }, { "type": "checkbox", "id": "enable_zoom", "label": { "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", "hi": "इमेज ज़ूम सक्षम करें", "it": "Abilita lo zoom dell'immagine", "ja": "画像ズームを有効にする", "ko": "이미지 확대 사용", "ms": "Dayakan zum imej", "nb": "Aktiver bildezoom", "nl": "Inzoomen op afbeelding inschakelen", "pt-BR": "Habilitar o zoom da imagem", "pt-PT": "Ativar o zoom da imagem", "sv": "Aktivera bildzoom", "th": "เปิดใช้การซูมภาพ", "zh-CN": "启用图片缩放", "zh-TW": "啟用圖片縮放" }, "default": true }, { "type": "checkbox", "id": "enable_payment_button", "label": { "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 passage à la caisse dynamique", "hi": "डायनेमिक चेकआउट बटन दिखाएं", "it": "Mostra pulsante di check-out dinamico", "ja": "ダイナミックチェックアウトボタンを表示する", "ko": "동적 결제 버튼 표시", "ms": "Tunjukkan butang daftar keluar dinamik", "nb": "Vis dynamisk knapp for å gå til kassen", "nl": "Dynamische checkout knop weergeven", "pt-BR": "Exibir botão dinâmico de finalização da compra", "pt-PT": "Mostrar o botão dinâmico de finalização da compra", "sv": "Visa dynamiska utcheckningsknappar", "th": "แสดงปุ่มชำระเงินแบบไดนามิก", "zh-CN": "显示动态结账按钮", "zh-TW": "顯示動態結帳按鈕" }, "info": { "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 Ihrem Shop verfügbaren Zahlungsmethoden wie PayPal oder Apple Pay. [Mehr Infos](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)", "hi": "प्रत्येक ग्राहक आपके स्टोर पर उपलब्ध अपनी पसंदीदा भुगतान की विधि देखेंगे जैसे PayPal या Apple Pay. [अधिक जानें](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)", "ms": "Setiap pelanggan akan melihat kaedah pembayaran keutamaan mereka dari yang tersedia di kedai anda, seperti PayPal atau Apple Pay. [Ketahui lebih lanjut](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)", "pt-BR": "Cada cliente verá sua forma de pagamento preferida 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)", "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": { "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", "hi": "सोशल शेयरिंग बटन दिखाएं", "it": "Mostra i pulsanti per la condivisione sui social", "ja": "ソーシャル共有ボタンを表示する", "ko": "소셜 공유 버튼 표시", "ms": "Tunjukkan butang perkongsian sosial", "nb": "Vis knapper for deling på sosiale medier", "nl": "Knoppen voor sociaal delen weergeven", "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": "แสดงปุ่มสำหรับแชร์ลงโซเชียล", "zh-CN": "显示社交分享按钮", "zh-TW": "顯示社群分享按鈕" }, "default": true } ] } {% endschema %} <script> var productOptions = []; {% for option in product.options %} var optionObj = {}; optionObj[ {{ forloop.index0 }} ] = "{{ product.options[forloop.index0] }}"; productOptions.push(optionObj); {% endfor %} </script> {% comment %} Place this in your product.liquid template, at the bottom. {% endcomment %} {% if product.variants.size > 1 %} <script> var variantImages = {}, thumbnails, variant, variantImage, optionValue, productOptions = []; {% for variant in product.variants %} variant = {{ variant | json }}; if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) { variantImage = variant.featured_image.src.split('?')[0].replace(/http(s)?:/,''); variantImages[variantImage] = variantImages[variantImage] || {}; {% for option in product.options %} {% assign option_value = variant.options[forloop.index0] %} {% assign option_key = 'option-' | append: forloop.index0 %} if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') { variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }}; } else { var oldValue = variantImages[variantImage][{{ option_key | json }}]; if ( oldValue !== null && oldValue !== {{ option_value | json }} ) { variantImages[variantImage][{{ option_key | json }}] = null; } } {% endfor %} } productOptions.push(variant); {% endfor %} </script> {% endif %}
Please help
Solved! Go to the solution
This is an accepted solution.
Figured it out myself. If anyone ever has this problem. I had to add:
value="{{ variant.id }}"> {{ variant.title }}
too line 162 so that the code would look like this:
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} {% assign featured_image = product.images.first | default: product.featured_image %} value="{{ variant.id }}"> {{ variant.title }} </option>
So glad I didn't pay someone just to find out that I need to add such a simple line of code to make it work.
This is an accepted solution.
Figured it out myself. If anyone ever has this problem. I had to add:
value="{{ variant.id }}"> {{ variant.title }}
too line 162 so that the code would look like this:
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} {% assign featured_image = product.images.first | default: product.featured_image %} value="{{ variant.id }}"> {{ variant.title }} </option>
So glad I didn't pay someone just to find out that I need to add such a simple line of code to make it work.
hi im having the same issue with my website and have the debut them too, im not the best with themes any chance you could do a step by step
how to add question in shopify community?
can you help me??
Hello All,
I am facing the exact problem, my theme is Dawn.
I tried to locate the right place in coding to add mentioned solution but it does not work.
Anybody had the same problem with Dawn theme and found a solution?
Please share the solution with all of us.
I searched throughout Shopify but could not find the any useful information for dawn theme.
Just had the same issue kick in our site unexpectedly, looks like the issue was being cause by conflicting apps in the cart. Specifically the 'Volume Boost' App.
We disabled this app and it seemed to have fixed the issue.
I have the same problem with dawn theme did you found the solution?
\
I'm just wondering if anyone found the fix for Dawn theme? I found this part of the code above, but it's all there.
He's current code for that section:
<noscript class="product-form__noscript-wrapper-{{ section.id }}">
<div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
<label class="form__label" for="Variants-{{ section.id }}">{{ 'products.product.product_variants' | t }}</label>
<div class="select">
<select name="id" id="Variants-{{ section.id }}" class="select__select" form="{{ product_form_id }}">
{%- for variant in product.variants -%}
<option>
{% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
{% if variant.available == false %}disabled{% endif %}
value="{{ variant.id }}"
I've added, I've removed. Nothing seems to work. Let me know if anyone got a solution! Thanks in advance!
i'm using the debut theme and i'm having the same issue. I don't see a template.liquid file. in my theme code
Same issue in dawn theme. Please please help!
I am in the same situation. Did you ever find a fix?
Hi,
I have the same problem with the Prestige theme. Does this solution work with it?
I use Studio theme, it still has this error, I contacted Shopify support, and they are resolving this. Have you resolved this issue?
I have to say that their actions are so slow, I contacted them for 2 weeks, but no results. I just add the code provided by ThomasKn, and it looks like working well, no errors. I'll keep testing.
Same probleme here with Dawn theme. Anyone has a fix for this?
Yes I did, currently running version 6.0.2
Hi, How did you resolve this issue?
I found and fixed the issue in Dawn theme.
The product id input is disabled by default line 426:
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled>
Here is the fix:
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}>
thanks for sharing this method in free, I test on my theme-studio, and it works normally, the Shopify theme support didn't resolve this issue for me
what file did you add this to?
Bonjour et merci beaucoup pour votre partage. Cela aurait pu m’aider mais depuis le thème a évolué en version et je n’ai que 328 pages ... je ne peux donc pas faire la modification.
This fix worked for me in the Dawn theme, main-product.liquid line 290
Thanks!
I am still having this issue and no one can help:
Parameter missing or invalid:items
Can anyone please help?
you need to modify the code, according to ThomasKn's method, this issue could be resolved, try again, maybe you need a developer if you could not understand code.
Where will I find that code? Theme.liquid, product.liquid?
product.liquid
Bonjour j’ai le même problème mais depuis le message de ThomasKn le thème a évolué en version et je n’ai que 328 pages ... je ne peux donc pas faire la modification.
Does anyone know how to fix this problem off the Tailor theme? Thanks!
I am also having the same issue and it difficult to replicate when I get my theme developer to test it, when I add the code above to fix to my site , my site has other issues but I can at least make sales. Has anyone worked out what app may be causing this?
This is very frustrating.
Im using 'warehouse' theme
I just solved this problem:
In your theme.js file (assets folder), search for this code:
document.dispatchEvent(new CustomEvent('theme:loading:start'));
fetch("".concat(window.routes.cartChangeUrl, ".js"), {
body: JSON.stringify({
line: target.getAttribute('data-line'),
quantity: parsedQuantity
}),
credentials: 'same-origin',
method: 'POST',
headers:
...
You need to check if the attribute line is being correctly sent (it has to be the number of the line in your cart, eg: 1, 2, 3...).
Otherwise, change the attribute 'line' to 'id'. ID is a number like this: 1102325375907:6e543e26-4b83-40c8-8a23-11e.
The bug happens due to the inconsistency in the parameters. If you're sending a string, use 'id'. If you're sending the line number from your cart in your cart template, send 'line'. Also, maybe you'll need to change 'data-line' to 'data-line-id', depending on your html file.
For this, in your cart template file, check the funcion calls to confirm if you are sending the correct parameters.
<a href="{{ routes.cart_change_url }}?quantity=0&id={{ line_item.key }}" data-action="decrease-quantity" data-quantity="0" data-line-id="{{ line_item.key }}" class="line-item__quantity-remove link">{{ 'cart.items.remove' | t }}</a>
In short,
1. In my code, in the html I was sending the parameter 'data-line-id', and the JS was expecting 'data-line'.
2. The JS file was expecting an integer as 'line' and I was sending a string as 'id'.
I hope it works for you guys.
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024