Få kunder att välja ett alternativ
När en kund besöker en produktsida i din webbshop väljs den första tillgängliga varianten som standard. Du kan använda anpassningen Få kunderna att välja ett alternativ för att inaktivera automatiskt val av den första tillgängliga varianten. På detta sätt uppmanas kunden att välja en variant manuellt innan någon visas.
Om du använder anpassningen Skaffa kunder för att välja ett alternativ så kanske ditt tema inte visar ett produktpris förrän kunden väljer en variant. Produkter med varianter har inte ett utvalt pris och priset som visas bestäms av den variant som har valts.

Avsnitt och icke-sektionerade teman
På den här sidan
Steg för indelade teman
Välj ditt tema
Stegen för denna anpassning varierar beroende på ditt tema. Klicka på knappen för ditt tema innan du följer anvisningarna nedan:
Boundless
Steg för Boundless
Följ dessa steg för att tillämpa anpassningen till Boundless:
Redigera ditt temas JavaScript-fil
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på
theme.js
ellertheme.js.liquid
i registret Tillgångar.Hitta efter koden
initVariantSelectors
. Under den letar du efter följande kod:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject, this.$container);
Lägg till följande kod på en ny rad 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 ska se ut ungefär så här:
// 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;
}
}
}
- Hitta följande kodrad:
$(selectors.addToCartText).html(theme.strings.soldOut);
Det finns två instanser i den här koden, båda finns i productVariantCallback
-funktionen. Ersätt endast den andra instansen med:
$(selectors.addToCartText).html('Make a Selection');
- Klicka på Spara.
Redigera produktsidemallen
Redigera din produktsidemall
- Klicka på
product-template.liquid
i registret Avsnitt. - Hitta följande kod:
{% assign current_variant = product.selected_or_first_available_variant %}
Ersätt den med:
{% assign current_variant = product.selected_variant %}
- Hitta följande kod och radera den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
Hitta koden
{% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% 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 ska se ut ungefär så här:
{% 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 %}
- Klicka på Spara.
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen Lägg till i varukorgen så att produkterna inte visas som Inte tillgängliga innan en kund väljer en produkt.
Steg:
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera och klicka sedan på ... > Redigera standardtemainnehåll.
Börja skriva Inte tillgänglig i sökfältet Filtrera artiklar för att visa översättningen för Inte tillgänglig.
Ersätt texten Inte tillgänglig med Gör ett val.
Klicka på Spara.
Debut
Steg för Debut
Följ dessa steg för att tillämpa anpassningen för Debut:
Redigera ditt temas JavaScript-fil
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på
theme.js
ellertheme.js.liquid
i registret Tillgångar.Lägg till följande kod längst ner 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;
}
}
}
})();
-
Hitta koden
_updatePrice: function(variant)
. Byt ut följande kod:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price &&
variant.unit_price === this.currentVariant.unit_price
) {
return;
}
mot:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price &&
variant.unit_price === this.currentVariant.unit_price
) {
return;
} */
Leta efter följande kod om du inte hittar ovanstående kod:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
}
Ersätt den med:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
-
Hitta koden
this.currentVariant = variant;
Lägg till följande kod under:
this._updatePaymentButton(variant);
Resultatet ska se ut ungefär så här:
this.currentVariant = variant;
this._updatePaymentButton(variant);
-
Hitta koden
_updateImages: function(variant)
. Byt ut följande kod:
var currentVariantImage = this.currentVariant.featured_image || {};
mot:
if (this.currentVariant != undefined) {
var currentVariantImage = this.currentVariant.featured_image || {};
}
- Hitta följande kod precis under:
if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
}
Ersätt den med:
/* if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
} */
-
Hitta koden
_updateSKU: function(variant)
. Byt ut följande kod:
if (variant.sku === this.currentVariant.sku) {
return;
}
mot:
if (this.currentVariant != undefined ) {
if (variant.sku === this.currentVariant.sku) {
return;
}
}
-
Hitta koden
_initVariants: function() {
. Byt ut följande kod:
if (this.storeAvailability && this.variants.currentVariant.available) {
this.storeAvailability.updateContent(this.variants.currentVariant.id);
}
mot:
/* if (this.storeAvailability && this.variants.currentVariant.available) {
this.storeAvailability.updateContent(this.variants.currentVariant.id);
} */
- Hitta följande kod:
_updateSKU: function(variant) {
if (this.currentVariant != undefined ) {
if (variant.sku === this.currentVariant.sku) {
return;
}
}
this.container.dispatchEvent(
new CustomEvent('variantSKUChange', {
detail: {
variant: variant
},
bubbles: true,
cancelable: true
})
);
},
Lägg till följande kod, på en ny rad, under ovanstående kod:
_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 ska se ut ungefär så här:
_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');
}
},
- Klicka på Spara.
Redigera produktsidemallen
Redigera din produktsidemall
- Klicka på
product-template.liquid
i registret Avsnitt. - Hitta följande kod:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Ersätt den med:
{%- if product.variants.size > 1 -%}
{%- assign current_variant = product.selected_variant -%}
{%- else %}
{%- assign current_variant = product.first_available_variant -%}
{%- endif %}
- Hitta följande kod och radera den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Om du inte hittar ovanstående kod kan du leta efter följande kod och radera den:
{%- if variant == current_variant %} selected="selected" {%- endif -%}
- Hitta följande kod:
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
Ersätt den med:
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
Leta efter följande kod om du inte hittar ovanstående kod:
{%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}
Ersätt den med:
{%- assign featured_media = current_variant.featured_media | default: product.featured_media -%}
- Hitta följande kod:
{% unless current_variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
Ersätt 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 %}
- Hitta följande kod:
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
Ersätt den med:
<div class="payment-button {% if current_variant == blank %}visually-hidden {% endif %}">
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
-
Hitta koden
{% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% 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 ska se ut ungefär så här:
{% 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 %}
- Klicka på Spara.
Redigera din produkts prisfragment
För att redigera din produkts prisfragment:
- Klicka på
product-price.liquid
i katalogen Fragment. - Hitta följande kod:
{%- liquid
if variant.title
assign compare_at_price = variant.compare_at_price
assign price = variant.price
assign available = variant.available
else
assign compare_at_price = 1999
assign price = 1999
assign available = true
endif
assign money_price = price | money
-%}
Ersätt 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
-%}
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen Lägg till i varukorgen så att produkterna inte visas som Inte tillgängliga innan en kund väljer en produkt.
Steg:
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera och klicka sedan på ... > Redigera standardtemainnehåll.
Börja skriva Inte tillgänglig i sökfältet Filtrera artiklar för att visa översättningen för Inte tillgänglig.
Ersätt texten Inte tillgänglig med Gör ett val.
Klicka på Spara.
Minimal
Steg för Minimal
Följ dessa steg för att tillämpa anpassningen till Minimal:
Redigera ditt temas JavaScript-fil
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på
theme.js
ellertheme.js.liquid
i registret Tillgångar.Hitta efter koden
initProductVariant: function() {
. Under den letar du efter följande kod:
// Hide selectors if we only have 1 variant and its title contains 'Default'.
if (
product.variants.length === 1 &&
product.variants[0].title.toLowerCase().indexOf('default') !== -1
) {
$('.selector-wrapper', this.$container).hide();
}
Lägg till följande kod på en ny rad 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 ska se ut ungefär så här:
// 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;
}
}
}
- Klicka på Spara.
Redigera produktsidemallen
Redigera din produktsidemall
- Klicka på
product-template.liquid
i registret Avsnitt. - Hitta följande kod:
{% assign variant = product.selected_or_first_available_variant %}
Ersätt den med:
{% assign variant = product.selected_variant %}
- Hitta följande kod och radera den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Hitta alla förekomster av denna kod:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Ersätt med:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
-
Hitta koden
{% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% 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 ska se ut ungefär så här:
{% 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 %}
- Klicka på Spara.
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen Lägg till i varukorgen så att produkterna inte visas som Inte tillgängliga innan en kund väljer en produkt.
Steg:
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera och klicka sedan på ... > Redigera standardtemainnehåll.
Börja skriva Inte tillgänglig i sökfältet Filtrera artiklar för att visa översättningen för Inte tillgänglig.
Ersätt texten Inte tillgänglig med Gör ett val.
Klicka på Spara.
Narrative
Steg för Narrative
Följ dessa steg för att tillämpa anpassningen till Narrative:
Redigera ditt temas JavaScript-fil
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på
custom.js
i registret Tillgångar.Lägg till följande kod längst ner 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;
}
}
}
})();
- Klicka på Spara.
Redigera produktsidemallen
Redigera din produktsidemall
- Klicka på
product-template.liquid
i registret Avsnitt. - Hitta följande kod:
{%- assign current_variant = product.selected_or_first_available_variant -%}
Ersätt den med:
{%- if product.variants.size > 1 -%}
{%- assign current_variant = product.selected_variant -%}
{%- else -%}
{%- assign current_variant = product.first_available_variant -%}
{%- endif -%}
-
Hitta koden
{% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% 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 ska se ut ungefär så här:
{% 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 %}
- Klicka på Spara.
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen Lägg till i varukorgen så att produkterna inte visas som Inte tillgängliga innan en kund väljer en produkt.
Steg:
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera och klicka sedan på ... > Redigera standardtemainnehåll.
Börja skriva Inte tillgänglig i sökfältet Filtrera artiklar för att visa översättningen för Inte tillgänglig.
Ersätt texten Inte tillgänglig med Gör ett val.
Klicka på Spara.
Simple
Steg för Simple
Följ dessa steg för att tillämpa anpassningen till Simple:
Redigera ditt temas JavaScript-fil
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på
theme.js
ellertheme.js.liquid
i registret Tillgångar.Hitta efter koden
initProductVariant: function() {
. Under den letar du efter följande kod:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
Slate.simplifyVariantLabels(this.productSingleObject, this.$container);
Lägg till följande kod på en ny rad 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 ska se ut ungefär så här:
// 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;
}
}
}
- Klicka på Spara.
Redigera produktsidemallen
Redigera din produktsidemall
- Klicka på
product-template.liquid
i registret Avsnitt. - Hitta följande kod:
{% assign current_variant = product.selected_or_first_available_variant %}
Ersätt den med:
{% assign current_variant = product.selected_variant %}
- Hitta följande kod och radera den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
-
Hitta koden
{% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% 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 ska se ut ungefär så här:
{% 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 %}
- Klicka på Spara.
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen Lägg till i varukorgen så att produkterna inte visas som Inte tillgängliga innan en kund väljer en produkt.
Steg:
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera och klicka sedan på ... > Redigera standardtemainnehåll.
Börja skriva Inte tillgänglig i sökfältet Filtrera artiklar för att visa översättningen för Inte tillgänglig.
Ersätt texten Inte tillgänglig med Gör ett val.
Klicka på Spara.
Supply
Steg för Supply
Följ dessa steg för att tillämpa anpassningen till Supply:
Redigera ditt temas JavaScript-fil
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på
theme.js
ellertheme.js.liquid
i registret Tillgångar.Hitta efter koden
initProductVariant: function() {
. Under den letar du efter följande kod:
// Clean up variant labels if the Shopify-defined
// defaults are the only ones left
this.simplifyVariantLabels(this.productSingleObject);
Lägg till följande kod på en ny rad 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 ska se ut ungefär så här:
// 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;
}
}
}
- Klicka på Spara.
Redigera produktsidemallen
Redigera din produktsidemall
- Klicka på
product-template.liquid
i registret Avsnitt. - Hitta följande kod:
{% assign variant = product.selected_or_first_available_variant %}
Ersätt den med:
{% assign variant = product.selected_variant %}
- Hitta följande kod och radera den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
- Hitta alla förekomster av denna kod:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Ersätt den med:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
-
Hitta koden
{% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% 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 ska se ut ungefär så här:
{% 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 %}
- Klicka på Spara.
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen Lägg till i varukorgen så att produkterna inte visas som Inte tillgängliga innan en kund väljer en produkt.
Steg:
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera och klicka sedan på ... > Redigera standardtemainnehåll.
Börja skriva Inte tillgänglig i sökfältet Filtrera artiklar för att visa översättningen för Inte tillgänglig.
Ersätt texten Inte tillgänglig med Gör ett val.
Klicka på Spara.
Venture
Steg för Venture
Följ dessa steg för att tillämpa anpassningen till Venture:
Redigera ditt temas JavaScript-fil
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera, klicka på knappen … för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.
Klicka på
theme.js
ellertheme.js.liquid
i registret Tillgångar.Lägg till följande kod längst ner 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;
}
}
}
})();
- Hitta följande kod:
this.currentVariant = this._getVariantFromOptions();
Ersätt den med:
this.currentVariant = this._getVariantFromOptions() || {};
-
Hitta koden
_updatePrice: function(variant)
. Byt ut följande kod:
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
}
mot:
/* if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
} */
- Klicka på Spara.
Redigera produktsidemallen
Redigera din produktsidemall
- Klicka på
product-template.liquid
i registret Avsnitt. - Hitta följande kod:
{% assign current_variant = product.selected_or_first_available_variant %}
Ersätt den med:
{% if product.variants.size > 1 %}
{% assign current_variant = product.selected_variant %}
{% else %}
{% assign current_variant = product.first_available_variant %}
{% endif %}
- Hitta följande kod och radera den:
{% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %}
Om du inte hittar ovanstående kod kan du leta efter den här koden och radera den:
{% if variant == current_variant %} selected="selected" {% endif %}
- Hitta alla förekomster av denna kod:
{% unless current_variant.available %}
Ersätt den med:
{% unless current_variant.available or product.variants.size == 1 and variant.available %}
- Hitta följande kod:
{% unless current_variant.available or product.variants.size == 1 and variant.available %}
{{ 'products.product.sold_out' | t }}
{% else %}
{{ 'products.product.add_to_cart' | t }}
{% endunless %}
Ersätt 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 %}
-
Hitta koden
{% schema %}
. Klistra in följande kod på sin egen rad ovanför den:
{% 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 ska se ut ungefär så här:
{% 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 %}
- Klicka på Spara.
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen Lägg till i varukorgen så att produkterna inte visas som Inte tillgängliga innan en kund väljer en produkt.
Steg:
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera och klicka sedan på ... > Redigera standardtemainnehåll.
Börja skriva Inte tillgänglig i sökfältet Filtrera artiklar för att visa översättningen för Inte tillgänglig.
Ersätt texten Inte tillgänglig med Gör ett val.
Klicka på Spara.
Steg för icke-indelade teman
Lägg till prompter till dina varianters rullgardinsmenyer
- Klicka på Lägg till en ny snippet i katalogen Snippets.
- Döp ditt nya fragment till
pick-an-option
. - Klistra in den här koden i GitHub i din nya snippet.
- Klicka på Spara.
- Klicka på
theme.liquid
i Layout-registret -
Hitta sluttaggen
</body>
nära slutet av filen. På en ny rad, precis ovanför sluttaggen</body>
, klistrar du in följande kod:
{% render 'pick-an-option' %}
- Klicka på Spara.
-
Hitta den fil som innehåller formuläret "Lägg till i varukorgen". Den kommer att ha ett
action
attribut som är inställd till/cart/add
. Den bör finnas i en av dessa fyra filer:-
product.liquid
mallen under Mallar -
theme.liquid
layouten under Layout -
product.liquid
snippeten under Snippets -
single-product.liquid
snippeten under Snippets
-
Hitta den här koden i formuläret:
<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 hitta den här koden i formuläret:
<option {% if variant == current_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
Byt ut koden med följande kodblock:
<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>
Om du använder Minimal, Pop eller Supply, hitta alla förekomster av denna kod:
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
Byt ut koden med följande kodblock:
{% assign featured_image = product.selected_variant.featured_image | default: product.featured_image %}
Om du använder något annat Shopify Vintage-tema, hitta den här koden:
{% assign current_variant = product.selected_or_first_available_variant %}
Byt ut koden med följande kodblock:
{% assign current_variant = product.selected_variant %}
Klicka på Spara.
Ändra språkinställningar för "Lägg till i varukorgen"
Du kan ändra språkinställningarna för knappen Lägg till i varukorgen så att produkterna inte visas som Inte tillgängliga innan en kund väljer en produkt.
Steg:
Från din Shopify-admin går du till Webbshop > Teman.
Hitta det tema du vill redigera och klicka sedan på ... > Redigera standardtemainnehåll.
Börja skriva Inte tillgänglig i sökfältet Filtrera artiklar för att visa översättningen för Inte tillgänglig.
Ersätt texten Inte tillgänglig med Gör ett val.
Klicka på Spara.