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

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 seguente riga di codice:

$(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');

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.

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 seguente codice:

   liquid {% assign current_variant = product.selected_or_first_available_variant %}

   Sostituiscilo con:

   liquid {% assign current_variant = product.selected_variant %}

3. Trova il codice seguente ed eliminalo:

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

4. Trova il codice {% schema %}. Incolla il codice seguente nella riga corrispondente riportata sopra:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Dovrebbe avere un aspetto simile a questo: ```liquid {% if current_variant == blank %} {% 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;
}

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.0 e successive.

1. Trova il seguente codice:

_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 seguente codice:

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

   Sostituiscilo con:

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

3. Trova il codice seguente ed eliminalo:

   liquid {% 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:

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

4. Trova il seguente codice:

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

   Sostituiscilo con:

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

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

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

   Sostituiscilo con:

   liquid {%- 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 seguente codice:

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

   Sostituiscilo con:

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

2. Trova il seguente codice:

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

   Sostituiscilo con:

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

3. Trova il codice {% schema %}. Incolla il codice seguente nella riga corrispondente riportata sopra:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Dovrebbe avere un aspetto simile a questo: ```liquid {% if current_variant == blank %} {% 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 seguente codice:

      liquid {%- 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</p><p>assign money_price = price | money -%}

      Sostituiscilo con:

      liquid {%- 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</p><p>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 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();
}

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 seguente codice:

   liquid {% assign variant = product.selected_or_first_available_variant %}

   Sostituiscilo con:

   liquid {% assign variant = product.selected_variant %}

3. Trova il codice seguente ed eliminalo:

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

4. Trova tutte le istanze di questo codice:

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

   Sostituisci con:

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

5. Trova il codice {% schema %}. Incolla il codice seguente nella riga corrispondente riportata sopra:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Dovrebbe avere un aspetto simile a questo: ```liquid {% if current_variant == blank %} {% 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 seguente codice:

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

   Sostituiscilo con:

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

3. Trova il codice {% schema %}. Incolla il codice seguente nella riga corrispondente riportata sopra:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Dovrebbe avere un aspetto simile a questo: ```liquid {% if current_variant == blank %} {% 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);

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 seguente codice:

   liquid {% assign current_variant = product.selected_or_first_available_variant %}

   Sostituiscilo con:

   liquid {% assign current_variant = product.selected_variant %}

3. Trova il codice seguente ed eliminalo:

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

4. Trova il codice {% schema %}. Incolla il codice seguente nella riga corrispondente riportata sopra:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Dovrebbe avere un aspetto simile a questo: ```liquid {% if current_variant == blank %} {% 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);

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 seguente codice:

   liquid {% assign variant = product.selected_or_first_available_variant %}

   Sostituiscilo con:

   liquid {% assign variant = product.selected_variant %}

3. Trova il codice seguente ed eliminalo:

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

4. Trova tutte le istanze di questo codice:

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

   Sostituiscilo con:

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

5. Trova il codice {% schema %}. Incolla il codice seguente nella riga corrispondente riportata sopra:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Dovrebbe avere un aspetto simile a questo: ```liquid {% if current_variant == blank %} {% 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 seguente codice:

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 seguente codice:

   liquid {% assign current_variant = product.selected_or_first_available_variant %}

   Sostituiscilo con:

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

3. Trova il codice seguente ed eliminalo:

   liquid {% 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:

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

4. Trova tutte le istanze di questo codice:

   liquid {% unless current_variant.available %}

   Sostituiscilo con:

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

5. Trova il seguente codice:

   liquid {% 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:

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

6. Trova il codice {% schema %}. Incolla il codice seguente nella riga corrispondente riportata sopra:

   ```liquid {% if current_variant == blank %} {% endif %} ``` Dovrebbe avere un aspetto simile a questo: ```liquid {% if current_variant == blank %} {% 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 seguente codice:

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

   

7. Clicca su Salva.

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

1. Trova questo codice nel modulo:

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

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

   Sostituiscilo con:

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

2. Trova e sostituisci il seguente codice:

Minimal, Pop o Supply

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

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

Sostituisci con:

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

Altri temi Shopify gratuiti

Se utilizzi un altro tema Shopify, trova questo codice:

liquid {% assign current_variant = product.selected_or_first_available_variant %}

Sostituiscilo con:

liquid {% 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.