Saa asiakkaat valitsemaan vaihtoehto

Huomaa

Jos käytät Shopifyn ilmaista teemaa, voit ottaa yhteyttä Shopify-tukeen tutoriaaliin liittyvissä asioissa. Tähän tarvitaan 15 minuuttia suunnitteluaikaa. Lisätietoja on kohdassa Teemojen tuki.

Huomaa

tämä mukautus koskee vain vanhoja Shopify-teemoja, eikä sitä sovelleta Online Store 2.0 -teemoihin.

• Selvitä teemasi arkkitehtuuriversio
• Tutustu Online Store 2.0:n teemojen mukauttamiseen

Kun asiakas vierailee verkkokauppasi tuotesivulla, ensimmäinen saatavilla oleva versio valitaan oletusarvoisesti. Voit käyttää tätä mukautusta poistaaksesi automaattisen valinnan käytöstä. Näin asiakasta kehotetaan valitsemaan versio manuaalisesti ennen sellaisen näyttämistä. )

Huomaa

Koska tämä mukautus estää versioiden oletusarvoisen valitsemisen, teemasi ei välttämättä näytä tuotteen hintaa ennen kuin asiakas on valinnut version. Tämä on odotettu toimintamalli, koska versioita sisältävillä tuotteilla ei ole esiteltävissä olevaa hintaa. Näytettävä hinta määräytyy valitun tuoteversion mukaan.

Osiin jaetut ja jakamattomat teemat

Huomautus: Tämän tutoriaalin vaiheet vaihtelevat sen mukaan, käytätkö osiin jaettua vai osiin jakamatonta teemaa. Osiin jaetussa teemassa etusivun asettelua voi järjestää vetämällä ja pudottamalla elementtejä, osiin jakamattomassa teemassa ei.

Teeman Muokkaa koodia -sivulla saat selville tukeeko teemasi osioita. Jos Osiot-hakemistossa on tiedostoja, käytössäsi on osioihin jaettu teema. Osioihin jakamattomat teemat on julkaistu ennen lokakuuta 2016, eikä niiden Osiot-hakemistossa ole tiedostoja.

Jos käytät osioihin jaettua teemaa, klikkaa Osioihin jaetut teemat -painiketta ja noudata ohjeita. Jos käytät vanhempaa teemaa, jota ei ole jaettu osioihin, klikkaa Osioihin jakamattomat teemat -painiketta ja noudata ohjeita.

Sectioned themes

Valitse teema

Tämän mukautuksen toimintavaiheet vaihtelevat teeman mukaan. Klikkaa teeman painiketta ennen kuin noudatat seuraavia ohjeita:

Boundless

Boundless-teeman toimintavaiheet

Kun haluat mukauttaa Boundless-teemaa, noudata näitä ohjeita:

Muokkaa teeman JavaScript-tiedostoa

Näin voit muokata teeman JavaScript-tiedostoa:

Pöytäkone

1. Valitse Shopifyn Admin-sivulla Verkkokauppa > Teemat.

2. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

iPhone

1. Napauta Shopify-sovelluksessa Kauppa.

2. Napauta Myyntikanavat-kohdassa Verkkokauppa.

3. Napauta Hallinnoi teemoja.

4. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Android

1. Napauta Shopify-sovelluksessa Kauppa.

2. Napauta Myyntikanavat-kohdassa Verkkokauppa.

3. Napauta Hallinnoi teemoja.

4. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

1. klikkaa Sisällöt-hakemistossa valintaa theme.js tai theme.js.liquid.

2. Etsi koodi initVariantSelectors. Etsi sitten tämän alta seuraava koodi:

// 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. Etsi seuraava koodirivi:

$(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. Napauta Tallenna.

Muokkaa tuotesivun mallia

Voit muokata tuotesivusi mallia seuraavasti:

1. klikkaa Osat-hakemistossa kohtaa product-template.liquid.

2. Etsi seuraava koodi:

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign current_variant = product.selected_variant %}

1. Etsi seuraava koodi ja poista se:

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

1. Etsi koodi {% schema %}. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:

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

Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Voit muuttaa Lisää ostoskoriin -painikkeen kieliasetuksia, jotta ennen valinnan tekemistä tuotteiden tilana ei näy "Ei käytettävissä".

Pöytäkone

1. Valitse Shopifyn Admin-sivulla Verkkokauppa > Teemat.

iPhone

1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.

Android

1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.

1. Etsi teema, jota haluat muokata, ja valitse sen jälkeen Toiminnot > Muokkaa kieliä.

2. Kirjoita Suodata-laatikkoon unavailable, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.

3. Korvaa teksti Ei käytettävissä tekstiksi Make a selection.

4. Napauta Tallenna.

Debut

Debut-teeman toimintavaiheet

Kun haluat mukauttaa Debut-teemaa, noudata näitä ohjeita:

Muokkaa teeman JavaScript-tiedostoa

Näin voit muokata teeman JavaScript-tiedostoa:

Pöytäkone

1. Valitse Shopifyn Admin-sivulla Verkkokauppa > Teemat.

2. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

iPhone

1. Napauta Shopify-sovelluksessa Kauppa.

2. Napauta Myyntikanavat-kohdassa Verkkokauppa.

3. Napauta Hallinnoi teemoja.

4. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Android

1. Napauta Shopify-sovelluksessa Kauppa.

2. Napauta Myyntikanavat-kohdassa Verkkokauppa.

3. Napauta Hallinnoi teemoja.

4. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

1. klikkaa Sisällöt-hakemistossa valintaa theme.js tai theme.js.liquid.

2. Lisää seuraava koodi tiedoston alareunaan:

(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. Etsi koodi _updatePrice: function(variant). Korvaa seuraava koodi:

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. Etsi koodi this.currentVariant = variant;

this._updatePaymentButton(variant);

The result should look something like this:

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

1. Etsi koodi _updateImages: function(variant). Korvaa seuraava koodi:

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

with:

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

1. Etsi alta seuraava koodi:

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

Replace it with:

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

1. Etsi koodi _updateSKU: function(variant). Korvaa seuraava koodi:

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

with:

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

1. Etsi koodi _initVariants: function() {. Korvaa seuraava koodi:

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. Etsi seuraava koodi:

_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. Napauta Tallenna.

Muokkaa tuotesivun mallia

Voit muokata tuotesivusi mallia seuraavasti:

1. klikkaa Osat-hakemistossa kohtaa product-template.liquid.

2. Etsi seuraava koodi:

{%- 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. Etsi seuraava koodi ja poista se:

{% 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. Etsi seuraava koodi:

{%- 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. Etsi seuraava koodi:

{% 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. Etsi seuraava koodi:

{% 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. Etsi koodi {% schema %}. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:

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

Muokkaa tuotehinnan koodinpätkää

Näin voit muokata tuotehinnan koodinpätkää:

1. klikkaa Koodinpätkät-hakemistossa product-price.liquid.

2. Etsi seuraava koodi:

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

Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Voit muuttaa Lisää ostoskoriin -painikkeen kieliasetuksia, jotta ennen valinnan tekemistä tuotteiden tilana ei näy "Ei käytettävissä".

Pöytäkone

1. Valitse Shopifyn Admin-sivulla Verkkokauppa > Teemat.

iPhone

1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.

Android

1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.

1. Etsi teema, jota haluat muokata, ja valitse sen jälkeen Toiminnot > Muokkaa kieliä.

2. Kirjoita Suodata-laatikkoon unavailable, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.

3. Korvaa teksti Ei käytettävissä tekstiksi Make a selection.

4. Napauta Tallenna.

Minimal

Minimal-teeman toimintavaiheet

Kun haluat mukauttaa Minimal-teemaa, noudata näitä ohjeita:

Muokkaa teeman JavaScript-tiedostoa

Näin voit muokata teeman JavaScript-tiedostoa:

Pöytäkone

1. Valitse Shopifyn Admin-sivulla Verkkokauppa > Teemat.

2. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

iPhone

1. Napauta Shopify-sovelluksessa Kauppa.

2. Napauta Myyntikanavat-kohdassa Verkkokauppa.

3. Napauta Hallinnoi teemoja.

4. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Android

1. Napauta Shopify-sovelluksessa Kauppa.

2. Napauta Myyntikanavat-kohdassa Verkkokauppa.

3. Napauta Hallinnoi teemoja.

4. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

1. klikkaa Sisällöt-hakemistossa valintaa theme.js tai theme.js.liquid.

2. Etsi koodi initProductVariant: function() {. Etsi sitten tämän alta seuraava koodi:

// 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. Napauta Tallenna.

Muokkaa tuotesivun mallia:

Voit muokata tuotesivusi mallia seuraavasti:

1. klikkaa Osat-hakemistossa kohtaa product-template.liquid.

2. Etsi seuraava koodi:

{% assign variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign variant = product.selected_variant %}

1. Etsi seuraava koodi ja poista se:

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

1. Etsi kaikki tämän koodin esiintymät:

{% 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. Etsi koodi {% schema %}. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:

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

Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Voit muuttaa Lisää ostoskoriin -painikkeen kieliasetuksia, jotta ennen valinnan tekemistä tuotteiden tilana ei näy "Ei käytettävissä".

Pöytäkone

1. Valitse Shopifyn Admin-sivulla Verkkokauppa > Teemat.

iPhone

1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.

Android

1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.

1. Etsi teema, jota haluat muokata, ja valitse sen jälkeen Toiminnot > Muokkaa kieliä.

2. Kirjoita Suodata-laatikkoon unavailable, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.

3. Korvaa teksti Ei käytettävissä tekstiksi Make a selection.

4. Napauta Tallenna.

Narrative

Narrative-teeman toimintavaiheet

Kun haluat mukauttaa Narrative-teemaa, noudata näitä ohjeita:

Muokkaa teeman JavaScript-tiedostoa

Näin voit muokata teeman JavaScript-tiedostoa:

Pöytäkone

1. Valitse Shopifyn Admin-sivulla Verkkokauppa > Teemat.

2. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

iPhone

1. Napauta Shopify-sovelluksessa Kauppa.

2. Napauta Myyntikanavat-kohdassa Verkkokauppa.

3. Napauta Hallinnoi teemoja.

4. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Android

1. Napauta Shopify-sovelluksessa Kauppa.

2. Napauta Myyntikanavat-kohdassa Verkkokauppa.

3. Napauta Hallinnoi teemoja.

4. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

1. klikkaa Sisällöt-hakemistossa kohtaa custom.js.

2. Lisää seuraava koodi tiedoston alareunaan:

(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. Napauta Tallenna.

Muokkaa tuotesivun mallia

Voit muokata tuotesivusi mallia seuraavasti:

1. klikkaa Osat-hakemistossa kohtaa product-template.liquid.

2. Etsi seuraava koodi:

{%- 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. Etsi koodi {% schema %}. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:

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

Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Voit muuttaa Lisää ostoskoriin -painikkeen kieliasetuksia, jotta ennen valinnan tekemistä tuotteiden tilana ei näy "Ei käytettävissä".

Pöytäkone

1. Valitse Shopifyn Admin-sivulla Verkkokauppa > Teemat.

iPhone

1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.

Android

1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.

1. Etsi teema, jota haluat muokata, ja valitse sen jälkeen Toiminnot > Muokkaa kieliä.

2. Kirjoita Suodata-laatikkoon unavailable, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.

3. Korvaa teksti Ei käytettävissä tekstiksi Make a selection.

4. Napauta Tallenna.

Simple

Simple-teeman toimintavaiheet

Kun haluat mukauttaa Simple-teemaa, noudata näitä ohjeita:

Muokkaa teeman JavaScript-tiedostoa

Näin voit muokata teeman JavaScript-tiedostoa:

Pöytäkone

1. Valitse Shopifyn Admin-sivulla Verkkokauppa > Teemat.

2. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

iPhone

1. Napauta Shopify-sovelluksessa Kauppa.

2. Napauta Myyntikanavat-kohdassa Verkkokauppa.

3. Napauta Hallinnoi teemoja.

4. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Android

1. Napauta Shopify-sovelluksessa Kauppa.

2. Napauta Myyntikanavat-kohdassa Verkkokauppa.

3. Napauta Hallinnoi teemoja.

4. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

1. klikkaa Sisällöt-hakemistossa valintaa theme.js tai theme.js.liquid.

2. Etsi koodi initProductVariant: function() {. Etsi sitten tämän alta seuraava koodi:

// 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. Napauta Tallenna.

Muokkaa tuotesivun mallia

Voit muokata tuotesivusi mallia seuraavasti:

1. klikkaa Osat-hakemistossa kohtaa product-template.liquid.

2. Etsi seuraava koodi:

{% assign current_variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign current_variant = product.selected_variant %}

1. Etsi seuraava koodi ja poista se:

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

1. Etsi koodi {% schema %}. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:

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

Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Voit muuttaa Lisää ostoskoriin -painikkeen kieliasetuksia, jotta ennen valinnan tekemistä tuotteiden tilana ei näy "Ei käytettävissä".

Pöytäkone

1. Valitse Shopifyn Admin-sivulla Verkkokauppa > Teemat.

iPhone

1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.

Android

1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.

1. Etsi teema, jota haluat muokata, ja valitse sen jälkeen Toiminnot > Muokkaa kieliä.

2. Kirjoita Suodata-laatikkoon unavailable, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.

3. Korvaa teksti Ei käytettävissä tekstiksi Make a selection.

4. Napauta Tallenna.

Supply

Supply-teeman toimintavaiheet

Kun haluat mukauttaa Supply-teemaa, noudata näitä ohjeita:

Muokkaa teeman JavaScript-tiedostoa

Näin voit muokata teeman JavaScript-tiedostoa:

Pöytäkone

1. Valitse Shopifyn Admin-sivulla Verkkokauppa > Teemat.

2. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

iPhone

1. Napauta Shopify-sovelluksessa Kauppa.

2. Napauta Myyntikanavat-kohdassa Verkkokauppa.

3. Napauta Hallinnoi teemoja.

4. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Android

1. Napauta Shopify-sovelluksessa Kauppa.

2. Napauta Myyntikanavat-kohdassa Verkkokauppa.

3. Napauta Hallinnoi teemoja.

4. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

1. klikkaa Sisällöt-hakemistossa valintaa theme.js tai theme.js.liquid.

2. Etsi koodi initProductVariant: function() {. Etsi sitten tämän alta seuraava koodi:

// 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. Napauta Tallenna.

Muokkaa tuotesivun mallia

Voit muokata tuotesivusi mallia seuraavasti:

1. klikkaa Osat-hakemistossa kohtaa product-template.liquid.

2. Etsi seuraava koodi:

{% assign variant = product.selected_or_first_available_variant %}

Replace it with:

{% assign variant = product.selected_variant %}

1. Etsi seuraava koodi ja poista se:

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

1. Etsi kaikki tämän koodin esiintymät:

{% 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. Etsi koodi {% schema %}. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:

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

Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Voit muuttaa Lisää ostoskoriin -painikkeen kieliasetuksia, jotta ennen valinnan tekemistä tuotteiden tilana ei näy "Ei käytettävissä".

Pöytäkone

1. Valitse Shopifyn Admin-sivulla Verkkokauppa > Teemat.

iPhone

1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.

Android

1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.

1. Etsi teema, jota haluat muokata, ja valitse sen jälkeen Toiminnot > Muokkaa kieliä.

2. Kirjoita Suodata-laatikkoon unavailable, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.

3. Korvaa teksti Ei käytettävissä tekstiksi Make a selection.

4. Napauta Tallenna.

Venture

Venture-teeman toimintavaiheet

Kun haluat mukauttaa Venture-teemaa, noudata näitä ohjeita:

Muokkaa teeman JavaScript-tiedostoa

Näin voit muokata teeman JavaScript-tiedostoa:

Pöytäkone

1. Valitse Shopifyn Admin-sivulla Verkkokauppa > Teemat.

2. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

iPhone

1. Napauta Shopify-sovelluksessa Kauppa.

2. Napauta Myyntikanavat-kohdassa Verkkokauppa.

3. Napauta Hallinnoi teemoja.

4. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

Android

1. Napauta Shopify-sovelluksessa Kauppa.

2. Napauta Myyntikanavat-kohdassa Verkkokauppa.

3. Napauta Hallinnoi teemoja.

4. Etsi teema, jota haluat muokata, ja valitse sitten Toiminnot > Muokkaa koodia.

1. klikkaa Sisällöt-hakemistossa valintaa theme.js tai theme.js.liquid.

2. Lisää seuraava koodi tiedoston alareunaan:

(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. Etsi seuraava koodi:

this.currentVariant = this._getVariantFromOptions();

Replace it with:

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

1. Etsi koodi _updatePrice: function(variant). Korvaa seuraava koodi:

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. Napauta Tallenna.

Muokkaa tuotesivun mallia

Voit muokata tuotesivusi mallia seuraavasti:

1. klikkaa Osat-hakemistossa kohtaa product-template.liquid.

2. Etsi seuraava koodi:

{% 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. Etsi seuraava koodi ja poista se:

{% 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. Etsi kaikki tämän koodin esiintymät:

{% unless current_variant.available %}

Replace it with:

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

1. Etsi seuraava koodi:

{% 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. Etsi koodi {% schema %}. Liitä seuraava koodi sen yläpuolelle omalle rivilleen:

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

Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Voit muuttaa Lisää ostoskoriin -painikkeen kieliasetuksia, jotta ennen valinnan tekemistä tuotteiden tilana ei näy "Ei käytettävissä".

Pöytäkone

1. Valitse Shopifyn Admin-sivulla Verkkokauppa > Teemat.

iPhone

1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.

Android

1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.

1. Etsi teema, jota haluat muokata, ja valitse sen jälkeen Toiminnot > Muokkaa kieliä.

2. Kirjoita Suodata-laatikkoon unavailable, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.

3. Korvaa teksti Ei käytettävissä tekstiksi Make a selection.

4. Napauta Tallenna.

Non-sectioned themes

Kehotteiden lisääminen versiosi pudotusvalikkoihin

Näin voit lisätä kehotteita versiopudotusvalikkoihisi:

1. klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä.

2. Anna uudelle koodinpätkällesi nimeksi pick-an-option.

3. Liitä this code hosted on GitHub uuteen katkelmatiedostoon.

4. Napauta Tallenna.

5. Valitse Ulkoasu-luettelosta theme.liquid.

6. Etsi lähellä tiedoston alareunaa oleva sulkeva </body>-tunniste. Liitä seuraava koodi uudelle riville heti sulkevan </body>-tunnisteen yläpuolelle:

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

1. Napauta Tallenna.

2. Etsi tiedosto, joka sisältää Lisää ostoskoriin -lomakkeen. Siinä on action-ominaisuus, jonka arvona on /cart/add.

3. Etsi lomakkeesta tämä koodi:

<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. Etsi ja korvaa seuraava koodi:

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

Muuta Lisää ostoskoriin -painikkeen kieliasetuksia

Voit muuttaa Lisää ostoskoriin -painikkeen kieliasetuksia, jotta ennen valinnan tekemistä tuotteiden tilana ei näy "Ei käytettävissä".

Pöytäkone

1. Valitse Shopifyn Admin-sivulla Verkkokauppa > Teemat.

iPhone

1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.

Android

1. Napauta Shopify-sovelluksessa Kauppa.
2. Napauta Myyntikanavat-kohdassa Verkkokauppa.
3. Napauta Hallinnoi teemoja.

1. Etsi teema, jota haluat muokata, ja valitse sen jälkeen Toiminnot > Muokkaa kieliä.

2. Kirjoita Suodata-laatikkoon unavailable, jotta sanojen ”Ei käytettävissä” käännös tulee näkyviin.

3. Korvaa teksti Ei käytettävissä tekstiksi Make a selection.

4. Napauta Tallenna.