Incoraggiare i clienti a scegliere un'opzione

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. Per maggiori informazioni, consulta la pagina Assistenza per i temi.

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 questa personalizzazione 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. )

Nota

Poiché questa personalizzazione impedisce la selezione di una variante per impostazione predefinita, il tema potrebbe non mostrare il prezzo del prodotto fino a quando il cliente non seleziona una variante. Questo è un comportamento previsto, perché i prodotti con varianti non hanno un prezzo in evidenza. 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 home page, 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.

Sectioned themes

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

Per modificare il file JavaScript del tema:

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

2. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

iPhone

1. Nell'app Shopify tocca Negozio.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci temi.

4. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

Android

1. Nell'app Shopify tocca Negozio.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci temi.

4. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

1. Nella directory Risorse, clicca su theme.js o su theme.js.liquid.

2. 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);

Add the following code on a new line below:

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;
    }
  }
}

It should look something like this:

// 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);

There are *two instances* of this line of code, both found within the `productVariantCallback` function. Replace only the *second* instance with:

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

> Note:
> Some versions of Boundless do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.

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 %}

Replace it with:

{% 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 %}

It should look something like this:

{% 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 sia effettuata una selezione.

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

iPhone

1. Nell'app Shopify tocca Negozio.
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.

Android

1. Nell'app Shopify tocca Negozio.
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.

1. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica lingue.

2. Nel campo Filtra, inizia a digitare unavailable per trovare la traduzione di "Unavailable" (Non disponibile).

3. Sostituisci il testo Non disponibile con Make a selection.

4. Clicca su Salva.

Debut

Passaggi per Debut

Segui questi passaggi per applicare la personalizzazione a Debut:

Modifica il file JavaScript del tema

Per modificare il file JavaScript del tema:

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

2. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

iPhone

1. Nell'app Shopify tocca Negozio.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci temi.

4. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

Android

1. Nell'app Shopify tocca Negozio.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci temi.

4. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

1. Nella directory Risorse, clicca su theme.js o su theme.js.liquid.

2. 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;
}

with:

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

If you can't find the above code, then find the following code:

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

Replace it with:

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

1. Trova il codice this.currentVariant = variant;

this._updatePaymentButton(variant);

The result should look something like this:

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

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

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

with:

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;
}

Replace it with:

/* 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;
}

with:

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);
}

with:

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

> Note:
> This code only needs to be replaced in Debut version 17.5.0 and above.

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
    })
  );
},

Add the following code, on a new line, below the above code:

_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');
  }
},

It should look something like this:

_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 -%}

Replace it with:

{%- 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 %}

If you can't find the code above, then find this code and delete it:

{%- 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 -%}

Replace it with:

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

If you can't find the code above, then find this code:

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

Replace it with:

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

> Note:
> Some versions of Debut do not include the line of code to be replaced in this step. If you can't find the code, then skip to the next step.

1. Trova il codice seguente:

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

Replace it with:

{% 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 %}

Replace it with:

<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 %}

It should look something like this:

{% 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
-%}

Replace it with:

{%- 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
-%}

> Note:
> Some versions of Debut do not include the code to be replaced in this step. If you can't find the code, then skip to the next step.

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 sia effettuata una selezione.

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

iPhone

1. Nell'app Shopify tocca Negozio.
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.

Android

1. Nell'app Shopify tocca Negozio.
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.

1. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica lingue.

2. Nel campo Filtra, inizia a digitare unavailable per trovare la traduzione di "Unavailable" (Non disponibile).

3. Sostituisci il testo Non disponibile con Make a selection.

4. Clicca su Salva.

Minimal

Passaggi per Minimal

Segui questi passaggi per applicare la personalizzazione a Minimal:

Modifica il file JavaScript del tema

Per modificare il file JavaScript del tema:

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

2. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

iPhone

1. Nell'app Shopify tocca Negozio.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci temi.

4. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

Android

1. Nell'app Shopify tocca Negozio.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci temi.

4. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

1. Nella directory Risorse, clicca su theme.js o su theme.js.liquid.

2. 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();
}

Add the following code on a new line below:

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;
    }
  }
}

It should look something like this:

// 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 %}

Replace it with:

{% 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 %}

Replace with:

{% 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 %}

It should look something like this:

{% 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 sia effettuata una selezione.

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

iPhone

1. Nell'app Shopify tocca Negozio.
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.

Android

1. Nell'app Shopify tocca Negozio.
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.

1. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica lingue.

2. Nel campo Filtra, inizia a digitare unavailable per trovare la traduzione di "Unavailable" (Non disponibile).

3. Sostituisci il testo Non disponibile con Make a selection.

4. Clicca su Salva.

Narrative

Passaggi per Narrative

Segui questi passaggi per applicare la personalizzazione a Narrative:

Modifica il file JavaScript del tema

Per modificare il file JavaScript del tema:

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

2. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

iPhone

1. Nell'app Shopify tocca Negozio.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci temi.

4. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

Android

1. Nell'app Shopify tocca Negozio.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci temi.

4. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

1. Nella directory Risorse, clicca su custom.js.

2. 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 -%}

Replace it with:

{%- 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 %}

It should look something like this:

{% 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 sia effettuata una selezione.

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

iPhone

1. Nell'app Shopify tocca Negozio.
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.

Android

1. Nell'app Shopify tocca Negozio.
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.

1. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica lingue.

2. Nel campo Filtra, inizia a digitare unavailable per trovare la traduzione di "Unavailable" (Non disponibile).

3. Sostituisci il testo Non disponibile con Make a selection.

4. Clicca su Salva.

Simple

Passaggi per Simple

Segui questi passaggi per applicare la personalizzazione a Simple:

Modifica il file JavaScript del tema

Per modificare il file JavaScript del tema:

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

2. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

iPhone

1. Nell'app Shopify tocca Negozio.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci temi.

4. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

Android

1. Nell'app Shopify tocca Negozio.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci temi.

4. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

1. Nella directory Risorse, clicca su theme.js o su theme.js.liquid.

2. 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);

Add the following code on a new line below:

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;
    }
  }
}

It should look something like this:

// 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 %}

Replace it with:

{% 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 %}

It should look something like this:

{% 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 sia effettuata una selezione.

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

iPhone

1. Nell'app Shopify tocca Negozio.
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.

Android

1. Nell'app Shopify tocca Negozio.
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.

1. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica lingue.

2. Nel campo Filtra, inizia a digitare unavailable per trovare la traduzione di "Unavailable" (Non disponibile).

3. Sostituisci il testo Non disponibile con Make a selection.

4. Clicca su Salva.

Supply

Passaggi per Supply

Segui questi passaggi per applicare la personalizzazione a Supply:

Modifica il file JavaScript del tema

Per modificare il file JavaScript del tema:

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

2. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

iPhone

1. Nell'app Shopify tocca Negozio.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci temi.

4. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

Android

1. Nell'app Shopify tocca Negozio.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci temi.

4. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

1. Nella directory Risorse, clicca su theme.js o su theme.js.liquid.

2. 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);

Add the following code on a new line below:

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;
    }
  }
}

It should look something like this:

// 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 %}

Replace it with:

{% 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 %}

Replace it with:

{% 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 %}

It should look something like this:

{% 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 sia effettuata una selezione.

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

iPhone

1. Nell'app Shopify tocca Negozio.
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.

Android

1. Nell'app Shopify tocca Negozio.
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.

1. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica lingue.

2. Nel campo Filtra, inizia a digitare unavailable per trovare la traduzione di "Unavailable" (Non disponibile).

3. Sostituisci il testo Non disponibile con Make a selection.

4. Clicca su Salva.

Venture

Passaggi per Venture

Segui questi passaggi per applicare la personalizzazione a Venture:

Modifica il file JavaScript del tema

Per modificare il file JavaScript del tema:

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

2. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

iPhone

1. Nell'app Shopify tocca Negozio.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci temi.

4. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

Android

1. Nell'app Shopify tocca Negozio.

2. Nella sezione Canali di vendita, tocca Negozio online.

3. Tocca Gestisci temi.

4. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.

1. Nella directory Risorse, clicca su theme.js o su theme.js.liquid.

2. 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();

Replace it with:

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;
}

with:

/* 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 %}

Replace it with:

{% 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 %}

If you can't find the code above, then find this code and delete it:

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

1. Trova tutte le istanze di questo codice:

{% unless current_variant.available %}

Replace it with:

{% 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 %}

Replace it with:

{% 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 %}

It should look something like this:

{% 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 sia effettuata una selezione.

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

iPhone

1. Nell'app Shopify tocca Negozio.
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.

Android

1. Nell'app Shopify tocca Negozio.
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.

1. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica lingue.

2. Nel campo Filtra, inizia a digitare unavailable per trovare la traduzione di "Unavailable" (Non disponibile).

3. Sostituisci il testo Non disponibile con Make a selection.

4. Clicca su Salva.

Non-sectioned themes

Aggiunta di prompt ai menu a discesa delle varianti

Per aggiungere 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.

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>

or

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

Replace it with:

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

1. Trova e sostituisci il seguente codice:

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

Replace with:

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

### Other free Shopify themes
If you use any other Shopify theme, then find this code:

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign current_variant = product.selected_variant %}

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 sia effettuata una selezione.

Desktop

1. Dal pannello di controllo Shopify passa a Negozio online > Temi.

iPhone

1. Nell'app Shopify tocca Negozio.
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.

Android

1. Nell'app Shopify tocca Negozio.
2. Nella sezione Canali di vendita, tocca Negozio online.
3. Tocca Gestisci temi.

1. Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica lingue.

2. Nel campo Filtra, inizia a digitare unavailable per trovare la traduzione di "Unavailable" (Non disponibile).

3. Sostituisci il testo Non disponibile con Make a selection.

4. Clicca su Salva.