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
På denne siden
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
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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);
Legg til følgende kode på en ny linje under:
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
Den skal se omtrent slik ut:
// 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);
Det er to forekomster av denne kodelinjen, begge ligger i productVariantCallback
-funksjonen. Erstatt bare den andre forekomsten med:
$(selectors.addToCartText).html('Make a Selection');
- Klikk på Lagre.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanaler-seksjonen trykker du på Nettbutikk.
- Trykk på Administrer temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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);
Legg til følgende kode på en ny linje under:
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
Den skal se omtrent slik ut:
// 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);
Det er to forekomster av denne kodelinjen, begge ligger i productVariantCallback
-funksjonen. Erstatt bare den andre forekomsten med:
$(selectors.addToCartText).html('Make a Selection');
- Klikk på Lagre.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanaler-seksjonen trykker du på Nettbutikk.
- Trykk på Administrer temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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);
Legg til følgende kode på en ny linje under:
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
Den skal se omtrent slik ut:
// 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);
Det er to forekomster av denne kodelinjen, begge ligger i productVariantCallback
-funksjonen. Erstatt bare den andre forekomsten med:
$(selectors.addToCartText).html('Make a Selection');
- 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 %}
Erstatt det med:
{% 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 %}
Den skal se omtrent slik ut:
{% 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.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
Finn temaet du vil redigere, og klikk deretter på … > Rediger standardtemainnhold.
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
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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;
}
med:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price &&
variant.unit_price === this.currentVariant.unit_price
) {
return;
} */
Hvis du ikke finner koden ovenfor, finner du følgende kode:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
}
Erstatt det med:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
-
Finn koden
this.currentVariant = variant;
Legg til følgende kode under:
this._updatePaymentButton(variant);
Resultatet skal se omtrent slik ut:
this.currentVariant = variant;
this._updatePaymentButton(variant);
-
Finn koden
_updateImages: function(variant)
. Erstatt følgende kode:
var currentVariantImage = this.currentVariant.featured_image || {};
med:
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;
}
Erstatt det med:
/* 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;
}
med:
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);
}
med:
/* if (this.storeAvailability && this.variants.currentVariant.available) {
this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */
- 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
})
);
},
Legg til følgende kode på en ny linje under koden ovenfor:
_updatePaymentButton: function(variant) {
if (this.currentVariant != undefined) {
const paymentButton = document.querySelector('.payment-button');
if (paymentButton) {
paymentButton.removeAttribute('class', 'visually-hidden');
}
} else {
document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
}
},
Den skal se omtrent slik ut:
_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.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanaler-seksjonen trykker du på Nettbutikk.
- Trykk på Administrer temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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;
}
med:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price &&
variant.unit_price === this.currentVariant.unit_price
) {
return;
} */
Hvis du ikke finner koden ovenfor, finner du følgende kode:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
}
Erstatt det med:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
-
Finn koden
this.currentVariant = variant;
Legg til følgende kode under:
this._updatePaymentButton(variant);
Resultatet skal se omtrent slik ut:
this.currentVariant = variant;
this._updatePaymentButton(variant);
-
Finn koden
_updateImages: function(variant)
. Erstatt følgende kode:
var currentVariantImage = this.currentVariant.featured_image || {};
med:
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;
}
Erstatt det med:
/* 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;
}
med:
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);
}
med:
/* if (this.storeAvailability && this.variants.currentVariant.available) {
this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */
- 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
})
);
},
Legg til følgende kode på en ny linje under koden ovenfor:
_updatePaymentButton: function(variant) {
if (this.currentVariant != undefined) {
const paymentButton = document.querySelector('.payment-button');
if (paymentButton) {
paymentButton.removeAttribute('class', 'visually-hidden');
}
} else {
document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
}
},
Den skal se omtrent slik ut:
_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.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanaler-seksjonen trykker du på Nettbutikk.
- Trykk på Administrer temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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;
}
med:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price &&
variant.unit_price === this.currentVariant.unit_price
) {
return;
} */
Hvis du ikke finner koden ovenfor, finner du følgende kode:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
}
Erstatt det med:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
-
Finn koden
this.currentVariant = variant;
Legg til følgende kode under:
this._updatePaymentButton(variant);
Resultatet skal se omtrent slik ut:
this.currentVariant = variant;
this._updatePaymentButton(variant);
-
Finn koden
_updateImages: function(variant)
. Erstatt følgende kode:
var currentVariantImage = this.currentVariant.featured_image || {};
med:
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;
}
Erstatt det med:
/* 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;
}
med:
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);
}
med:
/* if (this.storeAvailability && this.variants.currentVariant.available) {
this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */
- 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
})
);
},
Legg til følgende kode på en ny linje under koden ovenfor:
_updatePaymentButton: function(variant) {
if (this.currentVariant != undefined) {
const paymentButton = document.querySelector('.payment-button');
if (paymentButton) {
paymentButton.removeAttribute('class', 'visually-hidden');
}
} else {
document.querySelector('.payment-button').setAttribute('class', 'visually-hidden');
}
},
Den skal se omtrent slik ut:
_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 -%}
Erstatt det med:
{%- 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 %}
Hvis du ikke finner koden over, finner du denne koden og sletter den:
{%- 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 -%}
Erstatt det med:
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
Hvis du ikke finner koden over, finner du denne koden:
{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
Erstatt det med:
{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}
- Finn følgende kode:
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
Erstatt det med:
{% 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 %}
Erstatt det med:
<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 %}
Den skal se omtrent slik ut:
{% 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
-%}
Erstatt det med:
{%- 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
-%}
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.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
Finn temaet du vil redigere, og klikk deretter på … > Rediger standardtemainnhold.
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
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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();
}
Legg til følgende kode på en ny linje under:
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
Den skal se omtrent slik ut:
// 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.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanaler-seksjonen trykker du på Nettbutikk.
- Trykk på Administrer temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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();
}
Legg til følgende kode på en ny linje under:
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
Den skal se omtrent slik ut:
// 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.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanaler-seksjonen trykker du på Nettbutikk.
- Trykk på Administrer temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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();
}
Legg til følgende kode på en ny linje under:
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
Den skal se omtrent slik ut:
// 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 %}
Erstatt det med:
{% 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 %}
Erstatt dem med:
{% 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 %}
Den skal se omtrent slik ut:
{% 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.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
Finn temaet du vil redigere, og klikk deretter på … > Rediger standardtemainnhold.
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
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanaler-seksjonen trykker du på Nettbutikk.
- Trykk på Administrer temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanaler-seksjonen trykker du på Nettbutikk.
- Trykk på Administrer temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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 -%}
Erstatt det med:
{%- 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 %}
Den skal se omtrent slik ut:
{% 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.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
Finn temaet du vil redigere, og klikk deretter på … > Rediger standardtemainnhold.
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
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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);
Legg til følgende kode på en ny linje under:
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
Den skal se omtrent slik ut:
// 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.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanaler-seksjonen trykker du på Nettbutikk.
- Trykk på Administrer temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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);
Legg til følgende kode på en ny linje under:
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
Den skal se omtrent slik ut:
// 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.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanaler-seksjonen trykker du på Nettbutikk.
- Trykk på Administrer temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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);
Legg til følgende kode på en ny linje under:
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
Den skal se omtrent slik ut:
// 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 %}
Erstatt det med:
{% 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 %}
Den skal se omtrent slik ut:
{% 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.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
Finn temaet du vil redigere, og klikk deretter på … > Rediger standardtemainnhold.
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
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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);
Legg til følgende kode på en ny linje under:
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
Den skal se omtrent slik ut:
// 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.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanaler-seksjonen trykker du på Nettbutikk.
- Trykk på Administrer temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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);
Legg til følgende kode på en ny linje under:
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
Den skal se omtrent slik ut:
// 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.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanaler-seksjonen trykker du på Nettbutikk.
- Trykk på Administrer temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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);
Legg til følgende kode på en ny linje under:
if (typeof(productOptions) != "undefined") {
for (i = 0; i < productOptions.length; i++) {
const vowels = ['a', 'e', 'i', 'o', 'u'];
const firstOptionLetter = productOptions[i][i][0].toLowerCase();
let indef = 'a';
if (vowels.includes(firstOptionLetter)) {
indef = 'an';
};
const select = document.querySelectorAll('.single-option-selector')[i];
const options = select.querySelectorAll('option');
if (options.length > 1) {
let option = new Option('Pick ' + indef + ' ' + productOptions[i][i], '');
select.add(option, select.firstChild);
select.selectedIndex = 0;
}
}
}
Den skal se omtrent slik ut:
// 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 %}
Erstatt det med:
{% 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 %}
Erstatt det med:
{% 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 %}
Den skal se omtrent slik ut:
{% 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.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
Finn temaet du vil redigere, og klikk deretter på … > Rediger standardtemainnhold.
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
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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();
Erstatt det med:
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;
}
med:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
- Klikk på Lagre.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanaler-seksjonen trykker du på Nettbutikk.
- Trykk på Administrer temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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();
Erstatt det med:
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;
}
med:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
- Klikk på Lagre.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanaler-seksjonen trykker du på Nettbutikk.
- Trykk på Administrer temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen, og klikk deretter 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();
Erstatt det med:
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;
}
med:
/* 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 %}
Erstatt det med:
{% 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 %}
Hvis du ikke finner koden over, finner du denne koden og sletter den:
{% if variant == current_variant %} selected="selected" {% endif %}
- Finn alle forekomster av denne koden:
{% unless current_variant.available %}
Erstatt det med:
{% 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 %}
Erstatt det med:
{% 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 %}
Den skal se omtrent slik ut:
{% 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.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
Finn temaet du vil redigere, og klikk deretter på … > Rediger standardtemainnhold.
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
. Den skal finnes i en av disse fire filene:-
product.liquid
-malen under Maler -
theme.liquid
-oppsett under Oppsett -
product.liquid
-utdraget under Utdrag -
single-product.liquid
-utdraget under Utdrag
-
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>
eller
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
Erstatt det med:
<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:
- Minimal, Pop eller Supply: Hvis du bruker Minimal, Pop eller Supply, finn alle forekomstene av denne koden:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Erstatt dem med:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
- Andre gratis Shopify-temaer: Hvis du bruker et annet Shopify-tema, finn denne koden:
{% assign current_variant = product.selected_or_first_available_variant %}
Erstatt det med:
{% 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.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
- Trykk på …-knappen fra Shopify-appen.
- I Salgskanal-seksjonen trykker du på Nettbutikk.
- Trykk på Redigere temaer.
Finn temaet du vil redigere, og klikk deretter på … > Rediger standardtemainnhold.
I Filter-boksen, begynn å skrive
unavailable
for å vise oversettelsen for «Utilgjengelig».Erstatt teksten Utilgjengelig med
Make a selection
.Klikk på Lagre.