Få dine kunder til at vælge en valgmulighed
Når en kunde besøger en produktside i din webshop, vælges den første tilgængelige variant som standard. Du kan bruge tilpasningen Få dine kunder til at vælge en valgmulighed for at deaktivere det automatiske valg af den første tilgængelige variant. På denne måde bliver kunden bedt om at vælge en variant manuelt, før der vises en variant.
Hvis du bruger tilpasningen Få dine kunder til at vælge en valgmulighed, vil dit tema muligvis ikke vise en produktpris, før kunden har valgt en variant. Produkter med varianter har ikke en tilgængelig pris, og den pris, der vises, afhænger af den variant, der vælges.

Temaer med og uden sektioner
På denne side
Trin for temaer med afsnit
Vælg dit tema
Trinnene til denne tilpasning varierer afhængigt af dit tema. Klik på knappen for dit tema, inden du følger vejledningen nedenfor:
Boundless
Trin for Boundless
Følg disse trin for at anvende tilpasningen til Boundless:
Rediger dit temas JavaScript-fil
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.
Klik på
theme.js
ellertheme.js.liquid
i mappen Aktiver.Find koden
initVariantSelectors
. Find følgende kode nedenfor:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);
Tilføj følgende kode på en ny linje nedenfor:
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;
}
}
}
Koden bør se nogenlunde således ud:
// 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;
}
}
}
- Find følgende linje kode:
$(selectors.addToCartText).html(theme.strings.soldOut);
Der er to forekomster af denne kodelinje, som begge findes i productVariantCallback
-funktionen. Erstat kun det andet eksempel med:
$(selectors.addToCartText).html('Make a Selection');
- Klik på Gem.
Rediger din produktsideskabelon
Sådan redigerer du din produktsideskabelon:
- Klik på
product-template.liquid
i mappen Afsnit. - Find følgende kode:
{% assign current_variant = product.selected_or_first_available_variant %}
Udskift den med:
{% assign current_variant = product.selected_variant %}
- Find følgende kode, og slet den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
Find koden
{% schema %}
. Indsæt følgende kode på en separat linje over dette:
{% 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 %}
Koden bør se nogenlunde således ud:
{% 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 %}
- Klik på Gem.
Skift sprogindstillingerne for Læg i indkøbskurven
Du kan ændre sprogindstillingerne for knappen Læg i indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.
Trin:
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik derefter på ... > Rediger standardtemaindhold.
Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.
Erstat teksten Ikke tilgængelig med Foretag et valg.
Klik på Gem.
Debut
Trin for Debut
Følg disse trin for at anvende tilpasningen til Debut:
Rediger dit temas JavaScript-fil
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.
Klik på
theme.js
ellertheme.js.liquid
i mappen Aktiver.Tilføj 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;
}
}
}
})();
-
Find koden
_updatePrice: function(variant)
. Udskift 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 kan finde den ovenstående kode, skal du finde følgende kode:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
}
Udskift den med:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
-
Find koden
this.currentVariant = variant;
Tilføj følgende kode nedenfor:
this._updatePaymentButton(variant);
Resultatet bør se nogenlunde således ud:
this.currentVariant = variant;
this._updatePaymentButton(variant);
-
Find koden
_updateImages: function(variant)
. Udskift følgende kode:
var currentVariantImage = this.currentVariant.featured_image || {};
med:
if (this.currentVariant != undefined) {
var currentVariantImage = this.currentVariant.featured_image || {};
}
- Find følgende kode lige herunder:
if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
}
Udskift den med:
/* if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
} */
-
Find koden
_updateSKU: function(variant)
. Udskift følgende kode:
if (variant.sku === this.currentVariant.sku) {
return;
}
med:
if (this.currentVariant != undefined ) {
if (variant.sku === this.currentVariant.sku) {
return;
}
}
-
Find koden
_initVariants: function() {
. Udskift 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);
} */
- Find 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
})
);
},
Tilføj følgende kode på en ny linje under ovenstående kode:
_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');
}
},
Koden bør se nogenlunde således ud:
_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');
}
},
- Klik på Gem.
Rediger din produktsideskabelon
Sådan redigerer du din produktsideskabelon:
- Klik på
product-template.liquid
i mappen Afsnit. - Find følgende kode:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Udskift den med:
{%- if product.variants.size > 1 -%}
{%- assign current_variant = product.selected_variant -%}
{%- else %}
{%- assign current_variant = product.first_available_variant -%}
{%- endif %}
- Find følgende kode, og slet den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Hvis du ikke kan finde den ovenstående kode, skal du finde denne kode og slette den:
{%- if variant == current_variant %} selected="selected" {%- endif -%}
- Find følgende kode:
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
Udskift den med:
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
Hvis du ikke kan finde den ovenstående kode, skal du finde følgende kode:
{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
Udskift den med:
{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}
- Find følgende kode:
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
Udskift den 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 %}
- Find følgende kode:
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
Udskift den med:
<div class="payment-button {% if current_variant == blank %}visually-hidden {% endif %}">
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
-
Find koden
{% schema %}
. Indsæt følgende kode på en separat linje over dette:
{% 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 %}
Koden bør se nogenlunde således ud:
{% 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 %}
- Klik på Gem.
Rediger dit produktpriskodestykke
Sådan redigerer du kodestykket for produktprisen:
- Klik på
product-price.liquid
i mappen Kodestykker. - Find 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
-%}
Udskift den 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
-%}
Skift sprogindstillingerne for Læg i indkøbskurven
Du kan ændre sprogindstillingerne for knappen Læg i indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.
Trin:
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik derefter på ... > Rediger standardtemaindhold.
Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.
Erstat teksten Ikke tilgængelig med Foretag et valg.
Klik på Gem.
Minimal
Trin for Minimal
Følg disse trin for at anvende tilpasningen til Minimal:
Rediger dit temas JavaScript-fil
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.
Klik på
theme.js
ellertheme.js.liquid
i mappen Aktiver.Find koden
initProductVariant: function() {
. Find 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();
}
Tilføj følgende kode på en ny linje nedenfor:
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;
}
}
}
Koden bør se nogenlunde således ud:
// 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;
}
}
}
- Klik på Gem.
Rediger din produktsideskabelon
Sådan redigerer du din produktsideskabelon:
- Klik på
product-template.liquid
i mappen Afsnit. - Find følgende kode:
{% assign variant = product.selected_or_first_available_variant %}
Udskift den med:
{% assign variant = product.selected_variant %}
- Find følgende kode, og slet den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Find alle forekomster af denne kode:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Erstat med:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
-
Find koden
{% schema %}
. Indsæt følgende kode på en separat linje over dette:
{% 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 %}
Koden bør se nogenlunde således ud:
{% 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 %}
- Klik på Gem.
Skift sprogindstillingerne for Læg i indkøbskurven
Du kan ændre sprogindstillingerne for knappen Læg i indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.
Trin:
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik derefter på ... > Rediger standardtemaindhold.
Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.
Erstat teksten Ikke tilgængelig med Foretag et valg.
Klik på Gem.
Narrative
Trin for Narrative
Følg disse trin for at anvende tilpasningen til Narrative:
Rediger dit temas JavaScript-fil
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.
Klik på
custom.js
i mappen Aktiver.Tilføj 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;
}
}
}
})();
- Klik på Gem.
Rediger din produktsideskabelon
Sådan redigerer du din produktsideskabelon:
- Klik på
product-template.liquid
i mappen Afsnit. - Find følgende kode:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Udskift den med:
{%- if product.variants.size > 1 -%}
{%- assign current_variant = product.selected_variant -%}
{%- else -%}
{%- assign current_variant = product.first_available_variant -%}
{%- endif -%}
-
Find koden
{% schema %}
. Indsæt følgende kode på en separat linje over dette:
{% 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 %}
Koden bør se nogenlunde således ud:
{% 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 %}
- Klik på Gem.
Skift sprogindstillingerne for Læg i indkøbskurven
Du kan ændre sprogindstillingerne for knappen Læg i indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.
Trin:
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik derefter på ... > Rediger standardtemaindhold.
Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.
Erstat teksten Ikke tilgængelig med Foretag et valg.
Klik på Gem.
Simple
Trin for Simple
Følg disse trin for at anvende tilpasningen til Simple:
Rediger dit temas JavaScript-fil
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.
Klik på
theme.js
ellertheme.js.liquid
i mappen Aktiver.Find koden
initProductVariant: function() {
. Find følgende kode nedenfor:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);
Tilføj følgende kode på en ny linje nedenfor:
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;
}
}
}
Koden bør se nogenlunde således ud:
// 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;
}
}
}
- Klik på Gem.
Rediger din produktsideskabelon
Sådan redigerer du din produktsideskabelon:
- Klik på
product-template.liquid
i mappen Afsnit. - Find følgende kode:
{% assign current_variant = product.selected_or_first_available_variant %}
Udskift den med:
{% assign current_variant = product.selected_variant %}
- Find følgende kode, og slet den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
Find koden
{% schema %}
. Indsæt følgende kode på en separat linje over dette:
{% 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 %}
Koden bør se nogenlunde således ud:
{% 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 %}
- Klik på Gem.
Skift sprogindstillingerne for Læg i indkøbskurven
Du kan ændre sprogindstillingerne for knappen Læg i indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.
Trin:
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik derefter på ... > Rediger standardtemaindhold.
Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.
Erstat teksten Ikke tilgængelig med Foretag et valg.
Klik på Gem.
Supply
Trin for Supply
Følg disse trin for at anvende tilpasningen til Supply:
Rediger dit temas JavaScript-fil
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.
Klik på
theme.js
ellertheme.js.liquid
i mappen Aktiver.Find koden
initProductVariant: function() {
. Find følgende kode nedenfor:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);
Tilføj følgende kode på en ny linje nedenfor:
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;
}
}
}
Koden bør se nogenlunde således ud:
// 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;
}
}
}
- Klik på Gem.
Rediger din produktsideskabelon
Sådan redigerer du din produktsideskabelon:
- Klik på
product-template.liquid
i mappen Afsnit. - Find følgende kode:
{% assign variant = product.selected_or_first_available_variant %}
Udskift den med:
{% assign variant = product.selected_variant %}
- Find følgende kode, og slet den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Find alle forekomster af denne kode:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Udskift den med:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
-
Find koden
{% schema %}
. Indsæt følgende kode på en separat linje over dette:
{% 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 %}
Koden bør se nogenlunde således ud:
{% 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 %}
- Klik på Gem.
Skift sprogindstillingerne for Læg i indkøbskurven
Du kan ændre sprogindstillingerne for knappen Læg i indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.
Trin:
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik derefter på ... > Rediger standardtemaindhold.
Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.
Erstat teksten Ikke tilgængelig med Foretag et valg.
Klik på Gem.
Venture
Trin for Venture
Følg disse trin for at anvende tilpasningen til Venture:
Rediger dit temas JavaScript-fil
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.
Klik på
theme.js
ellertheme.js.liquid
i mappen Aktiver.Tilføj 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;
}
}
}
})();
- Find følgende kode:
this.currentVariant = this._getVariantFromOptions();
Udskift den med:
this.currentVariant = this._getVariantFromOptions() || {};
-
Find koden
_updatePrice: function(variant)
. Udskift 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;
} */
- Klik på Gem.
Rediger din produktsideskabelon
Sådan redigerer du din produktsideskabelon:
- Klik på
product-template.liquid
i mappen Afsnit. - Find følgende kode:
{% assign current_variant = product.selected_or_first_available_variant %}
Udskift den med:
{% if product.variants.size > 1 %}
{% assign current_variant = product.selected_variant %}
{% else %}
{% assign current_variant = product.first_available_variant %}
{% endif %}
- Find følgende kode, og slet den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Hvis du ikke kan finde den ovenstående kode, skal du finde denne kode og slette den:
{% if variant == current_variant %} selected="selected" {% endif %}
- Find alle forekomster af denne kode:
{% unless current_variant.available %}
Udskift den med:
{% unless current_variant.available or product.variants.size == 1 and variant.available %}
- Find 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 %}
Udskift den 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 %}
-
Find koden
{% schema %}
. Indsæt følgende kode på en separat linje over dette:
{% 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 %}
Koden bør se nogenlunde således ud:
{% 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 %}
- Klik på Gem.
Skift sprogindstillingerne for Læg i indkøbskurven
Du kan ændre sprogindstillingerne for knappen Læg i indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.
Trin:
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik derefter på ... > Rediger standardtemaindhold.
Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.
Erstat teksten Ikke tilgængelig med Foretag et valg.
Klik på Gem.
Trin for temaer uden sektioner
Tilføj prompter i dine variantrullemenuer
- Klik på Opret et nyt kodestykke i mappen Kodestykker.
- Navngiv dit nye kodestykke
pick-an-option
. - I dit nye kodestykke skal du indsætte denne kode er hosted på GitHub.
- Klik på Gem.
- I mappen Layout skal du klikke på
theme.liquid
. -
Find det afsluttende
</body>
-tag tæt på bunden af filen. Indsæt følgende kode på en ny linje lige over det afsluttende</body>
-tag:
{% render 'pick-an-option' %}
- Klik på Gem.
-
Find filen, der indeholder Læg i indkøbskurven-formularen. Den vil have en
action
-attribut, der er indstillet til/cart/add
. Den skal være i en af disse fire filer:-
product.liquid
-skabelonen under Skabeloner -
theme.liquid
-layoutet under Layout -
product.liquid
-kodestykket under Kodestykker -
single-product.liquid
-kodestykket under Kodestykker
-
Find denne kode inde i formularen:
<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>
Du kan også finde denne kode i formularen:
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
Erstat koden med følgende kodeblok:
<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>
Hvis du bruger Minimal, Pop eller Supply, skal du findealle forekomster af denne kode:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Erstat koden med følgende kodeblok:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
Hvis du bruger et andet ældre Shopify-tema, skal du finde denne kode:
{% assign current_variant = product.selected_or_first_available_variant %}
Erstat koden med følgende kodeblok:
{% assign current_variant = product.selected_variant %}
Klik på Gem.
Skift sprogindstillingerne for Læg i indkøbskurven
Du kan ændre sprogindstillingerne for knappen Læg i indstillinger, så produkterne ikke vises som Ikke tilgængelig, før en kunde vælger et produkt.
Trin:
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik derefter på ... > Rediger standardtemaindhold.
Begynd at skrive Ikke tilgængelig i søgelinjen Filtrer varer for at vise oversættelsen Ikke tilgængelig.
Erstat teksten Ikke tilgængelig med Foretag et valg.
Klik på Gem.