Incoraggiare i clienti a scegliere un'opzione

Attenzione

I temi vintage non sono disponibili nel Theme Store. Questi temi non dispongono delle funzionalità incluse nei temi dell'Online Store 2.0 di Shopify e i temi vintage gratuiti di Shopify non ricevono aggiornamenti oltre alle correzioni di sicurezza.

Nota

Se utilizzi un tema gratuito di Shopify, puoi contattare l'Assistenza Shopify per ricevere aiuto con questo tutorial. Sono necessari 15 minuti di tempo di progettazione. Scopri di più su Shopify Design Policy.

Nota

Questa personalizzazione è per i temi Shopify vintage e non si applica ai temi dell'Online Store 2.0.

• Scopri la versione della struttura del tuo tema
• Esplora le opzioni di personalizzazione del tema dell'Online Store 2.0.

Quando un cliente visita una pagina del prodotto sul tuo negozio online, per impostazione predefinita viene selezionata la prima variante disponibile. Puoi utilizzare la personalizzazione Incoraggiare i clienti a scegliere un'opzione per disabilitare la selezione automatica della prima variante disponibile. In questo modo prima di mostrare una variante, verrà richiesto al cliente di selezionarne una manualmente.

Se utilizzi l'opzione Incoraggiare i clienti a scegliere un'opzione per fare in modo che i clienti scelgano un'opzione di personalizzazione, il tema potrebbe non mostrare il prezzo del prodotto fino a quando il cliente non ne seleziona una variante. I prodotti con varianti non hanno un prezzo in evidenza e il prezzo visualizzato è determinato dalla variante selezionata.

Temi con sezioni e temi senza sezioni

Nota

I passaggi di questo tutorial variano a seconda che si usi un tema con sezioni o senza sezioni. Un tema con sezioni ti consente di trascinare e rilasciare le sezioni per organizzare il layout della homepage, diversamente da quanto accade con un tema senza sezioni.

Per scoprire se il tuo tema supporta le sezioni, vai alla pagina Modifica codice del tema. Se la directory Sections contiene file, stai usando un tema con sezioni. I temi senza sezioni sono stati pubblicati prima di ottobre 2016 e non hanno file nella directory Sections.

Se usi un tema con sezioni, fai clic sul pulsante Temi con sezioni e segui le istruzioni. Se usi un tema precedente senza sezioni, fai clic sul pulsante Temi senza sezioni e segui le istruzioni.

Passaggi per i Temi con sezioni

Seleziona il tuo tema

I passaggi per questa personalizzazione variano a seconda del tuo tema. Clicca sul pulsante del tema prima di seguire le istruzioni qui sotto:

Boundless

Passaggi per Boundless

Segui questi passaggi per applicare la personalizzazione a Boundless:

Modifica il file JavaScript del tema

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
3. Nella directory Risorse, clicca su theme.js o su theme.js.liquid.
4. Trova il codice initVariantSelectors. Di seguito cerca il codice seguente:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

Aggiungi il codice seguente in una nuova riga sottostante:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Dovrebbe avere un aspetto simile a questo:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Trova la riga di codice seguente:

$(selectors.addToCartText).html(theme.strings.soldOut);

Esistono due istanze di questa riga di codice, entrambe visibili nella funzione productVariantCallback. Sostituisci solo la seconda istanza con:

$(selectors.addToCartText).html('Make a Selection');

1. Clicca su Salva.

Nota

Alcune versioni di Boundless non includono la riga di codice da sostituire in questo passaggio. Se non riesci a trovare il codice, vai al passaggio successivo.

Modifica il modello della pagina del prodotto

Per modificare il modello della pagina del prodotto:

1. Nella directory Sezioni, clicca su product-template.liquid.
2. Trova il codice seguente:

{% assign current_variant = product.selected_or_first_available_variant %}

Sostituiscilo con:

{% assign current_variant = product.selected_variant %}

1. Trova il codice seguente ed eliminalo:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Trova il codice {% schema %}. Sopra a questo, incolla il codice seguente su una riga separata:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Dovrebbe avere un aspetto simile a questo:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Clicca su Salva.

Modifica le impostazioni della lingua per il pulsante Aggiungi al carrello

Puoi modificare le impostazioni della lingua per il pulsante Aggiungi al carrello per evitare che i prodotti appaiano come Non disponibili prima che un cliente selezioni un prodotto.

Passaggi:

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Trova il tema che desideri modificare, quindi clicca su ... > Modifica contenuto tema predefinito.
3. Nella barra di ricerca Filtra articoli, inizia a digitare non disponibile per visualizzare la traduzione di Non disponibile.
4. Sostituisci il testo Non disponibile con Fai una selezione.
5. Clicca su Salva.

Debut

Passaggi per Debut

Segui questi passaggi per applicare la personalizzazione a Debut:

Modifica il file JavaScript del tema

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
3. Nella directory Risorse, clicca su theme.js o su theme.js.liquid.
4. Aggiungi il seguente codice in fondo al file:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. Trova il codice _updatePrice: function(variant). Sostituiscilo con il codice seguente:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price &&
  variant.unit_price === this.currentVariant.unit_price
) {
  return;
}

con:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price &&
  variant.unit_price === this.currentVariant.unit_price
) {
  return;
} */

Se non riesci a trovare il codice riportato sopra, cerca il codice seguente:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
}

Sostituiscilo con:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
} */

1. Trova il codice this.currentVariant = variant;

Sotto aggiungi il codice seguente:

this._updatePaymentButton(variant);

Il risultato dovrebbe avere un aspetto simile a questo:

this.currentVariant = variant;
this._updatePaymentButton(variant);

1. Trova il codice _updateImages: function(variant). Sostituiscilo con il codice seguente:

var currentVariantImage = this.currentVariant.featured_image || {};

con:

if (this.currentVariant != undefined) {
  var currentVariantImage = this.currentVariant.featured_image || {};
}

1. Appena sotto trova il codice seguente:

if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
}

Sostituiscilo con:

/* if (
  !variant.featured_image ||
  variantImage.src === currentVariantImage.src
) {
  return;
} */

1. Trova il codice _updateSKU: function(variant). Sostituiscilo con il codice seguente:

if (variant.sku === this.currentVariant.sku) {
  return;
}

con:

if (this.currentVariant != undefined ) {
  if (variant.sku === this.currentVariant.sku) {
    return;
  }
}

1. Trova il codice _initVariants: function() {. Sostituiscilo con il codice seguente:

if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
}

con:

/* if (this.storeAvailability && this.variants.currentVariant.available) {
  this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */

Nota

Questo codice deve essere sostituito solo nella versione Debut 17.5.0e successive.

1. Trova il codice seguente:

_updateSKU: function(variant) {
  if (this.currentVariant != undefined ) {
    if (variant.sku === this.currentVariant.sku) {
      return;
    }
  }

  this.container.dispatchEvent(
    new CustomEvent('variantSKUChange', {
      detail: {
        variant: variant
      },
      bubbles: true,
      cancelable: true
    })
  );
},

Aggiungi il codice seguente su una nuova riga sotto il codice riportato sopra:

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

Dovrebbe avere un aspetto simile a questo:

_updateSKU: function(variant) {
  if (this.currentVariant != undefined ) {
    if (variant.sku === this.currentVariant.sku) {
      return;
    }
  }

  this.container.dispatchEvent(
    new CustomEvent('variantSKUChange', {
      detail: {
        variant: variant
      },
      bubbles: true,
      cancelable: true
    })
  );
},

_updatePaymentButton: function(variant) {
  if (this.currentVariant != undefined) {
    const paymentButton = document.querySelector('.payment-button');

    if (paymentButton) {
      paymentButton.removeAttribute('class', 'visually-hidden');
     }
  } else {
    document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
  }
},

1. Clicca su Salva.

Modifica il modello della pagina del prodotto

Per modificare il modello della pagina del prodotto:

1. Nella directory Sezioni, clicca su product-template.liquid.
2. Trova il codice seguente:

{%- assign current_variant = product.selected_or_first_available_variant -%}

Sostituiscilo con:

{%- if product.variants.size > 1 -%}
  {%- assign current_variant = product.selected_variant -%}
{%- else %}
  {%- assign current_variant = product.first_available_variant -%}
{%- endif %}

1. Trova il codice seguente ed eliminalo:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

Se non riesci a trovare il codice riportato sopra, cerca il codice seguente ed eliminalo:

{%- if variant == current_variant %} selected="selected" {%- endif -%}

1. Trova il codice seguente:

{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}

Sostituiscilo con:

{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

Se non riesci a trovare il codice riportato sopra, cerca il codice seguente:

{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

Sostituiscilo con:

{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}

Nota

Alcune versioni di Debut non includono la riga di codice da sostituire in questo passaggio. Se non riesci a trovare il codice, vai al passaggio successivo.

1. Trova il codice seguente:

{% unless current_variant.available %}
  {{ 'products.product.sold_out' | t }}
{% else %}
  {{ 'products.product.add_to_cart' | t }}
{% endunless %}

Sostituiscilo con:

{% if current_variant == blank %}
  {{ 'products.product.unavailable' | t }}
{% elsif current_variant.available %}
  {{ 'products.product.add_to_cart' | t }}
{% else %}
  {{ 'products.product.sold_out' | t }}
{% endif %}

1. Trova il codice seguente:

{% if section.settings.enable_payment_button %}
  {{ form | payment_button }}
{% endif %}

Sostituiscilo con:

<div class="payment-button {% if current_variant == blank %}visually-hidden {% endif %}">
  {% if section.settings.enable_payment_button %}
    {{ form | payment_button }}
  {% endif %}
</div>

1. Trova il codice {% schema %}. Sopra a questo, incolla il codice seguente su una riga separata:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Dovrebbe avere un aspetto simile a questo:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Clicca su Salva.

Modifica il frammento del prezzo del prodotto

Per modificare il frammento del prezzo del prodotto:

1. Nella directory Frammenti, clicca su product-price.liquid.
2. Trova il codice seguente:

{%- liquid
  if variant.title
    assign compare_at_price = variant.compare_at_price
    assign price = variant.price
    assign available = variant.available
  else
    assign compare_at_price = 1999
    assign price = 1999
    assign available = true
  endif

  assign money_price = price | money
-%}

Sostituiscilo con:

{%- liquid
  if variant.title
    assign compare_at_price = variant.compare_at_price
    assign price = variant.price
    assign available = variant.available
  elsif product.title
    assign compare_at_price = product.compare_at_price
    assign price = product.price
    assign available = product.available
  else
    assign compare_at_price = 1999
    assign price = 1999
    assign available = true
  endif

  assign money_price = price | money
-%}

Nota

Alcune versioni di Debut non includono il codice da sostituire in questo passaggio. Se non riesci a trovare il codice, vai al passaggio successivo.

Modifica le impostazioni della lingua per il pulsante Aggiungi al carrello

Puoi modificare le impostazioni della lingua per il pulsante Aggiungi al carrello per evitare che i prodotti appaiano come Non disponibili prima che un cliente selezioni un prodotto.

Passaggi:

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Trova il tema che desideri modificare, quindi clicca su ... > Modifica contenuto tema predefinito.
3. Nella barra di ricerca Filtra articoli, inizia a digitare non disponibile per visualizzare la traduzione di Non disponibile.
4. Sostituisci il testo Non disponibile con Fai una selezione.
5. Clicca su Salva.

Minimal

Passaggi per Minimal

Segui questi passaggi per applicare la personalizzazione a Minimal:

Modifica il file JavaScript del tema

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
3. Nella directory Risorse, clicca su theme.js o su theme.js.liquid.
4. Trova il codice initProductVariant: function() {. Di seguito cerca il codice seguente:

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

Aggiungi il codice seguente in una nuova riga sottostante:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Dovrebbe avere un aspetto simile a questo:

// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
  product.variants.length === 1 &&
  product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
  $('.selector-wrapper', this.$container).hide();
}

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Clicca su Salva.

Modifica il modello della pagina del prodotto

Per modificare il modello della pagina del prodotto:

1. Nella directory Sezioni, clicca su product-template.liquid.
2. Trova il codice seguente:

{% assign variant = product.selected_or_first_available_variant %}

Sostituiscilo con:

{% assign variant = product.selected_variant %}

1. Trova il codice seguente ed eliminalo:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Trova tutte le istanze di questo codice:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Sostituisci con:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

1. Trova il codice {% schema %}. Sopra a questo, incolla il codice seguente su una riga separata:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Dovrebbe avere un aspetto simile a questo:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Clicca su Salva.

Modifica le impostazioni della lingua per il pulsante Aggiungi al carrello

Puoi modificare le impostazioni della lingua per il pulsante Aggiungi al carrello per evitare che i prodotti appaiano come Non disponibili prima che un cliente selezioni un prodotto.

Passaggi:

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Trova il tema che desideri modificare, quindi clicca su ... > Modifica contenuto tema predefinito.
3. Nella barra di ricerca Filtra articoli, inizia a digitare non disponibile per visualizzare la traduzione di Non disponibile.
4. Sostituisci il testo Non disponibile con Fai una selezione.
5. Clicca su Salva.

Narrative

Passaggi per Narrative

Segui questi passaggi per applicare la personalizzazione a Narrative:

Modifica il file JavaScript del tema

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
3. Nella directory Risorse, clicca su custom.js.
4. Aggiungi il seguente codice in fondo al file:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. Clicca su Salva.

Modifica il modello della pagina del prodotto

Per modificare il modello della pagina del prodotto:

1. Nella directory Sezioni, clicca su product-template.liquid.
2. Trova il codice seguente:

{%- assign current_variant = product.selected_or_first_available_variant -%}

Sostituiscilo con:

{%- if product.variants.size > 1 -%}
  {%- assign current_variant = product.selected_variant -%}
{%- else -%}
  {%- assign current_variant = product.first_available_variant -%}
{%- endif -%}

1. Trova il codice {% schema %}. Sopra a questo, incolla il codice seguente su una riga separata:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Dovrebbe avere un aspetto simile a questo:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Clicca su Salva.

Modifica le impostazioni della lingua per il pulsante Aggiungi al carrello

Puoi modificare le impostazioni della lingua per il pulsante Aggiungi al carrello per evitare che i prodotti appaiano come Non disponibili prima che un cliente selezioni un prodotto.

Passaggi:

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Trova il tema che desideri modificare, quindi clicca su ... > Modifica contenuto tema predefinito.
3. Nella barra di ricerca Filtra articoli, inizia a digitare non disponibile per visualizzare la traduzione di Non disponibile.
4. Sostituisci il testo Non disponibile con Fai una selezione.
5. Clicca su Salva.

Simple

Passaggi per Simple

Segui questi passaggi per applicare la personalizzazione a Simple:

Modifica il file JavaScript del tema

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
3. Nella directory Risorse, clicca su theme.js o su theme.js.liquid.
4. Trova il codice initProductVariant: function() {. Di seguito cerca il codice seguente:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

Aggiungi il codice seguente in una nuova riga sottostante:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Dovrebbe avere un aspetto simile a questo:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Clicca su Salva.

Modifica il modello della pagina del prodotto

Per modificare il modello della pagina del prodotto:

1. Nella directory Sezioni, clicca su product-template.liquid.
2. Trova il codice seguente:

{% assign current_variant = product.selected_or_first_available_variant %}

Sostituiscilo con:

{% assign current_variant = product.selected_variant %}

1. Trova il codice seguente ed eliminalo:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Trova il codice {% schema %}. Sopra a questo, incolla il codice seguente su una riga separata:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Dovrebbe avere un aspetto simile a questo:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Clicca su Salva.

Modifica le impostazioni della lingua per il pulsante Aggiungi al carrello

Puoi modificare le impostazioni della lingua per il pulsante Aggiungi al carrello per evitare che i prodotti appaiano come Non disponibili prima che un cliente selezioni un prodotto.

Passaggi:

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Trova il tema che desideri modificare, quindi clicca su ... > Modifica contenuto tema predefinito.
3. Nella barra di ricerca Filtra articoli, inizia a digitare non disponibile per visualizzare la traduzione di Non disponibile.
4. Sostituisci il testo Non disponibile con Fai una selezione.
5. Clicca su Salva.

Supply

Passaggi per Supply

Segui questi passaggi per applicare la personalizzazione a Supply:

Modifica il file JavaScript del tema

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
3. Nella directory Risorse, clicca su theme.js o su theme.js.liquid.
4. Trova il codice initProductVariant: function() {. Di seguito cerca il codice seguente:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

Aggiungi il codice seguente in una nuova riga sottostante:

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

Dovrebbe avere un aspetto simile a questo:

// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);

if (typeof(productOptions) != "undefined") {
  for (i = 0; i < productOptions.length; i++) {
    const vowels = ['a', 'e', 'i', 'o', 'u'];
    const firstOptionLetter = productOptions[i][i][0].toLowerCase();
    let indef = 'a';

    if (vowels.includes(firstOptionLetter)) {
      indef = 'an';
    };

    const select = document.querySelectorAll('.single-option-selector')[i];
    const options = select.querySelectorAll('option');

    if (options.length > 1) {
      let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

      select.add(option, select.firstChild);
      select.selectedIndex = 0;
    }
  }
}

1. Clicca su Salva.

Modifica il modello della pagina del prodotto

Per modificare il modello della pagina del prodotto:

1. Nella directory Sezioni, clicca su product-template.liquid.
2. Trova il codice seguente:

{% assign variant = product.selected_or_first_available_variant %}

Sostituiscilo con:

{% assign variant = product.selected_variant %}

1. Trova il codice seguente ed eliminalo:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

1. Trova tutte le istanze di questo codice:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Sostituiscilo con:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

1. Trova il codice {% schema %}. Sopra a questo, incolla il codice seguente su una riga separata:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Dovrebbe avere un aspetto simile a questo:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Clicca su Salva.

Modifica le impostazioni della lingua per il pulsante Aggiungi al carrello

Puoi modificare le impostazioni della lingua per il pulsante Aggiungi al carrello per evitare che i prodotti appaiano come Non disponibili prima che un cliente selezioni un prodotto.

Passaggi:

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Trova il tema che desideri modificare, quindi clicca su ... > Modifica contenuto tema predefinito.
3. Nella barra di ricerca Filtra articoli, inizia a digitare non disponibile per visualizzare la traduzione di Non disponibile.
4. Sostituisci il testo Non disponibile con Fai una selezione.
5. Clicca su Salva.

Venture

Passaggi per Venture

Segui questi passaggi per applicare la personalizzazione a Venture:

Modifica il file JavaScript del tema

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
3. Nella directory Risorse, clicca su theme.js o su theme.js.liquid.
4. Aggiungi il seguente codice in fondo al file:

(function() {
  if (typeof(productOptions) != "undefined") {
    for (i = 0; i < productOptions.length; i++) {
      const vowels = ['a', 'e', 'i', 'o', 'u'];
      const firstOptionLetter = productOptions[i][i][0].toLowerCase();
      let indef = 'a';

      if (vowels.includes(firstOptionLetter)) {
        indef = 'an';
      };

      const select = document.querySelectorAll('.single-option-selector')[i];
      const options = select.querySelectorAll('option');

      if (options.length > 1) {
        let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');

        select.add(option, select.firstChild);
        select.selectedIndex = 0;
      }
    }
  }
})();

1. Trova il codice seguente:

this.currentVariant = this._getVariantFromOptions();

Sostituiscilo con:

this.currentVariant = this._getVariantFromOptions() || {};

1. Trova il codice _updatePrice: function(variant). Sostituiscilo con il codice seguente:

if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
}

con:

/* if (
  variant.price === this.currentVariant.price &&
  variant.compare_at_price === this.currentVariant.compare_at_price
) {
  return;
} */

1. Clicca su Salva.

Modifica il modello della pagina del prodotto

Per modificare il modello della pagina del prodotto:

1. Nella directory Sezioni, clicca su product-template.liquid.
2. Trova il codice seguente:

{% assign current_variant = product.selected_or_first_available_variant %}

Sostituiscilo con:

{% if product.variants.size > 1 %}
  {% assign current_variant = product.selected_variant %}
{% else %}
  {% assign current_variant = product.first_available_variant %}
{% endif %}

1. Trova il codice seguente ed eliminalo:

{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}

Se non riesci a trovare il codice riportato sopra, cerca questo codice ed eliminalo:

{% if variant == current_variant %} selected="selected" {% endif %}

1. Trova tutte le istanze di questo codice:

{% unless current_variant.available %}

Sostituiscilo con:

{% unless current_variant.available or product.variants.size == 1 and variant.available %}

1. Trova il codice seguente:

{% unless current_variant.available or product.variants.size == 1 and variant.available %}
  {{ 'products.product.sold_out' | t }}
{% else %}
  {{ 'products.product.add_to_cart' | t }}
{% endunless %}

Sostituiscilo con:

{% if current_variant == blank %}
  {{ 'products.product.unavailable' | t }}
{% else %}
  {% unless current_variant.available or product.variants.size == 1 and variant.available %}
    {{ 'products.product.sold_out' | t }}
  {% else %}
    {{ 'products.product.add_to_cart' | t }}
  {% endunless %}
{% endif %}

1. Trova il codice {% schema %}. Sopra a questo, incolla il codice seguente su una riga separata:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

Dovrebbe avere un aspetto simile a questo:

{% if current_variant == blank %}
  <script>
    var productOptions = [];

    {% for option in product.options -%}
      var optionObj = {};
      optionObj[{{ forloop.index0 }}] = "{{ product.options[forloop.index0] }}";
      productOptions.push(optionObj);
    {%- endfor %}
  </script>
{% endif %}

{% schema %}

1. Clicca su Salva.

Modifica le impostazioni della lingua per il pulsante Aggiungi al carrello

Puoi modificare le impostazioni della lingua per il pulsante Aggiungi al carrello per evitare che i prodotti appaiano come Non disponibili prima che un cliente selezioni un prodotto.

Passaggi:

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Trova il tema che desideri modificare, quindi clicca su ... > Modifica contenuto tema predefinito.
3. Nella barra di ricerca Filtra articoli, inizia a digitare non disponibile per visualizzare la traduzione di Non disponibile.
4. Sostituisci il testo Non disponibile con Fai una selezione.
5. Clicca su Salva.

Passaggi per i Temi senza sezioni

Aggiunta di prompt ai menu a discesa delle varianti

1. Nella directory Frammenti, clicca su Aggiungi un nuovo frammento.
2. Assegna al nuovo frammento il nome pick-an-option.
3. Nel file del nuovo frammento, incolla questo codice ospitato su GitHub.
4. Clicca su Salva.
5. Nella directory Layout, clicca su theme.liquid.
6. Trova il tag di chiusura </body> in fondo al file. Su una nuova riga proprio sopra il tag di chiusura </body>, incolla il codice seguente:

{% render 'pick-an-option' %}

1. Clicca su Salva.

2. Trova il file che contiene il modulo Aggiungi al carrello. Avrà l’attributo action impostato su /cart/add. Dovrebbe essere in uno di questi quattro file:

   • modelli product.liquid in Modelli
   • layout theme.liquid in Layout
   • frammento product.liquid in Frammenti
   • frammento single-product.liquid in Frammenti

3. Trova questo codice nel modulo:

<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

O Trova questo codice nel modulo:

<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Sostituisci il codice con il seguente blocco di codice:

<option {% if forloop.length <= 1 and variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

Se utilizzi Minimal, Pop o Supply, trova tutte le istanze di questo codice:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

Sostituisci il codice con il seguente blocco di codice:

{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}

Se utilizzi un altro tema vintage di Shopify, trova questo codice:

{% assign current_variant = product.selected_or_first_available_variant %}

Sostituisci il codice con il seguente blocco di codice:

{% assign current_variant = product.selected_variant %}

Clicca su Salva.

Modifica le impostazioni della lingua per il pulsante Aggiungi al carrello

Puoi modificare le impostazioni della lingua per il pulsante Aggiungi al carrello per evitare che i prodotti appaiano come Non disponibili prima che un cliente selezioni un prodotto.

Passaggi:

1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
2. Trova il tema che desideri modificare, quindi clicca su ... > Modifica contenuto tema predefinito.
3. Nella barra di ricerca Filtra articoli, inizia a digitare non disponibile per visualizzare la traduzione di Non disponibile.
4. Sostituisci il testo Non disponibile con Fai una selezione.
5. Clicca su Salva.