Få kunder att välja ett alternativ

Den här sidan skrevs ut den Jan 19, 2022. Besök https://help.shopify.com/sv/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-pick-an-option för den aktuella versionen.

När en kund besöker en produktsida i din webbutik väljs den första tillgängliga varianten som standard. Du kan använda denna anpassning för att inaktivera automatiskt val av den första tillgängliga varianten. På så sätt kommer kunden att uppmanas att välja en variant manuellt innan en visas. )

Obs! Eftersom denna anpassning förhindrar att en variant väljs som standard kanske ditt tema inte visar ett produktpris förrän kunden har valt en variant. Detta är förväntat beteende, eftersom produkter med varianter inte har ett angivet pris. Vilket pris som visas bestäms av den variant som har valts.

Avsnitt och icke-sektionerade teman

Obs! Stegen i den här handledningen varierar beroende på om du använder ett tema med avsnitt eller ett tema utan avsnitt. Med ett tema med avsnitt kan du dra och släppa för att arrangera layouten på din startsida, men inte med ett tema utan avsnitt.

Gå till temasidan Redigera kod för att ta reda på om ditt tema stöder avsnitt. Om det finns filer i Avsnittskatalogen använder du ett avgränsat tema. Icke-sektionerade teman släpptes före oktober 2016 och har inga filer i Avsnittskatalogen.

Om du använder ett avgränsat tema klickar du på knappen Avgränsade teman-knapp och följer anvisningarna. Om du använder ett äldre, icke-avsnittsbaserat tema klickar du på knappen Icke-avgränsade teman och följer anvisningarna.

Välj ditt tema

Stegen för denna anpassning varierar beroende på ditt tema. Klicka på knappen för ditt tema innan du följer anvisningarna nedan:

Steg för Boundless

Följ dessa steg för att tillämpa anpassningen till Boundless:

Redigera ditt temas JavaScript-fil

För att redigera ditt temas JavaScript-fil:

Från din Shopify-admin går du till Webbutik > Teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Från Shopify-appen klickar du på Butik.
Tryck på Webbutik i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Från Shopify-appen klickar du på Butik.
Tryck på Webbutik i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Klicka på theme.js eller theme.js.liquid i registret Tillgångar.
Hitta efter koden initVariantSelectors. Under den letar du efter följande kod:

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

Lägg till följande kod på en ny rad under:

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

Den ska se ut ungefär så här:

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

Hitta följande kodrad:

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

Det finns två instanser i den här koden, båda finns i productVariantCallback-funktionen. Ersätt endast den andra instansen med:

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

Obs! Vissa versioner av Boundless inkluderar inte den kod som ska ersättas i det här steget. Om du inte hittar koden går du vidare till nästa steg.

Klicka på Spara.

Redigera produktsidemallen

Redigera din produktsidemall

Klicka på product-template.liquid i registret Avsnitt.
Hitta följande kod:

liquid {% assign current_variant = product.selected_or_first_available_variant %}

Ersätt den med:

liquid {% assign current_variant = product.selected_variant %}
Hitta följande kod och radera den:

liquid {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Hitta koden {% schema %}. Klistra in följande kod på sin egen rad ovanför den:

```liquid {% if current_variant == blank %} {% endif %}``` Den ska se ut ungefär så här: ```liquid {% if current_variant == blank %} {% endif %}

{% schema %} ```
1. Klicka på Spara.
Ändra språkinställningar för "Lägg till i varukorgen"

Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
- Dator
- iPhone
- Android
1. Från din Shopify-admin går du till Webbutik > Teman.
1. Från Shopify-appen klickar du på Butik.
2. Tryck på Webbutik i avsnittet Försäljningskanaler.
3. Tryck på Hantera teman.
1. Från Shopify-appen klickar du på Butik.
2. Tryck på Webbutik i avsnittet Försäljningskanaler.
3. Tryck på Hantera teman.
1. Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera språk.
2. I rutan Filter börjar du skriva in unavailable för att visa översättningen "Ej tillgänglig".
3. Ersätt texten Ej tillgänglig med Make a selection.
4. Klicka på Spara.

Steg för Debut

Följ dessa steg för att tillämpa anpassningen för Debut:

Redigera ditt temas JavaScript-fil

För att redigera ditt temas JavaScript-fil:

Från din Shopify-admin går du till Webbutik > Teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Från Shopify-appen klickar du på Butik.
Tryck på Webbutik i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Från Shopify-appen klickar du på Butik.
Tryck på Webbutik i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Klicka på theme.js eller theme.js.liquid i registret Tillgångar.
Lägg till följande kod längst ner i filen:

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

Hitta koden _updatePrice: function(variant). Byt ut följande kod:

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

mot:

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

Leta efter följande kod om du inte hittar ovanstående kod:

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

Ersätt den med:

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

Hitta koden this.currentVariant = variant;

Lägg till följande kod under:

this._updatePaymentButton(variant);

Resultatet ska se ut ungefär så här:

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

Hitta koden _updateImages: function(variant). Byt ut följande kod:

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

mot:

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

Hitta följande kod precis under:

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

Ersätt den med:

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

Hitta koden _updateSKU: function(variant). Byt ut följande kod:

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

mot:

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

Hitta koden _initVariants: function() {. Byt ut följande kod:

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

mot:

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

Obs! Denna kod behöver endast ersättas i Debut version 17.5.0 och högre.

Hitta följande kod:

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

Lägg till följande kod, på en ny rad, under ovanstående kod:

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

Den ska se ut ungefär så här:

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

Klicka på Spara.

Redigera produktsidemallen

Redigera din produktsidemall

Klicka på product-template.liquid i registret Avsnitt.
Hitta följande kod:

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

Ersätt den med:

liquid {%- if product.variants.size > 1 -%} {%- assign current_variant = product.selected_variant -%} {%- else %} {%- assign current_variant = product.first_available_variant -%} {%- endif %}
Hitta följande kod och radera den:

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

Om du inte hittar ovanstående kod kan du leta efter den här koden och radera den:

liquid {%- if variant == current_variant %} selected="selected" {%- endif -%}
Hitta följande kod:

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

Ersätt den med:

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

Leta efter den här koden om du inte hittar ovanstående kod:

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

Ersätt den med:

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

Obs! Vissa versioner av Debut innehåller inte den kod som ska ersättas i det här steget. Om du inte hittar koden går du vidare till nästa steg.

Hitta följande kod:

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

Ersätt den med:

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 %}
Hitta följande kod:

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

Ersätt den med:

liquid <div class="payment-button {% if current_variant == blank %}visually-hidden {% endif %}"> {% if section.settings.enable_payment_button %} {{ form | payment_button }} {% endif %} </div>
Hitta koden {% schema %}. Klistra in följande kod på sin egen rad ovanför den:

```liquid {% if current_variant == blank %} {% endif %}``` Den ska se ut ungefär så här: ```liquid {% if current_variant == blank %} {% endif %}

{% schema %} ```
1. Klicka på Spara.
Redigera din produkts prisfragment

För att redigera din produkts prisfragment:
1. Klicka på product-price.liquid i katalogen Fragment.
2. Hitta följande kod:
  
  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 -%}}
  
  Ersätt den med:
  
  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 -%}}
Obs! Vissa versioner av Debut innehåller inte den kod som ska ersättas i det här steget. Om du inte hittar koden går du vidare till nästa steg.

Ändra språkinställningar för "Lägg till i varukorgen"

Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
- Dator
- iPhone
- Android
1. Från din Shopify-admin går du till Webbutik > Teman.
1. Från Shopify-appen klickar du på Butik.
2. Tryck på Webbutik i avsnittet Försäljningskanaler.
3. Tryck på Hantera teman.
1. Från Shopify-appen klickar du på Butik.
2. Tryck på Webbutik i avsnittet Försäljningskanaler.
3. Tryck på Hantera teman.
1. Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera språk.
2. I rutan Filter börjar du skriva in unavailable för att visa översättningen "Ej tillgänglig".
3. Ersätt texten Ej tillgänglig med Make a selection.
4. Klicka på Spara.

Steg för Minimal

Följ dessa steg för att tillämpa anpassningen till Minimal:

Redigera ditt temas JavaScript-fil

För att redigera ditt temas JavaScript-fil:

Från din Shopify-admin går du till Webbutik > Teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Från Shopify-appen klickar du på Butik.
Tryck på Webbutik i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Från Shopify-appen klickar du på Butik.
Tryck på Webbutik i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Klicka på theme.js eller theme.js.liquid i registret Tillgångar.
Hitta efter koden initProductVariant: function() {. Under den letar du efter följande kod:

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

Lägg till följande kod på en ny rad under:

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

Den ska se ut ungefär så här:

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

Klicka på Spara.

Redigera din produktsidemall

Klicka på product-template.liquid i registret Avsnitt.
Hitta följande kod:

liquid {% assign variant = product.selected_or_first_available_variant %}

Ersätt den med:

liquid {% assign variant = product.selected_variant %}
Hitta följande kod och radera den:

liquid {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Hitta alla förekomster av denna kod:

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

Ersätt med:

liquid {% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
Hitta koden {% schema %}. Klistra in följande kod på sin egen rad ovanför den:

```liquid {% if current_variant == blank %} {% endif %}``` Den ska se ut ungefär så här: ```liquid {% if current_variant == blank %} {% endif %}

{% schema %} ```
1. Klicka på Spara.
Ändra språkinställningar för "Lägg till i varukorgen"

Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
- Dator
- iPhone
- Android
1. Från din Shopify-admin går du till Webbutik > Teman.
1. Från Shopify-appen klickar du på Butik.
2. Tryck på Webbutik i avsnittet Försäljningskanaler.
3. Tryck på Hantera teman.
1. Från Shopify-appen klickar du på Butik.
2. Tryck på Webbutik i avsnittet Försäljningskanaler.
3. Tryck på Hantera teman.
1. Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera språk.
2. I rutan Filter börjar du skriva in unavailable för att visa översättningen "Ej tillgänglig".
3. Ersätt texten Ej tillgänglig med Make a selection.
4. Klicka på Spara.

Steg för Narrative

Följ dessa steg för att tillämpa anpassningen till Narrative:

Redigera ditt temas JavaScript-fil

För att redigera ditt temas JavaScript-fil:

Från din Shopify-admin går du till Webbutik > Teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Från Shopify-appen klickar du på Butik.
Tryck på Webbutik i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Från Shopify-appen klickar du på Butik.
Tryck på Webbutik i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Klicka på custom.js i registret Tillgångar.
Lägg till följande kod längst ner i filen:

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

Klicka på Spara.

Redigera produktsidemallen

Redigera din produktsidemall

Klicka på product-template.liquid i registret Avsnitt.
Hitta följande kod:

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

Ersätt den med:

liquid {%- if product.variants.size > 1 -%} {%- assign current_variant = product.selected_variant -%} {%- else -%} {%- assign current_variant = product.first_available_variant -%} {%- endif -%}
Hitta koden {% schema %}. Klistra in följande kod på sin egen rad ovanför den:

```liquid {% if current_variant == blank %} {% endif %}``` Den ska se ut ungefär så här: ```liquid {% if current_variant == blank %} {% endif %}

{% schema %} ```
1. Klicka på Spara.
Ändra språkinställningar för "Lägg till i varukorgen"

Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
- Dator
- iPhone
- Android
1. Från din Shopify-admin går du till Webbutik > Teman.
1. Från Shopify-appen klickar du på Butik.
2. Tryck på Webbutik i avsnittet Försäljningskanaler.
3. Tryck på Hantera teman.
1. Från Shopify-appen klickar du på Butik.
2. Tryck på Webbutik i avsnittet Försäljningskanaler.
3. Tryck på Hantera teman.
1. Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera språk.
2. I rutan Filter börjar du skriva in unavailable för att visa översättningen "Ej tillgänglig".
3. Ersätt texten Ej tillgänglig med Make a selection.
4. Klicka på Spara.

Steg för Simple

Följ dessa steg för att tillämpa anpassningen till Simple:

Redigera ditt temas JavaScript-fil

För att redigera ditt temas JavaScript-fil:

Från din Shopify-admin går du till Webbutik > Teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Från Shopify-appen klickar du på Butik.
Tryck på Webbutik i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Från Shopify-appen klickar du på Butik.
Tryck på Webbutik i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Klicka på theme.js eller theme.js.liquid i registret Tillgångar.
Hitta efter koden initProductVariant: function() {. Under den letar du efter följande kod:

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

Lägg till följande kod på en ny rad under:

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

Den ska se ut ungefär så här:

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

Klicka på Spara.

Redigera produktsidemallen

Redigera din produktsidemall

Klicka på product-template.liquid i registret Avsnitt.
Hitta följande kod:

liquid {% assign current_variant = product.selected_or_first_available_variant %}

Ersätt den med:

liquid {% assign current_variant = product.selected_variant %}
Hitta följande kod och radera den:

liquid {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Hitta koden {% schema %}. Klistra in följande kod på sin egen rad ovanför den:

```liquid {% if current_variant == blank %} {% endif %}``` Den ska se ut ungefär så här: ```liquid {% if current_variant == blank %} {% endif %}

{% schema %} ```
1. Klicka på Spara.
Ändra språkinställningar för "Lägg till i varukorgen"

Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
- Dator
- iPhone
- Android
1. Från din Shopify-admin går du till Webbutik > Teman.
1. Från Shopify-appen klickar du på Butik.
2. Tryck på Webbutik i avsnittet Försäljningskanaler.
3. Tryck på Hantera teman.
1. Från Shopify-appen klickar du på Butik.
2. Tryck på Webbutik i avsnittet Försäljningskanaler.
3. Tryck på Hantera teman.
1. Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera språk.
2. I rutan Filter börjar du skriva in unavailable för att visa översättningen "Ej tillgänglig".
3. Ersätt texten Ej tillgänglig med Make a selection.
4. Klicka på Spara.

Steg för Supply

Följ dessa steg för att tillämpa anpassningen till Supply:

Redigera ditt temas JavaScript-fil

För att redigera ditt temas JavaScript-fil:

Från din Shopify-admin går du till Webbutik > Teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Från Shopify-appen klickar du på Butik.
Tryck på Webbutik i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Från Shopify-appen klickar du på Butik.
Tryck på Webbutik i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Klicka på theme.js eller theme.js.liquid i registret Tillgångar.
Hitta efter koden initProductVariant: function() {. Under den letar du efter följande kod:

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

Lägg till följande kod på en ny rad under:

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

Den ska se ut ungefär så här:

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

Klicka på Spara.

Redigera produktsidemallen

Redigera din produktsidemall

Klicka på product-template.liquid i registret Avsnitt.
Hitta följande kod:

liquid {% assign variant = product.selected_or_first_available_variant %}

Ersätt den med:

liquid {% assign variant = product.selected_variant %}
Hitta följande kod och radera den:

liquid {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Hitta alla förekomster av denna kod:

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

Ersätt den med:

liquid {% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
Hitta koden {% schema %}. Klistra in följande kod på sin egen rad ovanför den:

```liquid {% if current_variant == blank %} {% endif %}``` Den ska se ut ungefär så här: ```liquid {% if current_variant == blank %} {% endif %}

{% schema %} ```
1. Klicka på Spara.
Ändra språkinställningar för "Lägg till i varukorgen"

Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
- Dator
- iPhone
- Android
1. Från din Shopify-admin går du till Webbutik > Teman.
1. Från Shopify-appen klickar du på Butik.
2. Tryck på Webbutik i avsnittet Försäljningskanaler.
3. Tryck på Hantera teman.
1. Från Shopify-appen klickar du på Butik.
2. Tryck på Webbutik i avsnittet Försäljningskanaler.
3. Tryck på Hantera teman.
1. Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera språk.
2. I rutan Filter börjar du skriva in unavailable för att visa översättningen "Ej tillgänglig".
3. Ersätt texten Ej tillgänglig med Make a selection.
4. Klicka på Spara.

Steg för Venture

Följ dessa steg för att tillämpa anpassningen till Venture:

Redigera ditt temas JavaScript-fil

För att redigera ditt temas JavaScript-fil:

Från din Shopify-admin går du till Webbutik > Teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Från Shopify-appen klickar du på Butik.
Tryck på Webbutik i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Från Shopify-appen klickar du på Butik.
Tryck på Webbutik i avsnittet Försäljningskanaler.
Tryck på Hantera teman.
Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.

Klicka på theme.js eller theme.js.liquid i registret Tillgångar.
Lägg till följande kod längst ner i filen:

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

Hitta följande kod:

this.currentVariant = this._getVariantFromOptions();

Ersätt den med:

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

Hitta koden _updatePrice: function(variant). Byt ut följande kod:

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

mot:

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

Klicka på Spara.

Redigera produktsidemallen

Redigera din produktsidemall

Klicka på product-template.liquid i registret Avsnitt.
Hitta följande kod:

liquid {% assign current_variant = product.selected_or_first_available_variant %}

Ersätt den med:

liquid {% if product.variants.size > 1 %} {% assign current_variant = product.selected_variant %} {% else %} {% assign current_variant = product.first_available_variant %} {% endif %}
Hitta följande kod och radera den:

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

Om du inte hittar ovanstående kod kan du leta efter den här koden och radera den:

liquid {% if variant == current_variant %} selected="selected" {% endif %}
Hitta alla förekomster av denna kod:

liquid {% unless current_variant.available %}

Ersätt den med:

liquid {% unless current_variant.available or product.variants.size == 1 and variant.available %}
Hitta följande kod:

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

Ersätt den med:

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 %}
Hitta koden {% schema %}. Klistra in följande kod på sin egen rad ovanför den:

```liquid {% if current_variant == blank %} {% endif %}``` Den ska se ut ungefär så här: ```liquid {% if current_variant == blank %} {% endif %}

{% schema %} ```
1. Klicka på Spara.
Ändra språkinställningar för "Lägg till i varukorgen"

Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.
- Dator
- iPhone
- Android
1. Från din Shopify-admin går du till Webbutik > Teman.
1. Från Shopify-appen klickar du på Butik.
2. Tryck på Webbutik i avsnittet Försäljningskanaler.
3. Tryck på Hantera teman.
1. Från Shopify-appen klickar du på Butik.
2. Tryck på Webbutik i avsnittet Försäljningskanaler.
3. Tryck på Hantera teman.
1. Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera språk.
2. I rutan Filter börjar du skriva in unavailable för att visa översättningen "Ej tillgänglig".
3. Ersätt texten Ej tillgänglig med Make a selection.
4. Klicka på Spara.

Lägg till prompter till dina varianters rullgardinsmenyer

Så här lägger du till prompter till dina varianters rullgardinsmenyer:

Klicka på Lägg till en ny snippet i katalogen Snippets.
Döp ditt nya fragment till pick-an-option.
Klistra in den här koden i GitHub i din nya snippet.
Klicka på Spara.
Klicka på theme.liquid i Layout-registret
Hitta sluttaggen </body> nära slutet av filen. På en ny rad, precis ovanför sluttaggen </body>, klistrar du in följande kod:

liquid {% render 'pick-an-option' %}
Klicka på Spara.
Hitta den fil som innehåller formuläret "Lägg till i varukorgen". Den kommer att ha ett action attribut som är inställd till /cart/add.

Den bör finnas i en av dessa fyra filer:

- product.liquid mallen under Mallar - theme.liquid layouten under Layout - product.liquid snippeten under Snippets - single-product.liquid snippeten under Snippets

Hitta den här koden i formuläret:

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>

eller

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

Ersätt den med:

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>
Hitta och ersätt följande kod:

Minimal, Pop eller Supply

Om du använder Minimal, Pop eller Supply, hitta alla förekomster av denna kod:

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

Ersätt med:

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

Andra Shopify-gratisteman

Om du använder något annat Shopify-tema, hitta den här koden:

liquid {% assign current_variant = product.selected_or_first_available_variant %}

Ersätt den med:

liquid {% assign current_variant = product.selected_variant %}

Klicka på Spara.

Ändra språkinställningar för "Lägg till i varukorgen"

Du kan ändra språkinställningarna för knappen "Lägg till i varukorgen" så att produkterna inte visas som "Ej-tillgängliga" innan ett val görs.

Från din Shopify-admin går du till Webbutik > Teman.

Från Shopify-appen klickar du på Butik.
Tryck på Webbutik i avsnittet Försäljningskanaler.
Tryck på Hantera teman.

Från Shopify-appen klickar du på Butik.
Tryck på Webbutik i avsnittet Försäljningskanaler.
Tryck på Hantera teman.

Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera språk.
I rutan Filter börjar du skriva in unavailable för att visa översättningen "Ej tillgänglig".
Ersätt texten Ej tillgänglig med Make a selection.
Klicka på Spara.

Få kunder att välja ett alternativ

Avsnitt och icke-sektionerade teman

Välj ditt tema

Steg för Boundless

Redigera ditt temas JavaScript-fil

Redigera produktsidemallen

Ändra språkinställningar för "Lägg till i varukorgen"

Steg för Debut

Redigera ditt temas JavaScript-fil

Redigera produktsidemallen

Redigera din produkts prisfragment

Ändra språkinställningar för "Lägg till i varukorgen"

Steg för Minimal

Redigera ditt temas JavaScript-fil

Redigera din produktsidemall

Ändra språkinställningar för "Lägg till i varukorgen"

Steg för Narrative

Redigera ditt temas JavaScript-fil

Redigera produktsidemallen

Ändra språkinställningar för "Lägg till i varukorgen"

Steg för Simple

Redigera ditt temas JavaScript-fil

Redigera produktsidemallen

Ändra språkinställningar för "Lägg till i varukorgen"

Steg för Supply

Redigera ditt temas JavaScript-fil

Redigera produktsidemallen

Ändra språkinställningar för "Lägg till i varukorgen"

Steg för Venture

Redigera ditt temas JavaScript-fil

Redigera produktsidemallen

Ändra språkinställningar för "Lägg till i varukorgen"

Lägg till prompter till dina varianters rullgardinsmenyer

Minimal, Pop eller Supply

Andra Shopify-gratisteman

Ändra språkinställningar för "Lägg till i varukorgen"

Är du redo att börja sälja med Shopify?