'UNVAILABLE' text in buy button

Excursionist
59 1 6

Hello Guys,

I follow the steps of shopify tutorials,that helps you to put on the main image in the right place (that was the problem that i got at the time,my main image,was always choosed and selected ,but never remain as main image).

After that tutorial,this little text 'UNVAILABLE' always appear in the button. It desappear when i select variants,for sure. But for the client,this can be confuse.... how can i better fix this?Do you think it's intuitive for the client?

 

Looking for some opinions,

Thank you,

Sofia

Sem Título.png

0 Likes

Hello 

You are working on which theme?

Please share your site url.

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

Email: pallavi@oscprofessionals.com

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Excursionist
59 1 6
Sorry,i forgot!
URL: https://tickytocker.com/
Theme: Debut
0 Likes

Hello 

Have you work on product-template.liquid file.
Or have you edited that file.
Plaese share code of that file.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Excursionist
59 1 6

I'm so sorry for the late reply :( 

I may have done some changes at my product-template.liquid file.

This is my code:

<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">

  {% 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 = current_variant.featured_image | 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' with small_style: true, width: height, 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>
{% comment %}Start automatically added Judge.me widget{% endcomment %}
  {% include 'judgeme_widgets', widget_type: 'judgeme_preview_badge', concierge_install: true %}
{% comment %}End automatically added Judge.me widget{% endcomment %}


          <div class="product__price">
            {% include 'product-price', variant: current_variant %}
          </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 %}
              {% 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 %}
            {% endunless %}

            <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
              {% for variant in product.variants %}
                {% if variant.available %}
                  <option  value="{{ variant.id }}">
                    {{ variant.title }}
                  </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__item product-form__item--quantity">
                <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
                <input type="number" id="Quantity-{{ section.id }}" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*" data-quantity-input>
              </div>
            {% endif %}

            <div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden" data-error-message-wrapper role="alert">
              {% include 'icon-error' %} <span class="product-form__error-message" data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
            </div>

            <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 }}
                les/trust_badges.png?1111"
              {% endif %}
                
              
            </div>
          {% endform %}
<div id="globo-bought-together"></div>
        </div>
<a class="btn buy_now" href="/cart/{{product.selected_or_first_available_variant.id}}:1/">Buy now</a>      
        
      {%- 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 }}
         <img src="https://cdn.shopify.com/s/files/1/0050/8778/9091/files/trust_badge_y.png?1140"
              
        </div>
     

        {% if section.settings.show_share_buttons %}
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
        {% endif %}
    </div>
  
{% comment %}Start automatically added Judge.me widget{% endcomment %}
  {% include 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: true %}
{% comment %}End automatically added Judge.me widget{% endcomment %}
</div>
</div>

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
{% endunless %}



<div id="globo-recommendations"></div>
{% schema %}
{
  "name": {
    "de": "Produktseiten",
    "en": "Product pages",
    "es": "Páginas de productos",
    "fr": "Pages de produits",
    "it": "Pagine di prodotto",
    "ja": "商品ページ",
    "nl": "Productpagina's",
    "pt-BR": "Páginas de produtos",
    "zh-CN": "产品页面",
    "zh-TW": "產品頁面"
  },
  "settings": [
    {
      "type": "select",
      "id": "image_size",
      "label": {
        "de": "Foto-Größe",
        "en": "Image size",
        "es": "Tamaño de la imagen",
        "fr": "Taille des images",
        "it": "Dimensione immagine",
        "ja": "画像のサイズ",
        "nl": "Afbeeldingsformaat",
        "pt-BR": "Tamanho da imagem",
        "zh-CN": "图片尺寸",
        "zh-TW": "圖片尺寸"
      },
      "options": [
        {
          "value": "small",
          "label": {
            "de": "Klein",
            "en": "Small",
            "es": "Pequeña",
            "fr": "Petite",
            "it": "Piccolo",
            "ja": "小",
            "nl": "Klein",
            "pt-BR": "Pequeno",
            "zh-CN": "小",
            "zh-TW": "小型"
          }
        },
        {
          "value": "medium",
          "label": {
            "de": "Mittel",
            "en": "Medium",
            "es": "Mediana",
            "fr": "Moyenne",
            "it": "Medio",
            "ja": "中",
            "nl": "Gemiddeld",
            "pt-BR": "Médio",
            "zh-CN": "中等",
            "zh-TW": "中等"
          }
        },
        {
          "value": "large",
          "label": {
            "de": "Groß",
            "en": "Large",
            "es": "Grande",
            "fr": "Grande",
            "it": "Grande",
            "ja": "大",
            "nl": "Groot",
            "pt-BR": "Grande",
            "zh-CN": "大",
            "zh-TW": "大型"
          }
        },
        {
          "value": "full",
          "label": {
            "de": "Volle Breite",
            "en": "Full-width",
            "es": "Ancho completo",
            "fr": "Pleine largeur",
            "it": "Intera larghezza",
            "ja": "全幅",
            "nl": "Volledige breedte",
            "pt-BR": "Largura completa",
            "zh-CN": "全宽",
            "zh-TW": "完整寬度"
          }
        }
      ],
      "default": "medium"
    },
    {
      "type": "checkbox",
      "id": "show_quantity_selector",
      "label": {
        "de": "Quantitäts-Auswahl anzeigen",
        "en": "Show quantity selector",
        "es": "Mostrar selector de cantidad",
        "fr": "Afficher le sélecteur de quantité",
        "it": "Mostra selettore quantità",
        "ja": "数量セレクターを表示する",
        "nl": "Hoeveelheidskiezer weergeven",
        "pt-BR": "Exibir seletor de quantidade",
        "zh-CN": "显示数量选择器",
        "zh-TW": "顯示數量選擇器"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "show_variant_labels",
      "label": {
        "de": "Varianten-Etiketten anzeigen",
        "en": "Show variant labels",
        "es": "Mostrar etiquetas de variantes",
        "fr": "Afficher le nom des variantes",
        "it": "Mostra etichette varianti",
        "ja": "バリエーションのラベルを表示する",
        "nl": "Variantlabels weergeven",
        "pt-BR": "Exibir etiquetas de variantes",
        "zh-CN": "显示多属性标签",
        "zh-TW": "顯示子類選項標籤"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_vendor",
      "label": {
        "de": "Lieferanten anzeigen",
        "en": "Show vendor",
        "es": "Mostrar proveedor",
        "fr": "Afficher les vendeurs",
        "it": "Mostra fornitore",
        "ja": "販売元を表示する",
        "nl": "Leverancier weergeven",
        "pt-BR": "Exibir fornecedor",
        "zh-CN": "显示厂商",
        "zh-TW": "顯示廠商"
      },
      "default": false
    },
    {
      "type": "checkbox",
      "id": "enable_zoom",
      "label": {
        "de": "Foto-Zoom zulassen",
        "en": "Enable image zoom",
        "es": "Habilitar zoom de imagen",
        "fr": "Activer le zoom d'image",
        "it": "Abilita lo zoom dell'immagine",
        "ja": "画像ズームを有効にする",
        "nl": "Inzoomen op afbeelding inschakelen",
        "pt-BR": "Ativar o zoom da imagem",
        "zh-CN": "启用图片缩放",
        "zh-TW": "啟用圖片縮放"
      },
      "default": true
    },
    {
      "type": "checkbox",
      "id": "enable_payment_button",
      "label": {
        "de": "Dynamischen Checkout Button anzeigen",
        "en": "Show dynamic checkout button",
        "es": "Mostrar botón de pago dinámico",
        "fr": "Afficher le bouton de passage à la caisse dynamique",
        "it": "Mostra pulsante di check-out dinamico",
        "ja": "ダイナミックチェックアウトボタンを表示する",
        "nl": "Dynamische checkout knop weergeven",
        "pt-BR": "Exibir botão dinâmico de finalização da compra",
        "zh-CN": "显示动态结账按钮",
        "zh-TW": "顯示動態結帳按鈕"
      },
      "info": {
        "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)",
        "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)",
        "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á seu método de pagamento preferido dentre os disponíveis na loja, como PayPal ou Apple Pay. [Saiba mais](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": {
        "de": "Buttons für Social Media anzeigen",
        "en": "Show social sharing buttons",
        "es": "Mostrar botones para compartir en redes sociales",
        "fr": "Affichez les boutons de partage sur les médias sociaux",
        "it": "Mostra i pulsanti per la condivisione sui social",
        "ja": "ソーシャル共有ボタンを表示する",
        "nl": "Knoppen voor sociaal delen weergeven",
        "pt-BR": "Exibir botões de compartilhamento em redes sociais",
        "zh-CN": "显示社交分享按钮",
        "zh-TW": "顯示社群分享按鈕"
      },
      "default": true
    }
  ]
}
{% endschema %}

  <div class="product-single__photos">
          {% assign featured_image = current_variant.featured_image | default: product.featured_image %}

          {% comment %}
            Display current variant image, or default first
          {% endcomment %}
         

          {% comment %}
            Display rest of product images, not repeating the featured one
          {% endcomment %}
          {% for image in product.images %}
            {% unless image contains featured_image %}
              <div class="product-single__photo-wrapper variant-featured-img">
                <img class="product-single__photo" src="{{ image.src | img_url: '600x', scale: 2 }}"
                  {% if section.settings.zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024', scale: 2 }}"{% endif %}
                  alt="{{ image.alt | escape }}"
                  data-image-id="{{ image.id }}">
              </div>
          
          <style>
            .variant-featured-img{ display: none};
          </style>
            {% endunless %}
          {% endfor %}
        </div>
  
  <script>
var productOptions = [];
  {% for option in product.options %}
  var optionObj = {};
  optionObj[ {{ forloop.index0 }} ] = "{{ product.options[forloop.index0] }}";
  productOptions.push(optionObj);
  {% endfor %}
</script>

Thank you so much!

Sofia

0 Likes