Få kundene til å velge et alternativ
Når en kunde besøker en produktside i nettbutikken velges den første tilgjengelige varianten som standard. Du kan bruke denne tilpasningen for å deaktivere automatisk valg av den første tilgjengelige varianten. På den måten vil kunden bli bedt om å manuelt velge en variant før noe vises. )
Seksjonerte og ikke-seksjonerte temaer
Velg tema
Trinnene for denne tilpasningen varierer avhengig av valgt tema. Klikk på knappen for temaet ditt før du følger anvisningene nedenfor:
Steg for Boundless
Følg disse trinnene for å bruke tilpasningen for Boundless:
Rediger temaets JavaScript-fil
For å redigere temaets JavaScript-fil:
Fra Shopify-administrator går du til Nettbutikk > Temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Redigere temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Redigere temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
I Ressurser-katalogen klikker du på
theme.js
ellertheme.js.liquid
.Finn koden
initVariantSelectors
. Finn følgende kode nedenfor:
// 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;
}
}
}
- Finn følgende kodelinje:
$(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.
- Klikk på Lagre.
Rediger produktsidemalen
Slik redigerer du produktsidemalen
I Deler-katalogen klikker du på
product-template.liquid
.Finn følgende kode:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign current_variant = product.selected_variant %}
- Finn følgende kode og slett den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
Finn koden
{% schema %}
. Lim inn følgende kode på en egen linje etter koden over:
{% 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 %}
- Klikk på Lagre.
Endre språkinnstillingene for Legg i handlekurv-knappen.
Du kan endre språkinnstillingene for Legg i handlekurv-knappen slik at produktene ikke vises som «utilgjengelige» før et valg foretas.
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Fra Shopify-appen trykker du på Butikk.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
- Fra Shopify-appen trykker du på Butikk.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
Finn temaet du vil redigere og klikk på Handlinger > Rediger standardtema-innhold.
I Filter-boksen, begynn å skrive
unavailable
for å vise oversettelsen for «Utilgjengelig».Erstatt teksten Utilgjengelig med
Make a selection
.Klikk på Lagre.
Steg for Debut
Følg disse trinnene for å bruke tilpasningen for Debut:
Rediger temaets JavaScript-fil
For å redigere temaets JavaScript-fil:
Fra Shopify-administrator går du til Nettbutikk > Temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Redigere temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Redigere temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
I Ressurser-katalogen klikker du på
theme.js
ellertheme.js.liquid
.Lim følgende kode nederst 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;
}
}
}
})();
-
Finn koden
_updatePrice: function(variant)
. Erstatt følgende kode:
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;
} */
-
Finn koden
this.currentVariant = variant;
this._updatePaymentButton(variant);
The result should look something like this:
this.currentVariant = variant;
this._updatePaymentButton(variant);
-
Finn koden
_updateImages: function(variant)
. Erstatt følgende kode:
var currentVariantImage = this.currentVariant.featured_image || {};
with:
if (this.currentVariant != undefined) {
var currentVariantImage = this.currentVariant.featured_image || {};
}
- Rett nedenfor finner du følgende kode:
if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
}
Replace it with:
/* if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
} */
-
Finn koden
_updateSKU: function(variant)
. Erstatt følgende kode:
if (variant.sku === this.currentVariant.sku) {
return;
}
with:
if (this.currentVariant != undefined ) {
if (variant.sku === this.currentVariant.sku) {
return;
}
}
-
Finn koden
_initVariants: function() {
. Erstatt følgende kode:
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.
- Finn følgende kode:
_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');
}
},
- Klikk på Lagre.
Rediger produktsidemalen
Slik redigerer du produktsidemalen
I Deler-katalogen klikker du på
product-template.liquid
.Finn følgende kode:
{%- 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 %}
- Finn følgende kode og slett den:
{% 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 -%}
- Finn følgende kode:
{%- 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.
- Finn følgende kode:
{% 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 %}
- Finn følgende kode:
{% 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>
-
Finn koden
{% schema %}
. Lim inn følgende kode på en egen linje etter koden over:
{% 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 %}
- Klikk på Lagre.
Endre produktpriskodebiten
For å redigere kodebiten for produktpris:
I Kodesnutter-katalogen klikker du på
product-price.liquid
.Finn følgende kode:
{%- 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.
Endre språkinnstillingene for Legg i handlekurv-knappen.
Du kan endre språkinnstillingene for Legg i handlekurv-knappen slik at produktene ikke vises som «utilgjengelige» før et valg foretas.
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Fra Shopify-appen trykker du på Butikk.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
- Fra Shopify-appen trykker du på Butikk.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
Finn temaet du vil redigere og klikk på Handlinger > Rediger standardtema-innhold.
I Filter-boksen, begynn å skrive
unavailable
for å vise oversettelsen for «Utilgjengelig».Erstatt teksten Utilgjengelig med
Make a selection
.Klikk på Lagre.
Steg for Minimal
Følg disse stegene for å bruke tilpasningen for Minimal:
Rediger temaets JavaScript-fil
For å redigere temaets JavaScript-fil:
Fra Shopify-administrator går du til Nettbutikk > Temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Redigere temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Redigere temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
I Ressurser-katalogen klikker du på
theme.js
ellertheme.js.liquid
.Finn koden
initProductVariant: function() {
. Finn følgende kode nedenfor:
// 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;
}
}
}
- Klikk på Lagre.
Rediger produktsidemalen:
Slik redigerer du produktsidemalen
I Deler-katalogen klikker du på
product-template.liquid
.Finn følgende kode:
{% assign variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign variant = product.selected_variant %}
- Finn følgende kode og slett den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Finn alle forekomster av denne koden:
{% 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 %}
-
Finn koden
{% schema %}
. Lim inn følgende kode på en egen linje etter koden over:
{% 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 %}
- Klikk på Lagre.
Endre språkinnstillingene for Legg i handlekurv-knappen.
Du kan endre språkinnstillingene for Legg i handlekurv-knappen slik at produktene ikke vises som «utilgjengelige» før et valg foretas.
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Fra Shopify-appen trykker du på Butikk.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
- Fra Shopify-appen trykker du på Butikk.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
Finn temaet du vil redigere og klikk på Handlinger > Rediger standardtema-innhold.
I Filter-boksen, begynn å skrive
unavailable
for å vise oversettelsen for «Utilgjengelig».Erstatt teksten Utilgjengelig med
Make a selection
.Klikk på Lagre.
Steg for Narrative
Følg disse stegene for å bruke tilpasningen for Narrative:
Rediger temaets JavaScript-fil
For å redigere temaets JavaScript-fil:
Fra Shopify-administrator går du til Nettbutikk > Temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Redigere temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Redigere temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
I Ressurser-katalogen klikker du på
custom.js
.Lim følgende kode nederst 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;
}
}
}
})();
- Klikk på Lagre.
Rediger produktsidemalen
Slik redigerer du produktsidemalen
I Deler-katalogen klikker du på
product-template.liquid
.Finn følgende kode:
{%- 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 -%}
-
Finn koden
{% schema %}
. Lim inn følgende kode på en egen linje etter koden over:
{% 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 %}
- Klikk på Lagre.
Endre språkinnstillingene for Legg i handlekurv-knappen.
Du kan endre språkinnstillingene for Legg i handlekurv-knappen slik at produktene ikke vises som «utilgjengelige» før et valg foretas.
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Fra Shopify-appen trykker du på Butikk.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
- Fra Shopify-appen trykker du på Butikk.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
Finn temaet du vil redigere og klikk på Handlinger > Rediger standardtema-innhold.
I Filter-boksen, begynn å skrive
unavailable
for å vise oversettelsen for «Utilgjengelig».Erstatt teksten Utilgjengelig med
Make a selection
.Klikk på Lagre.
Steg for Simple
Følg disse stegene for å bruke tilpasningen for Simple
Rediger temaets JavaScript-fil
For å redigere temaets JavaScript-fil:
Fra Shopify-administrator går du til Nettbutikk > Temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Redigere temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Redigere temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
I Ressurser-katalogen klikker du på
theme.js
ellertheme.js.liquid
.Finn koden
initProductVariant: function() {
. Finn følgende kode nedenfor:
// 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;
}
}
}
- Klikk på Lagre.
Rediger produktsidemalen
Slik redigerer du produktsidemalen
I Deler-katalogen klikker du på
product-template.liquid
.Finn følgende kode:
{% assign current_variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign current_variant = product.selected_variant %}
- Finn følgende kode og slett den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
Finn koden
{% schema %}
. Lim inn følgende kode på en egen linje etter koden over:
{% 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 %}
- Klikk på Lagre.
Endre språkinnstillingene for Legg i handlekurv-knappen.
Du kan endre språkinnstillingene for Legg i handlekurv-knappen slik at produktene ikke vises som «utilgjengelige» før et valg foretas.
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Fra Shopify-appen trykker du på Butikk.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
- Fra Shopify-appen trykker du på Butikk.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
Finn temaet du vil redigere og klikk på Handlinger > Rediger standardtema-innhold.
I Filter-boksen, begynn å skrive
unavailable
for å vise oversettelsen for «Utilgjengelig».Erstatt teksten Utilgjengelig med
Make a selection
.Klikk på Lagre.
Steg for Supply
Følg disse stegene for å bruke tilpasningen for Supply:
Rediger temaets JavaScript-fil
For å redigere temaets JavaScript-fil:
Fra Shopify-administrator går du til Nettbutikk > Temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Redigere temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Redigere temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
I Ressurser-katalogen klikker du på
theme.js
ellertheme.js.liquid
.Finn koden
initProductVariant: function() {
. Finn følgende kode nedenfor:
// 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;
}
}
}
- Klikk på Lagre.
Rediger produktsidemalen
Slik redigerer du produktsidemalen
I Deler-katalogen klikker du på
product-template.liquid
.Finn følgende kode:
{% assign variant = product.selected_or_first_available_variant %}
Replace it with:
{% assign variant = product.selected_variant %}
- Finn følgende kode og slett den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Finn alle forekomster av denne koden:
{% 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 %}
-
Finn koden
{% schema %}
. Lim inn følgende kode på en egen linje etter koden over:
{% 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 %}
- Klikk på Lagre.
Endre språkinnstillingene for Legg i handlekurv-knappen.
Du kan endre språkinnstillingene for Legg i handlekurv-knappen slik at produktene ikke vises som «utilgjengelige» før et valg foretas.
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Fra Shopify-appen trykker du på Butikk.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
- Fra Shopify-appen trykker du på Butikk.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
Finn temaet du vil redigere og klikk på Handlinger > Rediger standardtema-innhold.
I Filter-boksen, begynn å skrive
unavailable
for å vise oversettelsen for «Utilgjengelig».Erstatt teksten Utilgjengelig med
Make a selection
.Klikk på Lagre.
Steg for Venture
Følg disse stegene for å bruke tilpasningen for Venture:
Rediger temaets JavaScript-fil
For å redigere temaets JavaScript-fil:
Fra Shopify-administrator går du til Nettbutikk > Temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Redigere temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
Fra Shopify-appen trykker du på Butikk.
I Salgskanal-seksjonen trykker du på Nettbutikk.
Trykk på Redigere temaer.
Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
I Ressurser-katalogen klikker du på
theme.js
ellertheme.js.liquid
.Lim følgende kode nederst 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;
}
}
}
})();
- Finn følgende kode:
this.currentVariant = this._getVariantFromOptions();
Replace it with:
this.currentVariant = this._getVariantFromOptions() || {};
-
Finn koden
_updatePrice: function(variant)
. Erstatt følgende kode:
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;
} */
- Klikk på Lagre.
Rediger produktsidemalen
Slik redigerer du produktsidemalen
I Deler-katalogen klikker du på
product-template.liquid
.Finn følgende kode:
{% 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 %}
- Finn følgende kode og slett den:
{% 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 %}
- Finn alle forekomster av denne koden:
{% unless current_variant.available %}
Replace it with:
{% unless current_variant.available or product.variants.size == 1 and variant.available %}
- Finn følgende kode:
{% 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 %}
-
Finn koden
{% schema %}
. Lim inn følgende kode på en egen linje etter koden over:
{% 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 %}
- Klikk på Lagre.
Endre språkinnstillingene for Legg i handlekurv-knappen.
Du kan endre språkinnstillingene for Legg i handlekurv-knappen slik at produktene ikke vises som «utilgjengelige» før et valg foretas.
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Fra Shopify-appen trykker du på Butikk.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
- Fra Shopify-appen trykker du på Butikk.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
Finn temaet du vil redigere og klikk på Handlinger > Rediger standardtema-innhold.
I Filter-boksen, begynn å skrive
unavailable
for å vise oversettelsen for «Utilgjengelig».Erstatt teksten Utilgjengelig med
Make a selection
.Klikk på Lagre.
Legg til beskjeder i variantens rullegardinmenyer
Slik legger du til beskjeder i rullegardinmenyene for varianter:
I Utdrag-katalogen klikker du på Legg til et nytt utdrag.
Gi den nye kodebiten navnet
pick-an-option
.I den nye utdragsfilen limer du inn denne koden fra GitHub.
Klikk på Lagre.
I Oppsett-katalogen klikker du på
theme.liquid
.Finn den avsluttende
</body>
taggen nesten nederst i filen. Lim inn følgende kode på en ny linje like over den avsluttende</body>
-taggen:
{% render 'pick-an-option' %}

Klikk på Lagre.
Finn filen som inneholder skjemaet Legg i handlekurv. Skjemaet har en
action
-attributt satt til/cart/add
.Finn denne koden i skjemaet:
<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>
- Finn og erstatt følgende kode:
{% 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 themesIf 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 %}
- Klikk på Lagre.
Endre språkinnstillingene for Legg i handlekurv-knappen.
Du kan endre språkinnstillingene for Legg i handlekurv-knappen slik at produktene ikke vises som «utilgjengelige» før et valg foretas.
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Fra Shopify-appen trykker du på Butikk.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
- Fra Shopify-appen trykker du på Butikk.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
Finn temaet du vil redigere og klikk på Handlinger > Rediger standardtema-innhold.
I Filter-boksen, begynn å skrive
unavailable
for å vise oversettelsen for «Utilgjengelig».Erstatt teksten Utilgjengelig med
Make a selection
.Klikk på Lagre.