Zachęć klientów do wyboru opcji

Uwaga

Jeśli używasz darmowego szablonu Shopify, możesz skontaktować się z pomocą techniczną Shopify, aby uzyskać pomoc w zakresie tego tutoriala. Wymaga to 15 minut czasu projektowania. Aby dowiedzieć się więcej, zapoznaj się z tematem Pomoc techniczna w zakresie szablonów.

Uwaga

To dostosowanie jest przeznaczone dla klasycznych szablonów Shopify i nie ma zastosowania do szablonów Online Store 2.0.

• Dowiedz się, jaka jest wersja architektury Twojego szablonu
• Przeglądaj dostosowania szablonu Online Store 2.0

Gdy klient odwiedza stronę produktu w sklepie online, domyślnie wybierany jest pierwszy dostępny wariant. Możesz użyć tego dostosowania, aby wyłączyć automatyczne wybieranie pierwszego dostępnego wariantu. Wówczas klient zostanie poproszony o ręczne wybranie wariantu przed jego pokazaniem. )

Uwaga

Ze względu na to, że to dostosowanie uniemożliwia domyślne wybranie wariantu, Twój szablon może nie pokazywać ceny produktu, dopóki klient nie wybierze wariantu. Jest to oczekiwane zachowanie, ponieważ dla produktów z wariantami nie jest prezentowana cena. Wyświetlana cena jest ustalana na podstawie wybranego wariantu.

Szablony z sekcjami i bez sekcji

Uwaga

Kroki tego tutoriala różnią się w zależności od tego, czy używasz szablonu z sekcjami czy bez sekcji. Szablon z sekcjami umożliwia przeciąganie i upuszczanie elementów w celu zmiany układu strony głównej, nie jest to możliwe w przypadku szablonu bez sekcji.

Aby ustalić, czy Twój szablon obsługuje sekcje, przejdź do strony Edytuj kod. Jeśli w katalogu Sekcje są pliki, używasz szablonu z sekcjami. Szablony bez sekcji zostały zatwierdzone przed październikiem 2016 roku i nie zawierają plików w katalogu*Sekcje*.

Jeśli używasz szablonu z sekcjami, kliknij przycisk Szablony z sekcjami i zastosuj się do instrukcji. Jeśli używasz starszego szablonu, niezawierającego sekcji, kliknij przycisk Szablony bez sekcji i zastosuj się do instrukcji.

Sectioned themes

Wybierz swój szablon

Kroki dla tego dostosowania różnią się w zależności od szablonu. Kliknij przycisk dla szablonu, zanim wykonasz poniższe instrukcje:

Boundless

Kroki dla szablonu Boundless

Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Boundless:

Edytuj plik JavaScript swojego szablonu

Aby wyedytować plik JavaScript swojego szablonu:

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.

2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

iPhone

1. W aplikacji Shopify naciśnij Sklep.

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj szablonami.

4. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

Android

1. W aplikacji Shopify naciśnij Sklep.

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj szablonami.

4. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

1. W katalogu Zasoby kliknij theme.js lub theme.js.liquid.

2. Znajdź kod initVariantSelectors. Poniżej wyszukaj następujący kod:

// 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. Znajdź następującą linię kodu:

$(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. Kliknij opcję Zapisz.

Edytuj szablon strony produktu

Aby edytować szablon strony produktu:

1. W katalogu Sekcje kliknij product-template.liquid.

2. Znajdź następujący kod:

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign current_variant = product.selected_variant %}

1. Znajdź następujący kod i usuń go:

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

1. Znajdź kod {% schema %}. Wklej nad nim następujący kod w oddzielnej linii:

{% 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. Kliknij opcję Zapisz.

Zmień ustawienia języka przycisku Dodaj do koszyka

Możesz zmienić ustawienia języka przycisku Dodaj do koszyka, aby produkty nie były wyświetlane jako „Niedostępne” przed dokonaniem wyboru.

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.

iPhone

1. W aplikacji Shopify naciśnij opcję Sklep.
2. W sekcji Kanały sprzedaży naciśnij opcję Sklep online.
3. Naciśnij opcję Zarządzaj szablonami.

Android

1. W aplikacji Shopify naciśnij opcję Sklep.
2. W sekcji Kanały sprzedaży naciśnij opcję Sklep online.
3. Naciśnij opcję Zarządzaj szablonami.

1. Znajdź szablon, który chcesz edytować, a następnie kliknij opcję Czynności > Edytuj domyślną zawartość szablonu.

2. W polu Filtruj zacznij wpisywać unavailable, aby wyświetlić tłumaczenie „Niedostępne”.

3. Zastąp tekst Niedostępny wyrażeniem Make a selection.

4. Kliknij opcję Zapisz.

Debut

Kroki dla szablonu Debut

Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Debut:

Edytuj plik JavaScript swojego szablonu

Aby wyedytować plik JavaScript swojego szablonu:

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.

2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

iPhone

1. W aplikacji Shopify naciśnij Sklep.

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj szablonami.

4. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

Android

1. W aplikacji Shopify naciśnij Sklep.

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj szablonami.

4. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

1. W katalogu Zasoby kliknij theme.js lub theme.js.liquid.

2. Dodaj następujący kod na dole pliku:

(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. Znajdź kod _updatePrice: function(variant). Zastąp następujący kod:

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. Znajdź kod this.currentVariant = variant;

this._updatePaymentButton(variant);

The result should look something like this:

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

1. Znajdź kod _updateImages: function(variant). Zastąp następujący kod:

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

with:

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

1. Poniżej znajdź następujący kod:

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

Replace it with:

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

1. Znajdź kod _updateSKU: function(variant). Zastąp następujący kod:

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

with:

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

1. Znajdź kod _initVariants: function() {. Zastąp następujący kod:

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. Znajdź następujący 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
    })
  );
},

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. Kliknij opcję Zapisz.

Edytuj szablon strony produktu

Aby edytować szablon strony produktu:

1. W katalogu Sekcje kliknij product-template.liquid.

2. Znajdź następujący kod:

{%- 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. Znajdź następujący kod i usuń go:

{% 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. Znajdź następujący kod:

{%- 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. Znajdź następujący kod:

{% 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. Znajdź następujący kod:

{% 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. Znajdź kod {% schema %}. Wklej nad nim następujący kod w oddzielnej linii:

{% 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. Kliknij opcję Zapisz.

Edytuj fragment kodu ceny produktu

Aby wyedytować fragment kodu ceny produktu:

1. W katalogu Fragmenty kliknij product-price.liquid.

2. Znajdź następujący kod:

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

Zmień ustawienia języka przycisku Dodaj do koszyka

Możesz zmienić ustawienia języka przycisku Dodaj do koszyka, aby produkty nie były wyświetlane jako „Niedostępne” przed dokonaniem wyboru.

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.

iPhone

1. W aplikacji Shopify naciśnij opcję Sklep.
2. W sekcji Kanały sprzedaży naciśnij opcję Sklep online.
3. Naciśnij opcję Zarządzaj szablonami.

Android

1. W aplikacji Shopify naciśnij opcję Sklep.
2. W sekcji Kanały sprzedaży naciśnij opcję Sklep online.
3. Naciśnij opcję Zarządzaj szablonami.

1. Znajdź szablon, który chcesz edytować, a następnie kliknij opcję Czynności > Edytuj domyślną zawartość szablonu.

2. W polu Filtruj zacznij wpisywać unavailable, aby wyświetlić tłumaczenie „Niedostępne”.

3. Zastąp tekst Niedostępny wyrażeniem Make a selection.

4. Kliknij opcję Zapisz.

Minimal

Kroki dla szablonu Minimal

Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Minimal:

Edytuj plik JavaScript swojego szablonu

Aby wyedytować plik JavaScript swojego szablonu:

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.

2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

iPhone

1. W aplikacji Shopify naciśnij Sklep.

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj szablonami.

4. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

Android

1. W aplikacji Shopify naciśnij Sklep.

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj szablonami.

4. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

1. W katalogu Zasoby kliknij theme.js lub theme.js.liquid.

2. Znajdź kod initProductVariant: function() {. Poniżej wyszukaj następujący 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();
}

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. Kliknij opcję Zapisz.

Edytuj szablon strony produktu:

Aby edytować szablon strony produktu:

1. W katalogu Sekcje kliknij product-template.liquid.

2. Znajdź następujący kod:

{% assign variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign variant = product.selected_variant %}

1. Znajdź następujący kod i usuń go:

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

1. Znajdź wszystkie wystąpienia tego kodu:

{% 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. Znajdź kod {% schema %}. Wklej nad nim następujący kod w oddzielnej linii:

{% 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. Kliknij opcję Zapisz.

Zmień ustawienia języka przycisku Dodaj do koszyka

Możesz zmienić ustawienia języka przycisku Dodaj do koszyka, aby produkty nie były wyświetlane jako „Niedostępne” przed dokonaniem wyboru.

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.

iPhone

1. W aplikacji Shopify naciśnij opcję Sklep.
2. W sekcji Kanały sprzedaży naciśnij opcję Sklep online.
3. Naciśnij opcję Zarządzaj szablonami.

Android

1. W aplikacji Shopify naciśnij opcję Sklep.
2. W sekcji Kanały sprzedaży naciśnij opcję Sklep online.
3. Naciśnij opcję Zarządzaj szablonami.

1. Znajdź szablon, który chcesz edytować, a następnie kliknij opcję Czynności > Edytuj domyślną zawartość szablonu.

2. W polu Filtruj zacznij wpisywać unavailable, aby wyświetlić tłumaczenie „Niedostępne”.

3. Zastąp tekst Niedostępny wyrażeniem Make a selection.

4. Kliknij opcję Zapisz.

Narrative

Kroki dla szablonu Narrative

Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Narrative:

Edytuj plik JavaScript swojego szablonu

Aby wyedytować plik JavaScript swojego szablonu:

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.

2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

iPhone

1. W aplikacji Shopify naciśnij Sklep.

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj szablonami.

4. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

Android

1. W aplikacji Shopify naciśnij Sklep.

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj szablonami.

4. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

1. W katalogu Zasoby kliknij custom.js.

2. Dodaj następujący kod na dole pliku:

(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. Kliknij opcję Zapisz.

Edytuj szablon strony produktu

Aby edytować szablon strony produktu:

1. W katalogu Sekcje kliknij product-template.liquid.

2. Znajdź następujący kod:

{%- 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. Znajdź kod {% schema %}. Wklej nad nim następujący kod w oddzielnej linii:

{% 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. Kliknij opcję Zapisz.

Zmień ustawienia języka przycisku Dodaj do koszyka

Możesz zmienić ustawienia języka przycisku Dodaj do koszyka, aby produkty nie były wyświetlane jako „Niedostępne” przed dokonaniem wyboru.

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.

iPhone

1. W aplikacji Shopify naciśnij opcję Sklep.
2. W sekcji Kanały sprzedaży naciśnij opcję Sklep online.
3. Naciśnij opcję Zarządzaj szablonami.

Android

1. W aplikacji Shopify naciśnij opcję Sklep.
2. W sekcji Kanały sprzedaży naciśnij opcję Sklep online.
3. Naciśnij opcję Zarządzaj szablonami.

1. Znajdź szablon, który chcesz edytować, a następnie kliknij opcję Czynności > Edytuj domyślną zawartość szablonu.

2. W polu Filtruj zacznij wpisywać unavailable, aby wyświetlić tłumaczenie „Niedostępne”.

3. Zastąp tekst Niedostępny wyrażeniem Make a selection.

4. Kliknij opcję Zapisz.

Simple

Kroki dla szablonu Simple

Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Simple:

Edytuj plik JavaScript swojego szablonu

Aby wyedytować plik JavaScript swojego szablonu:

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.

2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

iPhone

1. W aplikacji Shopify naciśnij Sklep.

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj szablonami.

4. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

Android

1. W aplikacji Shopify naciśnij Sklep.

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj szablonami.

4. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

1. W katalogu Zasoby kliknij theme.js lub theme.js.liquid.

2. Znajdź kod initProductVariant: function() {. Poniżej wyszukaj następujący kod:

// 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. Kliknij opcję Zapisz.

Edytuj szablon strony produktu

Aby edytować szablon strony produktu:

1. W katalogu Sekcje kliknij product-template.liquid.

2. Znajdź następujący kod:

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign current_variant = product.selected_variant %}

1. Znajdź następujący kod i usuń go:

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

1. Znajdź kod {% schema %}. Wklej nad nim następujący kod w oddzielnej linii:

{% 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. Kliknij opcję Zapisz.

Zmień ustawienia języka przycisku Dodaj do koszyka

Możesz zmienić ustawienia języka przycisku Dodaj do koszyka, aby produkty nie były wyświetlane jako „Niedostępne” przed dokonaniem wyboru.

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.

iPhone

1. W aplikacji Shopify naciśnij opcję Sklep.
2. W sekcji Kanały sprzedaży naciśnij opcję Sklep online.
3. Naciśnij opcję Zarządzaj szablonami.

Android

1. W aplikacji Shopify naciśnij opcję Sklep.
2. W sekcji Kanały sprzedaży naciśnij opcję Sklep online.
3. Naciśnij opcję Zarządzaj szablonami.

1. Znajdź szablon, który chcesz edytować, a następnie kliknij opcję Czynności > Edytuj domyślną zawartość szablonu.

2. W polu Filtruj zacznij wpisywać unavailable, aby wyświetlić tłumaczenie „Niedostępne”.

3. Zastąp tekst Niedostępny wyrażeniem Make a selection.

4. Kliknij opcję Zapisz.

Supply

Kroki dla szablonu Supply

Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Supply:

Edytuj plik JavaScript swojego szablonu

Aby wyedytować plik JavaScript swojego szablonu:

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.

2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

iPhone

1. W aplikacji Shopify naciśnij Sklep.

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj szablonami.

4. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

Android

1. W aplikacji Shopify naciśnij Sklep.

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj szablonami.

4. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

1. W katalogu Zasoby kliknij theme.js lub theme.js.liquid.

2. Znajdź kod initProductVariant: function() {. Poniżej wyszukaj następujący kod:

// 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. Kliknij opcję Zapisz.

Edytuj szablon strony produktu

Aby edytować szablon strony produktu:

1. W katalogu Sekcje kliknij product-template.liquid.

2. Znajdź następujący kod:

{% assign variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign variant = product.selected_variant %}

1. Znajdź następujący kod i usuń go:

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

1. Znajdź wszystkie wystąpienia tego kodu:

{% 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. Znajdź kod {% schema %}. Wklej nad nim następujący kod w oddzielnej linii:

{% 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. Kliknij opcję Zapisz.

Zmień ustawienia języka przycisku Dodaj do koszyka

Możesz zmienić ustawienia języka przycisku Dodaj do koszyka, aby produkty nie były wyświetlane jako „Niedostępne” przed dokonaniem wyboru.

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.

iPhone

1. W aplikacji Shopify naciśnij opcję Sklep.
2. W sekcji Kanały sprzedaży naciśnij opcję Sklep online.
3. Naciśnij opcję Zarządzaj szablonami.

Android

1. W aplikacji Shopify naciśnij opcję Sklep.
2. W sekcji Kanały sprzedaży naciśnij opcję Sklep online.
3. Naciśnij opcję Zarządzaj szablonami.

1. Znajdź szablon, który chcesz edytować, a następnie kliknij opcję Czynności > Edytuj domyślną zawartość szablonu.

2. W polu Filtruj zacznij wpisywać unavailable, aby wyświetlić tłumaczenie „Niedostępne”.

3. Zastąp tekst Niedostępny wyrażeniem Make a selection.

4. Kliknij opcję Zapisz.

Venture

Kroki dla szablonu Venture

Wykonaj następujące kroki, aby zastosować dostosowanie do szablonu Venture:

Edytuj plik JavaScript swojego szablonu

Aby wyedytować plik JavaScript swojego szablonu:

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.

2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

iPhone

1. W aplikacji Shopify naciśnij Sklep.

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj szablonami.

4. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

Android

1. W aplikacji Shopify naciśnij Sklep.

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj szablonami.

4. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

1. W katalogu Zasoby kliknij theme.js lub theme.js.liquid.

2. Dodaj następujący kod na dole pliku:

(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. Znajdź następujący kod:

this.currentVariant = this._getVariantFromOptions();

Replace it with:

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

1. Znajdź kod _updatePrice: function(variant). Zastąp następujący kod:

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. Kliknij opcję Zapisz.

Edytuj szablon strony produktu

Aby edytować szablon strony produktu:

1. W katalogu Sekcje kliknij product-template.liquid.

2. Znajdź następujący kod:

{% 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. Znajdź następujący kod i usuń go:

{% 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. Znajdź wszystkie wystąpienia tego kodu:

{% unless current_variant.available %}

Replace it with:

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

1. Znajdź następujący kod:

{% 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. Znajdź kod {% schema %}. Wklej nad nim następujący kod w oddzielnej linii:

{% 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. Kliknij opcję Zapisz.

Zmień ustawienia języka przycisku Dodaj do koszyka

Możesz zmienić ustawienia języka przycisku Dodaj do koszyka, aby produkty nie były wyświetlane jako „Niedostępne” przed dokonaniem wyboru.

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.

iPhone

1. W aplikacji Shopify naciśnij opcję Sklep.
2. W sekcji Kanały sprzedaży naciśnij opcję Sklep online.
3. Naciśnij opcję Zarządzaj szablonami.

Android

1. W aplikacji Shopify naciśnij opcję Sklep.
2. W sekcji Kanały sprzedaży naciśnij opcję Sklep online.
3. Naciśnij opcję Zarządzaj szablonami.

1. Znajdź szablon, który chcesz edytować, a następnie kliknij opcję Czynności > Edytuj domyślną zawartość szablonu.

2. W polu Filtruj zacznij wpisywać unavailable, aby wyświetlić tłumaczenie „Niedostępne”.

3. Zastąp tekst Niedostępny wyrażeniem Make a selection.

4. Kliknij opcję Zapisz.

Non-sectioned themes

Dodaj monity do menu rozwijanych wariantów

Aby dodać monity do rozwijanych menu wariantów:

1. W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu.

2. Nadaj nazwę nowemu fragmentowi kodu pick-an-option.

3. W swoim nowym pliku fragmentu kodu wklej ten kod hostowany na GitHub.

4. Kliknij opcję Zapisz.

5. W katalogu Układ kliknij theme.liquid.

6. Znajdź tag zamykający </body> w dolnej części pliku. W nowej linii tuż nad tagiem zamykającym </body> wklej następujący kod:

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

1. Kliknij opcję Zapisz.

2. Znajdź plik zawierający formularz dodawania do koszyka. Będzie mieć atrybut action ustawiony na /cart/add.

3. Znajdź ten kod wewnątrz formularza:

<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. Znajdź i zastąp następujący kod:

{% 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. Kliknij opcję Zapisz.

Zmień ustawienia języka przycisku Dodaj do koszyka

Możesz zmienić ustawienia języka przycisku Dodaj do koszyka, aby produkty nie były wyświetlane jako „Niedostępne” przed dokonaniem wyboru.

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.

iPhone

1. W aplikacji Shopify naciśnij opcję Sklep.
2. W sekcji Kanały sprzedaży naciśnij opcję Sklep online.
3. Naciśnij opcję Zarządzaj szablonami.

Android

1. W aplikacji Shopify naciśnij opcję Sklep.
2. W sekcji Kanały sprzedaży naciśnij opcję Sklep online.
3. Naciśnij opcję Zarządzaj szablonami.

1. Znajdź szablon, który chcesz edytować, a następnie kliknij opcję Czynności > Edytuj domyślną zawartość szablonu.

2. W polu Filtruj zacznij wpisywać unavailable, aby wyświetlić tłumaczenie „Niedostępne”.

3. Zastąp tekst Niedostępny wyrażeniem Make a selection.

4. Kliknij opcję Zapisz.